.case-full-page { background: var(--graphite-black); color: var(--text-primary); }
.case-full-hero, .case-full-cta { position: relative; overflow: hidden; background: var(--graphite-black); }
.case-full-hero::before, .case-full-cta::before { position: absolute; inset: 0; content: ''; pointer-events: none; background: radial-gradient(880px 520px at 84% 26%, rgba(255,138,0,.13), transparent 60%), radial-gradient(680px 520px at 6% 88%, rgba(52,209,122,.06), transparent 60%); }
.case-full-hero::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: url('/assets/optimized/pattern-dots.webp') 0 0 / 520px; opacity: .03; mix-blend-mode: screen; }
.case-full-hero__inner, .case-full-cta > .wrap { position: relative; z-index: 1; padding-top: 148px; padding-bottom: 84px; }
.case-full-back { display: inline-flex; margin-bottom: 26px; color: var(--text-secondary); font-size: 13px; text-decoration: none; }
.case-full-back:hover { color: var(--signal-orange); }
.case-full-hero__grid, .case-full-cta__grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: center; }
.case-full-label { margin: 0 0 20px; color: var(--signal-orange); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.case-full-label--pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid var(--border-subtle); border-radius: 999px; background: rgba(255,138,0,.05); color: var(--text-secondary); }
.case-full-label--pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-orange); }
.case-full-title { max-width: 720px; margin: 0; font-family: var(--font-display); font-size: clamp(42px, 5.6vw, 70px); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; }
.case-full-title span, .case-full-cta h2 span { color: var(--signal-orange); }
.case-full-heading h2 span { color: var(--text-muted); }
.case-full-lead { max-width: 560px; margin: 26px 0 0; color: var(--text-secondary); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55; }
.case-full-tags, .case-full-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.case-full-tags { margin-top: 24px; }
.case-full-tags span, .case-full-stack-grid span, .case-full-confirm-metrics span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-card); color: var(--text-secondary); font-size: 13px; }
.case-full-actions { gap: 14px; margin-top: 36px; }
.case-full-button { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 12px; background: var(--gradient-accent); color: var(--graphite-black); font-size: 16px; font-weight: 600; text-decoration: none; }
.case-full-button--ghost { border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); }
.case-full-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.case-full-hero__visual { position: relative; display: flex; justify-content: center; }
.case-full-hero__visual > span { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255,138,0,.2), transparent 62%); filter: blur(10px); }
.case-full-hero__visual img { position: relative; width: 100%; max-width: 520px; height: auto; animation: case-full-float 7s ease-in-out infinite; }
.case-full-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.case-full-metrics article { padding: 24px 26px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface-card); }
.case-full-metrics strong { display: block; color: var(--signal-green); font-family: var(--font-display); font-size: clamp(40px, 5vw, 56px); line-height: 1; }
.case-full-metrics b { display: block; margin-top: 14px; font-size: 16px; }
.case-full-metrics small { display: block; margin-top: 6px; color: var(--text-secondary); font-size: 14px; }
.case-full-overview { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: rgba(26,29,34,.5); }
.case-full-overview > .wrap { padding-top: 40px; padding-bottom: 40px; }
.case-full-section-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; color: var(--text-secondary); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.case-full-section-bar i { flex: 1; height: 1px; background: var(--border-subtle); }
.case-full-section-bar small { color: var(--text-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.case-full-overview__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.case-full-overview__grid article { min-width: 0; padding: 0 28px; border-left: 1px solid var(--border-subtle); }
.case-full-meta-label { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: var(--signal-orange); }
.case-full-meta-label span { color: var(--text-muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.case-full-overview h2 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.3; }
.case-full-overview p { margin: 8px 0 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.45; }
.case-full-section { padding: 104px 0; border-top: 1px solid var(--border-subtle); }
.case-full-section--muted { background: rgba(26,29,34,.45); }
.case-full-heading { max-width: 760px; margin-bottom: 48px; }
.case-full-heading h2 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.case-full-heading > p:not(.case-full-label) { margin: 24px 0 0; color: var(--text-secondary); font-size: 17px; line-height: 1.6; }
.case-full-chain { margin-bottom: 36px; padding: 30px; border: 1px solid var(--border-subtle); border-radius: 20px; background: var(--surface-card); }
.case-full-chain > p { margin: 0 0 22px; color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.case-full-chain > div { display: flex; align-items: stretch; }
.case-full-chain article { display: flex; flex: 1; flex-direction: column; justify-content: center; min-height: 96px; padding: 18px; border: 1px solid var(--border-subtle); border-radius: 14px; background: rgba(26,29,34,.6); }
.case-full-chain article:last-of-type { border-color: var(--border-accent); background: rgba(255,138,0,.05); }
.case-full-chain small { color: var(--text-muted); font-size: 11px; font-weight: 600; }
.case-full-chain article span { margin-top: 6px; color: var(--text-secondary); font-size: 14px; line-height: 1.4; }
.case-full-chain article:last-of-type span { color: var(--signal-orange); }
.case-full-chain > div > b { display: flex; align-items: center; padding: 0 6px; color: var(--text-muted); }
.case-full-grid-3, .case-full-arch-grid, .case-full-result-grid, .case-full-stack-grid { display: grid; gap: 18px; }
.case-full-grid-3 { grid-template-columns: repeat(3, 1fr); }
.case-full-problem-card, .case-full-process-grid article, .case-full-arch-grid article, .case-full-result-grid article, .case-full-stack-grid article { border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface-card); }
.case-full-problem-card { padding: 26px; background: linear-gradient(180deg, rgba(240,71,62,.05), var(--surface-card)); }
.case-full-problem-card header, .case-full-process-grid header, .case-full-arch-grid header, .case-full-result-grid header, .case-full-stack-grid header { display: flex; align-items: center; gap: 11px; }
.case-full-problem-card header { margin-bottom: 18px; color: var(--signal-red); }
.case-full-problem-card h3, .case-full-process-grid h3, .case-full-arch-grid h3, .case-full-result-grid h3, .case-full-stack-grid h3 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.25; }
.case-full-problem-card p { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 12px; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.case-full-problem-card p:last-child { margin-bottom: 0; }
.case-full-problem-card p i { flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--signal-red); }
.case-full-section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.case-full-section-top .case-full-heading { max-width: 680px; margin: 0; }
.case-full-section-top > p { max-width: 420px; margin: 0; color: var(--text-secondary); font-size: 16px; line-height: 1.6; }
.case-full-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.case-full-process-grid article { min-height: 168px; padding: 22px 20px; }
.case-full-process-grid header { justify-content: space-between; margin-bottom: 16px; color: var(--signal-orange); }
.case-full-process-grid header b { color: var(--text-muted); font-family: var(--font-display); font-size: 15px; }
.case-full-process-grid h3 { margin-bottom: 8px; font-size: 16px; }
.case-full-process-grid p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.case-full-artifact { display: grid; grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr); align-items: stretch; gap: 0; }
.case-full-artifact > article { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface-card); }
.case-full-artifact > b { display: flex; align-items: center; justify-content: center; font-size: 24px; }
.case-full-artifact > b svg { display: block; width: 24px; height: 24px; }
.case-full-artifact__arrow--accent { color: var(--signal-orange); }
.case-full-artifact__arrow--success { color: var(--signal-green); }
.case-full-artifact > .is-accent { border-color: var(--border-accent); background: linear-gradient(180deg, rgba(255,138,0,.05), var(--surface-card)); }
.case-full-artifact > .is-success { border-color: var(--status-success-border); background: linear-gradient(180deg, rgba(52,209,122,.07), var(--surface-card)); }
.case-full-artifact header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--signal-orange); }
.case-full-artifact > .is-input header { color: var(--steel-blue); }
.case-full-artifact > .is-accent header { color: var(--signal-orange); }
.case-full-artifact > .is-success header { color: var(--signal-green); }
.case-full-artifact header span { color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.case-full-artifact pre { flex: 1; margin: 0; color: var(--text-secondary); font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.case-full-artifact small { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 12.5px; }
.case-full-artifact-rows { display: grid; gap: 9px 14px; font-size: 13px; }
.case-full-artifact-rows div { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; }
.case-full-artifact-rows b { color: var(--text-primary); font-weight: 500; }
.case-full-artifact-rows span { color: var(--text-secondary); text-align: right; }
.case-full-artifact-rows strong { color: var(--signal-green); text-align: right; }
.case-full-kp { display: grid; gap: 13px; }
.case-full-kp div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.case-full-kp span { color: var(--text-secondary); font-size: 13.5px; }
.case-full-kp strong { color: var(--text-primary); font-family: var(--font-display); font-size: 15px; font-weight: 600; text-align: right; white-space: nowrap; }
.case-full-artifact > .is-success small.is-complete { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 0; color: var(--signal-green); font-size: 13px; font-weight: 600; }
.case-full-note { display: flex; align-items: center; gap: 9px; margin: 24px 0 0; color: var(--text-muted); font-size: 13px; }
.case-full-note i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--steel-blue); }
.case-full-architecture { position: relative; overflow: hidden; background: rgba(26,29,34,.45); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.case-full-architecture::before { position: absolute; inset: 0; content: ''; background: url('/assets/optimized/bg-tech-flow.webp') center / cover; opacity: .14; pointer-events: none; }
.case-full-architecture > .wrap { position: relative; z-index: 1; }
.case-full-architecture .case-full-heading { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.case-full-arch-grid { grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.case-full-arch-grid article { display: flex; flex-direction: column; min-height: 410px; padding: 26px 24px; }
.case-full-arch-grid header { justify-content: space-between; margin-bottom: 28px; color: var(--signal-orange); }
.case-full-arch-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-raised); color: var(--text-secondary); }
.case-full-arch-number { color: var(--text-muted); font-family: var(--font-display); font-weight: 700; }
.case-full-arch-grid .tone-blue .case-full-arch-icon { border-color: rgba(77,159,236,.4); background: rgba(77,159,236,.12); color: var(--steel-blue); }
.case-full-arch-grid .tone-orange .case-full-arch-icon { border-color: var(--border-accent); background: rgba(255,138,0,.1); color: var(--signal-orange); }
.case-full-arch-grid .tone-green .case-full-arch-icon { border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--signal-green); }
.case-full-arch-grid .tone-silver .case-full-arch-icon { background: var(--surface-raised); color: var(--text-secondary); }
.case-full-arch-grid h3 { margin-bottom: 18px; font-size: 18px; }
.case-full-arch-grid article > div { display: flex; flex-direction: column; gap: 14px; }
.case-full-stack-grid article > div { display: flex; flex-wrap: wrap; gap: 8px; }
.case-full-arch-grid article > div span { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 15px; line-height: 1.35; }
.case-full-arch-grid article > div span i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--text-secondary); }
.case-full-arch-grid .tone-blue article > div span i, .case-full-arch-grid .tone-blue > div span i { background: var(--steel-blue); }
.case-full-arch-grid .tone-orange > div span i { background: var(--signal-orange); }
.case-full-arch-grid .tone-green > div span i { background: var(--signal-green); }
.case-full-arch-grid .tone-blue { border-color: rgba(77,159,236,.4); }
.case-full-arch-grid .tone-orange { border-color: var(--border-accent); }
.case-full-arch-grid .tone-green { border-color: var(--status-success-border); }
.case-full-human { display: flex; gap: 16px; align-items: flex-start; margin-top: 24px; padding: 22px 26px; border: 1px solid var(--border-accent); border-radius: 16px; background: linear-gradient(180deg, rgba(255,138,0,.05), var(--surface-card)); }
.case-full-human__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-accent); border-radius: 11px; background: rgba(255,138,0,.1); color: var(--signal-orange); }
.case-full-human strong { display: block; margin: 0 0 6px; color: var(--text-primary); font-family: var(--font-display); font-size: 17px; }
.case-full-human p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.55; }
.case-full-before-after { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface-card); }
.case-full-before-after__head, .case-full-before-after__row { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; }
.case-full-before-after__head { padding: 14px 24px; border-bottom: 1px solid var(--border-subtle); background: rgba(26,29,34,.6); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.case-full-before-after__head span:first-child { color: var(--signal-red); }
.case-full-before-after__head span:last-child { color: var(--signal-green); }
.case-full-before-after__row { min-height: 86px; padding: 18px 24px; border-bottom: 1px solid var(--border-subtle); }
.case-full-before-after__row:last-child { border-bottom: 0; }
.case-full-before-after__before { color: var(--text-muted); font-size: 17px; line-height: 1.45; }
.case-full-before-after__after { color: var(--text-primary); font-size: 17px; font-weight: 600; line-height: 1.45; }
.case-full-before-after__arrow { display: flex; align-items: center; justify-content: center; color: var(--signal-orange); }
.case-full-before-after__arrow svg { display: block; width: 24px; height: 24px; }
.case-full-results { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--graphite-black), rgba(26,29,34,.55), var(--graphite-black)); }
.case-full-result-grid { grid-template-columns: repeat(3, 1fr); }
.case-full-result-grid article { padding: 30px 28px; }
.case-full-result-grid header { margin-bottom: 22px; color: var(--signal-green); }
.case-full-result-grid h3 { color: var(--text-primary); }
.case-full-result-grid p { display: flex; flex-direction: column; gap: 9px; margin: 0 0 20px; }
.case-full-result-grid p:last-child { margin-bottom: 0; }
.case-full-result-grid strong { color: var(--signal-green); font-family: var(--font-display); font-size: 34px; line-height: 1; }
.case-full-result-grid p span { color: var(--text-secondary); font-size: 14.5px; line-height: 1.45; }
.case-full-confirm-metrics { margin-top: 24px; padding: 24px 28px; border: 1px dashed var(--border-strong); border-radius: 16px; background: rgba(26,29,34,.4); }
.case-full-confirm-metrics p { margin: 0 0 16px; color: var(--text-muted); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.case-full-confirm-metrics > div { display: flex; flex-wrap: wrap; gap: 10px; }
.case-full-confirm-metrics span { padding: 9px 14px; }
.case-full-confirm-metrics i { width: 5px; height: 5px; border-radius: 50%; background: var(--steel-blue); }
.case-full-timeline { display: flex; flex-direction: column; }
.case-full-timeline > article { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--border-subtle); }
.case-full-timeline__marker { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--signal-orange); }
.case-full-timeline__marker > svg { width: 48px; height: 48px; padding: 13px; border: 1px solid var(--border-accent); border-radius: 50%; background: rgba(255,138,0,.08); }
.case-full-timeline__marker i { flex: 1; width: 1px; background: var(--border-subtle); }
.case-full-timeline header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.case-full-timeline header b { color: var(--text-muted); font-family: var(--font-display); }
.case-full-timeline header h3 { margin: 0; font-family: var(--font-display); font-size: 20px; }
.case-full-timeline header span { padding: 4px 11px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-card); color: var(--text-secondary); font-size: 12px; }
.case-full-timeline p { max-width: 760px; margin: 0 0 8px; color: var(--text-secondary); font-size: 15px; line-height: 1.55; }
.case-full-timeline small { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13.5px; }
.case-full-timeline__check { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; color: var(--signal-green); }
.case-full-timeline__check svg { display: block; width: 15px; height: 15px; }
.case-full-stack-grid { grid-template-columns: repeat(4, 1fr); }
.case-full-stack-grid article { padding: 24px; }
.case-full-stack-grid header { margin-bottom: 18px; color: var(--signal-orange); }
.case-full-stack-grid h3 { color: var(--text-primary); font-size: 16px; }
.case-full-stack-grid span { padding: 8px 13px; background: rgba(26,29,34,.5); font-size: 13.5px; }
.case-full-security { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 20px 26px; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--surface-card); color: var(--steel-blue); }
.case-full-security__icon { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-subtle); border-radius: 11px; background: rgba(157, 190, 211, .08); color: var(--steel-blue); }
.case-full-security__icon svg { display: block; width: 20px; height: 20px; }
.case-full-security p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.55; }
.case-full-security strong { color: var(--text-primary); }
.case-full-confirm { padding: 128px 0; border-top: 1px solid var(--border-subtle); }
.case-full-confirm .wrap-narrow { width: calc(100% - 40px); max-width: 1110px; margin: 0 auto; }
.case-full-confirm .wrap-narrow > div { padding: 54px; border: 1px solid var(--border-accent); border-radius: 28px; background: linear-gradient(180deg, rgba(26,29,34,.9), rgba(15,17,22,.9)); box-shadow: var(--glow-accent-soft); }
.case-full-confirm h2 { max-width: 760px; margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.8vw, 30px); line-height: 1.3; }
.case-full-confirm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.case-full-confirm-grid p { display: flex; gap: 12px; align-items: center; min-height: 96px; margin: 0; padding: 18px 22px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-card); color: var(--signal-green); }
.case-full-confirm-grid span { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.case-full-confirm small { display: flex; align-items: center; gap: 9px; margin-top: 24px; color: var(--text-muted); font-size: 13.5px; }
.case-full-cta { border-top: 1px solid var(--border-subtle); }
.case-full-cta::after { position: absolute; inset: 0; content: ''; background: url('/assets/optimized/bg-tech-flow.webp') center / cover; opacity: .12; pointer-events: none; }
.case-full-cta__grid { align-items: start; }
.case-full-cta h2 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px); line-height: 1.08; }
.case-full-cta > .wrap { padding-top: 104px; padding-bottom: 104px; }
.case-full-cta__grid > div:first-child > p:not(.case-full-label) { max-width: 520px; margin: 24px 0 32px; color: var(--text-secondary); font-size: 18px; line-height: 1.55; }
.case-full-cta-steps { display: flex; flex-direction: column; gap: 12px; }
.case-full-cta-steps p { display: flex; gap: 16px; align-items: center; margin: 0; padding: 20px 22px; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--surface-card); }
.case-full-cta-steps b { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-accent); border-radius: 50%; background: rgba(255,138,0,.1); color: var(--signal-orange); font-family: var(--font-display); }
.case-full-cta-steps span { color: var(--text-primary); font-size: 15.5px; font-weight: 500; line-height: 1.4; }
@keyframes case-full-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (max-width: 1024px) { .case-full-hero__grid, .case-full-cta__grid { grid-template-columns: 1fr; gap: 42px; } .case-full-overview__grid, .case-full-arch-grid, .case-full-stack-grid { grid-template-columns: repeat(2, 1fr); } .case-full-grid-3, .case-full-result-grid { grid-template-columns: 1fr; } .case-full-process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .case-full-section, .case-full-confirm { padding: 76px 0; } .case-full-hero__inner, .case-full-cta > .wrap { padding-top: 132px; padding-bottom: 64px; } .case-full-overview__grid, .case-full-arch-grid, .case-full-stack-grid, .case-full-process-grid, .case-full-confirm-grid { grid-template-columns: 1fr; } .case-full-before-after__head, .case-full-before-after__row { grid-template-columns: 1fr; gap: 8px; } .case-full-before-after__row { min-height: 0; } .case-full-before-after__arrow { justify-content: flex-start; } .case-full-overview__grid article { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--border-subtle); } .case-full-overview__grid article:last-child { border-bottom: 0; } .case-full-section-top { display: block; } .case-full-section-top > p { margin-top: 24px; } .case-full-artifact { grid-template-columns: 1fr; gap: 12px; } .case-full-artifact > b { min-height: 32px; transform: rotate(90deg); } .case-full-chain > div { flex-direction: column; gap: 8px; } .case-full-chain > div > b { justify-content: center; transform: rotate(90deg); min-height: 24px; } .case-full-confirm .wrap-narrow > div { padding: 28px 22px; } .case-full-timeline > article { grid-template-columns: 48px 1fr; gap: 16px; } .case-full-human { display: block; } .case-full-human p { margin-top: 12px; } }
@media (max-width: 560px) { .case-full-title { font-size: clamp(36px, 11vw, 52px); } .case-full-metrics { grid-template-columns: 1fr; } .case-full-tags span { font-size: 12px; } .case-full-actions { flex-direction: column; align-items: stretch; } .case-full-button { justify-content: center; } .case-full-chain, .case-full-problem-card, .case-full-process-grid article, .case-full-artifact > article, .case-full-arch-grid article, .case-full-result-grid article, .case-full-stack-grid article { padding: 22px 18px; } }
@media (prefers-reduced-motion: reduce) { .case-full-hero__visual img { animation: none; } }