.case-page { --paper: #0c1018; --ink: #eef2f8; --body: #bec8d8; --muted: #9aa8be; --line: #cbd9f014; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; --case-accent: #c7adff; --wash: #8e91c9; --case-sky: #86cfff; --case-mint: #79dfbd; --case-peach: #ffc09e; --case-tone: var(--case-accent); --case-outline: color-mix(in srgb, var(--case-accent) 25%, transparent); --case-panel: color-mix(in srgb, var(--case-accent) 6%, var(--paper-light, #151d2a)); --case-gutter: 64px; font-family: var(--sans); background: var(--paper); }
.case-page.case-care { --case-accent: #94d9c6; --wash: #6aab9b; }
.case-page.case-bixby { --case-accent: #d1c7ec; --wash: #8980aa; }
.case-page.case-gaming { --case-accent: #d6dcac; --wash: #9ba568; }
.case-page::before, .case-page .site-header::before { display: none; }
.case-page .site-header { --ink: #f1f0eb; --body: #bec3c0; --rust: #e4bd8b; background: #121414f5; border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.case-page .header-inner { min-height: 76px; }
.case-page .identity { font-size: 21px; }
.case-page .monogram { width: 39px; height: 39px; font-size: 32px; }
.case-page .container { width: min(1160px, calc(100% - 96px)); }
.case-page .main-nav a, .case-page .contact-link { font-size: 13px; }
.case-page h1, .case-page h2, .case-page h3, .case-page h4 { font-family: var(--sans); font-weight: 500; }
.case-page h1 { max-width: 22ch; font-size: clamp(40px, calc(28px + 3.8vw), 80px); line-height: 1.06; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.case-page h1 em, .case-page h2 em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; }
.case-page h1 em::after { display: none; }
.case-page h2 { font-size: clamp(28px, calc(22px + 1.1vw), 38px); line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.case-page h3 { font-size: 23px; line-height: 1.4; letter-spacing: -.02em; text-wrap: balance; }
.case-page h4 { font-size: 20px; line-height: 1.4; letter-spacing: -.015em; }
.case-page p { text-wrap: pretty; }
.case-page section[tabindex="-1"]:focus, .case-page main[tabindex="-1"]:focus { outline: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.case-back { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; color: var(--muted); }
.case-back::before { content: "\2190"; margin-right: 10px; color: var(--case-accent); font-size: 16px; }
.case-back:hover { color: var(--ink); }
.case-hero { padding-block: 40px 64px; }
.case-topline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 32px; }
.case-topline .case-kicker { padding-left: 20px; border-left: 1px solid var(--line); color: var(--case-accent); }
.case-kicker { font-family: var(--sans); font-size: 11px; line-height: 1.6; font-weight: 500; letter-spacing: 1.25px; text-transform: uppercase; color: var(--muted); }
.case-title-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
.case-heading { min-width: 0; }
.case-heading .case-deck { font-size: 19px; line-height: 1.65; color: var(--body); max-width: 66ch; margin-top: 24px; }
.case-heading .case-deck + .case-deck { margin-top: 16px; }
.case-title-row > .case-facts { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.case-hero-art { position: relative; margin: 48px 0 0; padding: 54px 25px 40px; border-radius: 14px; background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--case-accent) 12%, transparent), transparent 70%), var(--paper-light); overflow: hidden; min-height: 540px; }
.case-page .device-frame { border-color: #7d8ca366; background: linear-gradient(125deg, #303946, #111821 36%, #1e2733 80%, #424e5c); box-shadow: 0 2px 0 #cbd9ed22 inset, 0 24px 48px #02071159, 0 3px 6px #0005; }
.case-page .device figcaption { color: var(--muted); }
.case-page .art-wash { opacity: .09; }
.case-hero-art .device-cluster { align-items: flex-start; }
.case-hero-art .device { --device-width: 221px; }
.case-hero-art .device-screen { max-height: 452px; overflow: hidden; }
.case-hero-art .device:nth-child(1) { transform: rotate(-7deg); }
.case-hero-art .device:nth-child(2) { transform: rotate(4deg); margin-top: 34px; z-index: 2; }
.case-hero-art .device:nth-child(3) { transform: rotate(-1deg); }
.bixby-hero-layout { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: clamp(70px, 12vw, 170px); }
.case-hero-art .bixby-hero-layout .device { --device-width: 240px; transform: rotate(5deg); }
.gaming-device-composition { position: relative; width: min(840px, 90%); margin: 30px auto 0; min-height: 445px; z-index: 1; }
.case-hero-art .gaming-device-composition .device--tablet { --device-width: 670px; transform: rotate(-4deg); }
.case-hero-art .gaming-device-composition .device--tablet .device-screen { max-height: none; }
.case-hero-art .gaming-device-composition .gaming-hero-phone { --device-width: 195px; position: absolute; right: 0; top: 75px; transform: rotate(8deg); z-index: 3; }
.gaming-hero-art { min-height: 620px; }
.case-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.case-facts dt { color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.case-facts dd { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--body); max-width: 42ch; }
.case-overview { margin-block: 0; padding-inline: 28px; border: 1px solid var(--case-outline); border-radius: 14px; background: var(--case-panel); scroll-margin-top: calc(var(--case-index-height, 60px) + 24px); }
.case-overview > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 12px 0; color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.5; list-style: none; cursor: pointer; }
.case-overview > summary::-webkit-details-marker { display: none; }
.case-overview > summary:hover { color: var(--case-accent); }
.case-overview[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.case-page main :is(summary, button, video, a[data-view]):focus-visible { outline: 2px solid var(--case-accent); outline-offset: 5px; }
.case-overview-toggle { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; }
.case-overview-toggle::before { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.case-overview[open] .case-overview-toggle::before { transform: translateY(2px) rotate(225deg); }
.case-overview-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; margin: 4px 0 28px; }
.case-overview-facts > div { min-width: 0; }
.case-overview-facts dt { color: var(--case-accent); font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: 1px; text-transform: uppercase; }
.case-overview-facts dd { margin: 8px 0 0; color: var(--body); font-size: 15px; line-height: 1.7; max-width: 60ch; text-wrap: pretty; }
.case-index { position: sticky; top: 0; background: #121414f2; backdrop-filter: blur(16px); border-block: 1px solid var(--line); z-index: 24; }
.case-index-inner { min-height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.case-index nav { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 10px; }
.case-index nav::-webkit-scrollbar { display: none; }
.case-index a { position: relative; min-height: 44px; padding-inline: 14px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.case-index a[aria-current="location"], .case-index a:hover { color: var(--ink); }
.case-index a[aria-current="location"] { background: color-mix(in srgb, var(--case-accent) 10%, transparent); }
.case-index .motion-toggle { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.reading-progress { display: block; position: absolute; bottom: -1px; height: 1px; width: 100%; transform: scaleX(var(--read-progress, 0)); transform-origin: left; background: var(--case-accent); }
.case-section { padding-block: 72px; scroll-margin-top: var(--case-index-height, 60px); }
.case-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--case-gutter); align-items: start; margin-inline: 0; }
.case-row > * { min-width: 0; }
.case-row--chapter > .chapter-heading { position: sticky; top: calc(var(--case-index-height, 60px) + 32px); }
/* A heading-only media wrapper is still a text-only row. */
.case-row:not([data-sp-motion-study], :has(img, video, svg, canvas, iframe, object, embed, [role="img"], .sequence-visual, .sp-motion-canvas)) { display: block; --case-copy-measure: 72ch; }
.case-row:not([data-sp-motion-study], :has(img, video, svg, canvas, iframe, object, embed, [role="img"], .sequence-visual, .sp-motion-canvas)) > :is(.chapter-heading, .case-media) { position: static; margin-bottom: 28px; }
.chapter-heading { margin: 0; }
.chapter-heading > .case-kicker, .chapter-heading > .number { display: block; margin-bottom: 16px; font-size: 11px; color: var(--case-accent); line-height: 1.6; letter-spacing: 1px; }
.chapter-heading h2, .chapter-heading h3 { max-width: 22ch; }
.chapter-heading h3 { font-size: 28px; }
.case-copy, .story-copy { min-width: 0; font-size: 18px; color: var(--body); line-height: 1.75; }
.case-page .case-copy, .case-page .story-copy { font-size: 17px; }
.case-copy p, .case-copy li, .case-copy dd { max-width: var(--case-copy-measure, 64ch); }
.case-copy p + p { margin-top: 24px; }
.case-page .case-copy p + p, .case-page .story-copy p + p { margin-top: 20px; }
.case-copy h3, .case-copy h4 { color: var(--ink); margin-block: 40px 16px; }
.case-copy > :first-child { margin-top: 0; }
.case-copy ul { padding-left: 22px; margin-block: 24px; }
.case-copy li + li { margin-top: 16px; }
.case-copy li::marker, .case-stack > li::marker { color: var(--case-accent); }
.case-copy :is(p, li) > a, .story-copy p > a { text-decoration: underline; text-decoration-color: var(--case-outline); text-underline-offset: 4px; }
.case-copy :is(p, li) > a:hover, .story-copy p > a:hover { text-decoration-color: var(--case-accent); }
.case-copy .case-kicker, .case-copy .number { font-size: 11px; letter-spacing: 1px; color: var(--case-accent); }
.case-copy .number { display: block; }
.case-copy .number + h3, .case-copy .case-kicker + h3 { margin-top: 12px; }
.case-reading { --case-copy-measure: 72ch; width: 100%; margin-left: 0; }
.case-series, .case-stack { margin: 0; padding: 0; }
.case-section > * + * { margin-top: 40px; }
.case-section > .chapter-heading + .case-copy { margin-top: 24px; }
.case-series > * + * { margin-top: 64px; }
.case-stack { display: block; }
.case-stack > * + * { margin-top: 32px; }
.case-stack > article, .case-stack > div { padding: 0; border: 0; }
.case-stack h3, .case-stack h4 { margin-block: 8px 12px; }
.case-stack dt { color: var(--ink); font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.case-stack dd { margin: 0; }
.case-copy > .case-stack { margin-top: 32px; }
.case-copy > .case-stack:first-child { margin-top: 0; }
ol.case-stack { list-style: decimal; padding-left: 22px; }
ol.case-stack > li > span { color: var(--ink); font-weight: 500; }
.case-stack details { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.case-stack summary { min-height: 44px; font-size: 20px; color: var(--ink); cursor: pointer; }
.case-stack summary:hover { color: var(--case-accent); }
.case-stack summary > span { font-size: 12px; color: var(--case-accent); margin-right: 16px; }
.case-stack details > p { margin-top: 16px; }
.case-media { min-width: 0; margin: 0; }
.case-media > figure, .case-exhibit > figure { margin: 0; }
.case-chapter-lead > figure { margin-top: 40px; }
.case-media img { height: auto; }
.case-image-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--case-gutter); align-items: start; }
.case-media .case-image-pair { grid-template-columns: 1fr; gap: 24px; }
.case-exhibit { max-width: 100%; }
.story-copy p { max-width: 66ch; }
.story-copy p + p { margin-top: 24px; }
.story-copy h3 { color: var(--ink); margin-bottom: 16px; max-width: 28ch; }
.story-copy strong { color: var(--ink); font-weight: 550; }
.story-copy ul { padding-left: 20px; margin-top: 24px; }
.story-copy li + li { margin-top: 12px; }
.story-note { font-family: var(--sans); font-size: 22px; line-height: 1.6; color: var(--ink); margin-top: 32px; }
.case-footnote, .demo-disclaimer { font-size: 13px; line-height: 1.75; color: var(--muted); margin-top: 24px; max-width: 80ch; }
.case-footnote a { text-decoration: underline; text-underline-offset: 4px; }
.project-facts { display: block; margin-top: 40px; }
.project-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 4px 24px; padding-block: 20px; border-top: 1px solid var(--line); }
.project-facts strong { grid-row: span 2; display: block; font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--case-accent); }
.project-facts span { display: block; font-size: 16px; color: var(--body); }
.project-facts small { display: block; font-size: 13px; color: var(--muted); line-height: 1.7; }
.metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-block: 32px; }
.metric-strip--two { grid-template-columns: repeat(2, 1fr); }
.hero-metrics { border-top: 1px solid var(--line); margin-top: 40px; }
.hero-metrics .case-footnote { max-width: 920px; }
.metric-strip strong { display: block; font-size: clamp(36px, 3.8vw, 52px); line-height: 1.1; font-weight: 400; letter-spacing: -.04em; color: var(--case-accent); }
.metric-strip p { font-size: 14px; line-height: 1.65; color: var(--body); margin-top: 12px; max-width: 34ch; }
.metric-strip small { font-size: 12px; color: var(--muted); display: block; margin-top: 8px; }
.secondary-metrics { display: flex; flex-wrap: wrap; gap: 24px 48px; border-top: 1px solid var(--line); padding-top: 25px; margin-top: 30px; }
.secondary-metrics p { font-size: 12px; color: var(--muted); }
.secondary-metrics strong { color: var(--case-accent); font-size: 20px; font-weight: 500; margin-right: 7px; }
.sequence { scroll-margin-top: 140px; }
.sequence-bar { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-bottom: 23px; }
.sequence-bar .case-kicker { color: var(--muted); }
.sequence-controls { display: flex; align-items: center; gap: 12px; }
.sequence-controls button { border: 1px solid var(--case-outline); background: transparent; color: var(--ink); min-width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; }
.sequence-controls button:hover { background: var(--case-panel); border-color: var(--case-accent); }
.sequence-controls button:disabled { opacity: .35; cursor: default; }
.sequence-counter { font-size: 11px; letter-spacing: 1px; min-width: 55px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.sequence-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--case-gutter); align-items: start; }
.sequence-step + .sequence-step { margin-top: 45px; padding-top: 35px; border-top: 1px solid var(--line); }
.sequence.is-enhanced .sequence-step { margin-top: 0; padding-top: 0; border: 0; }
.sequence-visual { position: relative; min-height: 625px; display: flex; align-items: center; justify-content: center; gap: 32px; border-radius: 14px; isolation: isolate; background: radial-gradient(ellipse at 50% 10%, color-mix(in srgb, var(--case-accent) 10%, transparent), transparent 75%), var(--paper-light); padding: 40px; overflow: hidden; }
.sequence--evolution .sequence-visual { background: #e1e4da; --wash: #92a687; }
.sequence-visual .device { --device-width: 244px; z-index: 1; }
.sequence-visual .device-screen { max-height: 510px; }
.sequence-visual .device--detail { --device-width: 272px; }
.sequence-visual .device--detail .device-screen { max-height: none; }
.sequence-visual .device--tablet { --device-width: 100%; }
.sequence-visual .device--tablet .device-screen { max-height: none; }
.sequence-visual .art-wash { opacity: .22; }
.sequence-copy { padding-right: 0; min-width: 0; }
.sequence-copy > .step-eyebrow { font-size: 11px; letter-spacing: 1px; color: var(--case-accent); text-transform: uppercase; margin-bottom: 20px; }
.sequence-copy h3 { font-size: 23px; line-height: 1.4; letter-spacing: -.02em; }
.sequence-copy > p:not(.step-eyebrow):not(.case-footnote) { font-size: 17px; color: var(--body); line-height: 1.75; margin-top: 24px; max-width: 60ch; }
.sequence-copy .decision-label { display: block; color: var(--ink); margin-top: 32px; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; }
.sequence-copy ul { padding-left: 18px; margin-top: 16px; color: var(--body); font-size: 16px; line-height: 1.75; }
.sequence-copy li + li { margin-top: 9px; }
.sequence-copy .screen-link { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; border-bottom: 1px solid #ffffff40; margin-top: 20px; }
.sequence-copy .screen-link:hover { color: var(--case-accent); }
.sequence-step-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 24px 0; }
.sequence-step-nav button { position: relative; background: transparent; border: 0; border-bottom: 1px solid transparent; color: var(--muted); padding: 8px 0; min-height: 44px; text-align: left; font-family: var(--sans); font-size: 13px; line-height: 1.5; }
.sequence-step-nav button span { display: inline; font-size: 11px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.sequence-step-nav button[aria-selected="true"] { border-bottom-color: var(--case-accent); color: var(--case-accent); }
.sequence-step-nav button:hover { color: var(--ink); }
.sequence-note { margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.sequence-bar [hidden], .sequence-step-nav[hidden] { display: none; }
html[data-motion="on"] .sequence.is-enhanced .sequence-step:not([hidden]) { animation: sequence-enter .3s ease-out both; }
@keyframes sequence-enter { from { opacity: .6; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.device-annotation { position: absolute; bottom: 25px; left: 22px; right: 22px; font-size: 11px; line-height: 1.6; text-align: center; color: var(--muted); }
.sequence--evolution .device-annotation { color: #4a5949; }
.case-media .evidence { margin: 0; padding: 24px; background: #e9edf0; border-radius: 12px; }
.evidence img { width: 100%; height: auto; border-radius: 4px; }
.evidence figcaption { font-size: 13px; color: #445044; padding-top: 20px; line-height: 1.7; }
.evidence figcaption a { text-decoration: underline; text-underline-offset: 3px; }
.service-details { margin-top: 48px; border-top: 1px solid var(--line); }
.service-details details { border-bottom: 1px solid var(--line); }
.service-details summary { min-height: 80px; display: flex; align-items: center; gap: 32px; padding-block: 24px; font-size: 21px; letter-spacing: -.4px; color: var(--ink); }
.service-details summary::after { content: "+"; color: var(--muted); margin-left: auto; font-size: 23px; font-weight: 300; }
.service-details details[open] summary::after { content: "\2212"; }
.service-details summary > span { font-size: 10px; letter-spacing: 1px; color: var(--case-accent); min-width: 24px; }
.service-details .detail-copy { padding: 0 0 32px 56px; max-width: 72ch; color: var(--body); font-size: 17px; line-height: 1.75; }
.service-details .detail-copy p + p { margin-top: 15px; }
.quiet-link { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; color: var(--case-accent); text-decoration: underline; text-underline-offset: 5px; }
.case-media .context-photo { width: 100%; height: auto; border-radius: 12px; }
.case-media figcaption { color: var(--muted); font-size: 13px; margin-top: 16px; line-height: 1.7; }
.case-media .evidence figcaption { color: #435163; }
.demo-device { position: relative; background: linear-gradient(150deg, #202537, #121927); padding: 25px 20px; min-height: 476px; display: flex; flex-direction: column; gap: 23px; }
.demo-device-header { display: flex; align-items: center; justify-content: space-between; color: #a8b2cd; font-size: 9px; letter-spacing: 1px; }
.demo-message { background: #ffffff10; color: #ebe8fa; border-radius: 16px 16px 2px 16px; padding: 16px; font-size: 13px; line-height: 1.6; align-self: flex-end; max-width: 96%; }
.demo-answer { color: #ece9fa; font-family: var(--sans); font-size: 19px; line-height: 1.6; font-weight: 400; letter-spacing: -.5px; }
.demo-action { border: 1px solid #c8c0ed44; border-radius: 25px; min-height: 44px; padding: 10px 17px; color: #eee9ff; background: #ffffff09; font-size: 11px; }
.demo-action:hover { background: #ffffff16; }
.demo-action:disabled { opacity: .5; }
.demo-status { margin-top: auto; font-size: 10px; line-height: 1.7; color: #b5bed8; }
.demo-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 25px; }
.demo-controls button { background: transparent; border: 1px solid #ffffff30; border-radius: 24px; min-height: 44px; padding: 11px 20px; color: var(--ink); font-size: 12px; }
.demo-controls button[aria-pressed="true"] { background: var(--case-accent); border-color: var(--case-accent); color: #1b2025; }
.mini-wave { height: 25px; display: flex; gap: 4px; align-items: center; margin-bottom: 12px; }
.mini-wave i { display: block; width: 3px; height: 14px; border-radius: 2px; background: #c1c6f0; animation: voice-breathe 1.4s ease-in-out infinite alternate; }
.mini-wave i:nth-child(2n) { height: 23px; animation-delay: -.6s; }
@keyframes voice-breathe { from { transform: scaleY(.5); } to { transform: scaleY(1.05); } }
.voice-mark { font-family: var(--serif); font-size: 95px; line-height: 1; color: #c8c5e0; opacity: .6; margin-bottom: 33px; font-style: italic; }
.input-mode-label { position: absolute; top: 24px; left: 25px; font-size: 10px; letter-spacing: 1px; color: var(--case-accent); z-index: 1; }
.case-next { padding-block: 96px; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; margin-top: 40px; }
.related-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; align-content: start; min-width: 0; border-top: 1px solid var(--line); padding: 32px 0; }
.related-card > :not(.related-art) { grid-column: 2; min-width: 0; }
.related-art { position: relative; display: block; grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 100%; aspect-ratio: 3 / 2; margin: 0; overflow: hidden; border-radius: 8px; background: #151b26; }
.related-art > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.related-art--contain > img { object-fit: contain; }
.related-art--inset > img { inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.related-art--mascot { background: radial-gradient(ellipse at 30% 30%, #4f3b7638, transparent 65%), #16171f; }
.related-art--mascot > img { inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.related-art--metabolic { background: linear-gradient(#aedfdf, #75c8c5); }
.related-art--care { background: #28332d; }
.related-art--bixby { background: #282936; }
.related-art--gaming { background: #2b3026; }
.related-art--screens > img { inset: 10% auto auto 16%; width: auto; height: 80%; max-width: 38%; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 20px #0004; }
.related-art--screens > img + img { left: auto; right: 16%; }
.related-art--single > img { left: 50%; transform: translateX(-50%); }
.related-card small { font-size: 10px; letter-spacing: .7px; line-height: 1.5; color: var(--muted); }
.related-card h3 { margin-top: 8px; font-size: 24px; line-height: 1.3; letter-spacing: -.03em; }
.related-card p { color: var(--body); font-size: 14px; margin-top: 8px; line-height: 1.6; max-width: 50ch; }
.related-card:hover h3 { color: var(--case-accent); }
.case-footer { border-top: 1px solid var(--line); padding-block: 17px; }
.case-footer .container { display: flex; align-items: center; justify-content: space-between; gap: 25px; font-size: 11px; color: var(--muted); }
.case-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.image-dialog { width: min(1240px, calc(100% - 28px)); height: min(92svh, 1100px); max-width: none; max-height: 92svh; border: 1px solid #62705a; padding: 0; border-radius: 12px; background: #111713; color: var(--ink); overflow: hidden; }
.image-dialog::backdrop { background: #080e0bef; }
.image-dialog-inner { display: flex; flex-direction: column; height: 100%; }
.image-dialog-header, .image-dialog-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 23px; flex-shrink: 0; }
.image-dialog-header h2 { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.image-dialog-header .icon-button { border: 0; }
.image-viewport { background: #1f2720; flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; overscroll-behavior: contain; }
.image-viewport img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; padding: 15px; }
.image-viewport.is-zoomed { display: block; }
.image-viewport.is-zoomed img { width: auto; height: auto; max-width: none; max-height: none; margin: auto; }
.image-dialog-footer { border-top: 1px solid var(--line); font-size: 10px; }
.image-dialog-footer button, .image-dialog-footer a { min-height: 44px; display: inline-flex; align-items: center; background: transparent; border: 0; color: inherit; padding: 0 8px; font-size: 10px; }
.image-dialog-footer a { text-decoration: underline; text-underline-offset: 3px; }
.image-dialog-footer button:hover { color: var(--case-accent); }
.image-controls { display: flex; align-items: center; gap: 15px; }
.case-page .notice { margin-top: 20px; }
@media (max-width: 1050px) {
  .related-card { grid-template-columns: 80px minmax(0, 1fr); column-gap: 16px; }
  .case-page { --case-gutter: 48px; }
  .case-facts { gap: 24px; }
  .case-title-row > .case-facts, .case-overview-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-hero-art .device { --device-width: 190px; }
  .case-hero-art { min-height: 505px; }
  .gaming-device-composition { width: 90%; min-height: 390px; }
  .case-hero-art .gaming-device-composition .device--tablet { --device-width: 560px; }
  .case-hero-art .gaming-device-composition .gaming-hero-phone { --device-width: 165px; }
  .sequence-visual { min-height: 580px; padding: 28px; }
  .sequence-visual .device { --device-width: 220px; }
  .sequence-visual .device--detail { --device-width: 245px; }
  .sequence-copy { padding-right: 0; }
}
@media (max-width: 760px) {
  .case-page .container { width: calc(100% - 48px); }
  .case-page .header-inner { min-height: 72px; }
  .case-page .identity { font-size: 19px; }
  .case-hero { padding-block: 24px 48px; }
  .case-topline { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 28px; }
  .case-topline .case-kicker { padding-left: 0; border-left: 0; text-align: left; }
  .case-kicker { font-size: 10px; letter-spacing: 1.1px; }
  .case-title-row { grid-template-columns: 1fr; gap: 32px; }
  .case-heading .case-deck { font-size: 17px; }
  .case-hero-art { margin-top: 36px; padding: 36px 12px; min-height: 350px; border-radius: 12px; }
  .case-hero-art .device { --device-width: 26vw; max-width: 190px; }
  .case-hero-art .device:nth-child(2) { margin-top: 43px; }
  .case-hero-art .device:nth-child(3) { display: block; }
  .bixby-hero-layout { gap: 35px; align-items: center; padding-top: 20px; }
  .case-hero-art .bixby-hero-layout .device { --device-width: 220px; max-width: 70%; }
  .bixby-hero-art { min-height: 410px; }
  .gaming-device-composition { width: 94%; margin-top: 35px; min-height: 290px; }
  .case-hero-art .gaming-device-composition .device--tablet { --device-width: 85%; max-width: none; }
  .case-hero-art .gaming-device-composition .gaming-hero-phone { --device-width: 34%; max-width: 180px; top: 58px; }
  .gaming-hero-art { min-height: 410px; }
  .case-facts { gap: 24px; padding-top: 24px; }
  .case-facts dt { font-size: 10px; }
  .case-facts dd { margin-top: 10px; font-size: 14px; }
  .case-overview { padding-inline: 20px; border-radius: 12px; }
  .case-overview > summary { min-height: 64px; }
  .case-overview-facts { grid-template-columns: 1fr; gap: 28px; margin: 4px 0 32px; }
  .case-overview-facts dt { font-size: 10px; }
  .case-overview-facts dd { font-size: 16px; }
  .case-index-inner { min-height: 60px; gap: 20px; }
  .case-index nav { gap: 2px; flex-wrap: nowrap; }
  .case-index a { padding-inline: 10px; font-size: 12px; min-height: 44px; }
  .case-index .motion-toggle { font-size: 10px; width: 54px; min-height: 44px; padding: 0; flex-direction: column; gap: 2px; line-height: 1.5; }
  .case-section { padding-block: 48px; }
  .case-section > * + * { margin-top: 32px; }
  .case-series > * + * { margin-top: 48px; }
  .case-row { grid-template-columns: 1fr; gap: 28px; }
  .case-row--chapter > .chapter-heading { position: static; }
  .case-reading { width: 100%; }
  .case-image-pair { grid-template-columns: 1fr; gap: 32px; }
  .chapter-heading > .case-kicker { margin-bottom: 16px; }
  .case-copy, .story-copy { font-size: 17px; }
  .case-copy h3, .sequence-copy h3 { font-size: 22px; }
  .story-note { font-size: 21px; }
  .project-facts strong { font-size: 18px; }
  .project-facts span { font-size: 15px; }
  .project-facts small { font-size: 12px; }
  .metric-strip { grid-template-columns: 1fr; gap: 30px; }
  .metric-strip > div { display: grid; grid-template-columns: 120px 1fr; gap: 8px 20px; border-bottom: 1px solid var(--line); padding-bottom: 25px; }
  .metric-strip strong { grid-row: span 2; font-size: 45px; letter-spacing: -1.8px; }
  .metric-strip p { margin-top: 3px; font-size: 14px; }
  .metric-strip small { margin: 0; }
  .secondary-metrics { gap: 18px 25px; border: 0; margin-top: 0; }
  .secondary-metrics strong { font-size: 18px; }
  .sequence-bar { gap: 12px; padding-bottom: 19px; }
  .sequence-controls { gap: 4px; }
  .sequence-controls button { min-width: 44px; height: 44px; }
  .sequence-counter { min-width: 45px; font-size: 10px; }
  .sequence-step { grid-template-columns: 1fr; gap: 32px; }
  .sequence-visual { min-height: 530px; padding: 25px 20px 47px; border-radius: 12px; }
  .sequence-visual .device { --device-width: 218px; }
  .sequence-visual .device--detail { --device-width: 260px; }
  .sequence-visual .device--tablet { --device-width: 100%; }
  .sequence-visual:has(.device--tablet) { min-height: 300px; }
  .sequence-copy { padding-right: 0; }
  .sequence-copy > .step-eyebrow { font-size: 10px; margin-bottom: 16px; }
  .sequence-copy > p:not(.step-eyebrow):not(.case-footnote) { font-size: 17px; margin-top: 20px; }
  .sequence-copy .decision-label { margin-top: 28px; font-size: 11px; }
  .sequence-copy ul { font-size: 16px; }
  .sequence-step-nav { gap: 8px 20px; margin: 20px 0; }
  .sequence-step-nav button { font-size: 12px; }
  .sequence-step-nav button span { font-size: 10px; }
  .case-media .evidence { padding: 16px; }
  .service-details summary { font-size: 18px; gap: 19px; }
  .service-details .detail-copy { padding-left: 0; padding-right: 8px; font-size: 17px; }
  .demo-device { min-height: 440px; padding: 23px 17px; gap: 20px; }
  .demo-controls button { padding: 10px 16px; }
  .demo-answer { font-size: 18px; }
  .related-grid { grid-template-columns: 1fr; gap: 18px; }
  .case-next { padding-block: 64px; }
  .related-card h3 { font-size: 22px; }
  .case-footer .container { flex-wrap: wrap; gap: 3px 16px; font-size: 10px; }
  .image-dialog-header, .image-dialog-footer { padding: 10px 13px; gap: 8px; }
  .image-dialog-header h2 { font-size: 11px; }
  .image-dialog-footer { flex-wrap: wrap; justify-content: center; }
  .image-controls { gap: 8px; }
  .image-dialog-footer a, .image-dialog-footer button { font-size: 9px; }
}
@media (max-width: 390px) {
  .related-card { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; }
  .related-card h3 { font-size: 20px; }
  .case-page .container { width: calc(100% - 32px); }
  .case-hero-art { min-height: 320px; }
  .bixby-hero-layout { gap: 24px; }
  .case-index nav { gap: 2px; }
  .sequence-visual .device--detail { --device-width: 240px; }
  .sequence-visual { min-height: 505px; padding-inline: 16px; }
  .sequence-step-nav { gap: 6px; }
  .sequence-step-nav button { font-size: 11px; }
  .metric-strip > div { grid-template-columns: 110px 1fr; }
  .metric-strip strong { font-size: 40px; }
}
.sequence--evolution { --evolution-stage-height: 560px; }
.sequence--evolution .sequence-step { display: block; }
.sequence--evolution .sequence-bar { padding-bottom: 16px; }
.sequence--evolution .sequence-bar .case-kicker { font-size: 11px; letter-spacing: 1.4px; line-height: 1.6; margin: 0; }
.sequence--evolution .sequence-visual { height: var(--evolution-stage-height); min-height: 0; padding: 24px; background: var(--case-panel); }
.sequence--evolution .device { --device-width: min(280px, calc((var(--evolution-stage-height) - 48px) * .45)); }
.sequence--evolution .device-screen { max-height: none; overflow: hidden; overscroll-behavior: auto; }
.sequence--evolution .sequence-step-nav { display: flex; justify-content: center; gap: 8px; margin: 16px 0 0; }
.sequence--evolution .sequence-step-nav button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 50%; text-align: center; }
.sequence--evolution .sequence-step-nav button span { margin: 0; font-size: 11px; letter-spacing: 0; }
.sequence--evolution .sequence-step-nav button[aria-selected="true"] { border-color: var(--case-accent); background: var(--case-panel); }
.sequence--evolution.is-scroll-driven { position: relative; }
.is-scroll-driven .evolution-pin { position: sticky; top: var(--case-sticky-top); display: flex; flex-direction: column; }
.is-scroll-driven .sequence-track { flex: 1; min-height: 0; display: grid; align-items: center; }
.is-scroll-driven .sequence-step { min-width: 0; }
[data-fit-evolution] .evolution-pin { display: flex; flex-direction: column; }
[data-fit-evolution] .sequence-track { position: relative; flex: 0 0 auto; min-height: var(--fit-step-height, 0px); }
[data-fit-evolution].is-measuring-evolution [data-step][hidden] { display: var(--fit-step-display, block) !important; position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; }
.sequence-visual.peek-stage { height: min(490px, calc((100vw - 84px) * 1.4)); min-height: 0; align-items: flex-start; padding: 40px 24px 0; }
.sequence-visual.peek-stage .device { --device-width: 340px; }
.sequence-visual.peek-stage .device-screen { max-height: none; overflow: hidden; overscroll-behavior: auto; }
.sequence-visual.peek-stage--top { align-items: flex-end; padding-block: 0 40px; }
.sequence-visual.peek-stage--tablet { height: 360px; padding: 38px 28px 0; }
.sequence-visual.peek-stage--tablet .device { --device-width: 100%; }
.sequence--evolution .peek-stage { height: min(var(--evolution-stage-height), 540px, calc((100vw - 84px) * 1.4)); }
.sequence--evolution .peek-stage .device { --device-width: min(390px, calc(var(--evolution-stage-height) * .78)); }
html[data-motion="on"] .sequence--evolution.is-enhanced .sequence-step:not([hidden]) { animation: evolution-enter .2s ease-out both; }
@keyframes evolution-enter { from { opacity: .7; } to { opacity: 1; } }
@media (max-width: 760px) {
  .sequence-visual.peek-stage--tablet { height: 260px; padding-inline: 24px; }
  .sequence--evolution .sequence-visual { padding-inline: 16px; }
  .sequence--evolution .sequence-bar .case-kicker { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-page .motion, .sequence.is-enhanced .sequence-step:not([hidden]) { animation: none !important; }
}
@media (forced-colors: active) {
  .case-page { --case-outline: CanvasText; --case-panel: Canvas; --case-sky: CanvasText; --case-mint: CanvasText; --case-peach: CanvasText; }
  .art-wash { display: none; }
  .device-frame, .sequence-step-nav button, .sequence-controls button { border-color: CanvasText; }
  .sequence-step-nav button[aria-selected="true"] { border-top-color: Highlight; }
  .case-overview { border-color: CanvasText; }
  .case-overview-toggle::before { border-color: ButtonText; }
  .case-index a[aria-current="location"] { outline: 1px solid Highlight; outline-offset: -4px; }
}
@media print {
  .case-page { --paper: #fff; --ink: #111; --body: #333; --muted: #555; --case-accent: #344934; --case-panel: white; --case-outline: #aaa; --case-sky: #2c5b74; --case-mint: #34594d; --case-peach: #6b4936; --line: #bbb; }
  .case-index, .case-back, .sequence-controls, .sequence-step-nav, .image-dialog, .demo-controls, .demo-action { display: none !important; }
  .case-page h1 { font-size: 40pt; }
  .case-overview { break-inside: avoid; margin-block: 18px; padding: 0; border: 0; background: transparent; }
  .case-overview::details-content { content-visibility: visible; height: auto; }
  .case-overview > summary { border: 0; margin: 0; min-height: 0; }
  .case-overview > summary > span:first-child { padding: 0; }
  .case-overview-toggle { display: none; }
  .case-overview-facts { display: block !important; margin-top: 14px; }
  .case-overview-facts > div { display: grid; grid-template-columns: 1fr 3fr; gap: 20px; padding-block: 9px; }
  .case-overview-facts dd { margin: 0; }
  .case-title-row, .case-row, .sequence-step { display: block; }
  .case-row--chapter > .chapter-heading { position: static; }
  .case-reading { width: 100%; }
  .case-row > * + * { margin-top: 24px; }
  .case-hero-art { display: block; min-height: 0; }
  .case-section { padding-block: 25px; }
  .sequence-step[hidden] { display: block !important; margin-top: 25px; }
  .sequence-copy { margin-top: 20px; }
  .device { --device-width: 180px; margin: auto; }
  .sequence-visual { min-height: 0; padding: 20px; }
  .sequence--evolution.is-scroll-driven, .is-scroll-driven .evolution-pin { height: auto !important; }
  .is-scroll-driven .evolution-pin { position: static; display: block; }
  .is-scroll-driven .sequence-track { display: block; }
  .sequence--evolution .sequence-visual, .sequence-visual.peek-stage { height: auto; min-height: 0; padding: 20px; overflow: visible; }
  .sequence-visual.peek-stage .device-frame { min-height: 0; padding-block: 18px; }
  .sequence-step, .project-facts, .metric-strip > div { break-inside: avoid; }
}