.case-page { max-width:1380px; margin:0 auto; padding:0 clamp(20px,3vw,46px) 120px; }
.case-page .background-section { padding-top:16px; }
.case-page p:not(.research-method):not(.opportunity-label):not(.final-feature-label):not(.quote-role), .case-page li, .case-page blockquote { font-family:"DM Sans",Arial,sans-serif !important; letter-spacing:normal !important; }
.case-toc { position:fixed; top:50%; left:max(22px,calc((100vw - 1560px) / 2)); z-index:40; width:180px; padding:8px 0; opacity:0; pointer-events:none; transform:translate(-12px,-50%); font-family:Manrope,Arial,sans-serif; transition:opacity .3s ease, transform .3s ease; }.case-toc.is-visible { opacity:1; pointer-events:auto; transform:translate(0,-50%); }.case-toc > p { margin:0 0 12px 24px; color:#878787; font:10px "DM Mono",monospace; letter-spacing:.06em; }.case-toc ol { position:relative; display:grid; gap:2px; margin:0; padding:0; list-style:none; }.case-toc ol::before { content:""; position:absolute; top:0; bottom:0; left:0; width:1px; background:#e1e5eb; }.case-toc li { position:relative; }.case-toc a { display:block; padding:7px 0 7px 24px; color:#a0aabd; font-size:13px; line-height:1.2; transition:color .22s ease, transform .22s ease; }.case-toc a::before { content:""; position:absolute; top:0; bottom:0; left:0; width:2px; background:#1f8366; transform:scaleY(0); transform-origin:center; transition:transform .22s ease; }.case-toc a:hover { color:#4c576b; transform:translateX(3px); }.case-toc a.is-active { color:#111; font-weight:600; }.case-toc a.is-active::before { transform:scaleY(1); }
.case-page section { padding:clamp(72px,10vw,138px) 0; border-top:1px solid var(--line); }
.case-page .hero { width:auto; min-height:0; display:block; position:relative; left:auto; overflow:visible; margin:0; padding:clamp(44px,4vw,68px) 0 clamp(34px,3.5vw,52px); border:0; background:transparent; color:var(--ink); }
.hero-media { position:absolute; inset:0; display:grid; place-items:center; background:#050505; cursor:pointer; }.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.6)); }.hero-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.hero-media input { position:absolute; inset:0; z-index:3; opacity:0; cursor:pointer; }.hero-media span { position:relative; z-index:2; padding:10px 13px; border:1px solid #fff; border-radius:99px; color:#fff; font:11px "DM Mono",monospace; opacity:.75; }
.hero-content { width:100%; margin:0; padding:0; position:relative; z-index:2; }.hero-tags { display:flex; flex-wrap:wrap; gap:8px; width:min(100%,1120px); margin-bottom:28px; }.hero-tags span { padding:7px 12px; border:1px solid #dce1e8; border-radius:999px; color:#707b8d; font:11px "DM Mono",monospace; letter-spacing:.03em; }.case-page .hero h1 { max-width:900px; margin:0; font:700 clamp(46px,4.2vw,68px)/1 Manrope,sans-serif; letter-spacing:-.035em; }.case-page .hero .lead { max-width:760px; margin:20px 0 34px; color:#697488; font:clamp(16px,1.25vw,21px)/1.42 "DM Sans",Arial,sans-serif; letter-spacing:normal; }.hero-facts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; width:min(100%,1120px); margin:0; padding-top:20px; border-top:1px solid var(--line); }.hero-facts div { min-width:0; }.hero-facts dt { margin:0 0 10px; color:#9aa4b4; font:10px "DM Mono",monospace; letter-spacing:.06em; }.hero-facts dd { margin:0; font:15px/1.4 "DM Sans",Arial,sans-serif; }.hero-preview { min-height:clamp(460px,50vw,720px); margin-top:40px; border:1px solid #ddd; border-radius:20px; background:#f4f4f4; }.hero-preview span { border-color:#050505; color:#050505; }
.case-kicker, .mini-label { font:12px "DM Mono",monospace; letter-spacing:.02em; color:#777; }
.case-page h1 { max-width:100%; margin:19px 0; font-size:clamp(68px,12.5vw,178px); }
.lead { max-width:540px; margin:0 0 45px; font-size:clamp(21px,2.2vw,31px); line-height:1.16; letter-spacing:-.06em; }
.about-project { display:block; }.about-project h2 { margin:0 0 56px; font:700 clamp(30px,3.1vw,46px)/1 "DM Mono",monospace; letter-spacing:-.07em; }.about-project p { max-width:980px; margin:0; font:clamp(17px,1.7vw,24px)/1.45 "DM Mono",monospace; }.about-project p + p { margin-top:20px; }
.legacy-background { display:none; }.background-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); gap:clamp(40px,10vw,150px); align-items:center; }.background-copy h2 { margin:0 0 55px; font:700 clamp(30px,3.1vw,46px)/1 "DM Mono",monospace; letter-spacing:-.07em; }.background-copy p { max-width:730px; margin:0; font:clamp(17px,1.7vw,24px)/1.45 "DM Mono",monospace; }.background-copy p + p { margin-top:25px; }.background-layout .media-upload { width:min(100%,520px); min-height:0; aspect-ratio:3 / 4; justify-self:end; }
.research-section { border-top:1px solid var(--line); }.research-heading { margin:0 0 18px; font:700 clamp(30px,3.1vw,46px)/1 "DM Mono",monospace; letter-spacing:-.07em; }.research-intro { max-width:720px; margin:0 0 42px; font:clamp(16px,1.3vw,20px)/1.42 "DM Sans",Arial,sans-serif; color:#4f596b; }.stakeholder-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.stakeholder { min-height:245px; padding:25px; border:1px solid #ddd; border-radius:18px; display:flex; flex-direction:column; justify-content:space-between; position:relative; }.stakeholder-icon { font-size:55px; line-height:1; }.stakeholder-label { position:absolute; top:25px; right:25px; max-width:55%; text-align:right; font:11px "DM Sans",Arial,sans-serif; color:#777; }.stakeholder h3 { margin:0; font:700 clamp(22px,2.1vw,32px)/1.06 "DM Mono",monospace; letter-spacing:-.065em; }.research-method { margin:0 0 12px; font:11px "DM Sans",Arial,sans-serif; color:#777; }.key-insights { margin-top:82px; }.key-insights h2 { margin:0 0 23px; font:700 clamp(30px,3.1vw,46px)/1 "DM Mono",monospace; letter-spacing:-.07em; }.insight-list { border-top:1px solid #ddd; }.key-insight { display:grid; grid-template-columns:190px minmax(0,1fr); gap:26px; padding:25px 0; border-bottom:1px solid #ddd; }.insight-label { margin:0; color:#7c8696; font:11px/1.35 "DM Sans",Arial,sans-serif !important; }.key-insight h3 { max-width:850px; margin:0 0 9px; font-size:clamp(20px,1.65vw,27px); line-height:1.18; }.key-insight div > p { max-width:720px; margin:0; color:#4f596b; font-size:clamp(14px,1.1vw,17px) !important; line-height:1.42 !important; letter-spacing:normal !important; }
.user-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:clamp(50px,12vw,190px); align-items:start; }.user-copy h2 { margin:0 0 57px; font:700 clamp(30px,3.1vw,46px)/1 "DM Mono",monospace; letter-spacing:-.07em; }.user-description { max-width:700px; margin:0; font:clamp(19px,2vw,28px)/1.35 "DM Mono",monospace; }.user-needs { margin-top:70px; }.user-needs h3 { margin:0 0 24px; font:700 21px "DM Mono",monospace; }.user-needs ul { display:grid; gap:15px; margin:0; padding:0; list-style:none; }.user-needs li { padding-left:22px; position:relative; font:17px/1.45 "DM Mono",monospace; }.user-needs li::before { content:"•"; position:absolute; left:0; }.persona { display:grid; grid-template-columns:132px 1fr; gap:25px; align-items:center; padding-top:78px; }.persona-avatar { width:132px; height:132px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 32% 28%,#ffc74e 0 8%,#f78a84 33%,#7350b6 68%,#30204e 100%); font-size:75px; box-shadow:0 13px 25px rgba(60,35,90,.18); }.persona h3 { margin:0 0 9px; font:700 22px "DM Mono",monospace; letter-spacing:-.05em; }.persona p { margin:0; font:15px/1.4 "DM Mono",monospace; }
.user-journey-section { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:clamp(45px,8vw,120px); align-items:center; }.journey-copy h2 { margin:0 0 65px; font:700 clamp(30px,3.1vw,46px)/1 "DM Mono",monospace; letter-spacing:-.07em; }.journey-copy p { max-width:520px; margin:0; font:clamp(20px,2vw,30px)/1.35 "DM Mono",monospace; }.journey-upload { min-height:365px; border:1px solid #ddd; border-radius:18px; background:#f5f5f5; }.journey-upload span { border-color:#050505; color:#050505; }
.pain-points-heading { margin:0 0 23px; font:700 clamp(30px,3.1vw,46px)/1 "DM Mono",monospace; letter-spacing:-.07em; }.pain-list { border-top:1px solid #ddd; }.pain-point { display:grid; grid-template-columns:110px 1fr; gap:26px; padding:25px 0; border-bottom:1px solid #ddd; }.pain-point p { margin:0; font:12px "DM Mono",monospace; color:#777; }.pain-point h2 { max-width:850px; margin:0; font:700 clamp(25px,3vw,43px)/1.12 "DM Mono",monospace; letter-spacing:-.065em; }
.section-intro { display:grid; grid-template-columns:1fr 2fr; gap:30px; }.section-intro h2,.content-title { margin:0; font-size:clamp(34px,4.6vw,64px); line-height:.98; letter-spacing:-.08em; }.section-intro p { max-width:610px; margin:0; font-size:18px; line-height:1.5; }
.insights { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:58px; }.insight { min-height:230px; padding:22px; border:1px solid #ddd; border-radius:18px; display:flex; flex-direction:column; justify-content:space-between; }.insight h3 { margin:0; font-size:23px; letter-spacing:-.06em; }.insight p { margin:0; font:13px/1.45 "DM Mono",monospace; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,8vw,120px); align-items:center; }.two-col h2 { margin:0 0 22px; font-size:clamp(38px,5vw,70px); line-height:.95; letter-spacing:-.085em; }.two-col p { font-size:17px; line-height:1.5; }
.media-upload { min-height:350px; display:grid; place-items:center; position:relative; overflow:hidden; background:#050505; cursor:pointer; }.media-upload img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.media-upload input { position:absolute; inset:0; z-index:2; opacity:0; cursor:pointer; }.media-upload span { position:relative; z-index:1; padding:10px 13px; border:1px solid #fff; border-radius:99px; color:#fff; font:11px "DM Mono",monospace; }

/* Production site: keep media visible while removing editor upload/replace controls. */
.media-upload > input[type="file"],
.media-upload > span:not(.hero-video-frame),
.upload-hint,
input[type="file"] { display:none !important; }
.journey { min-height:310px; display:grid; place-items:center; margin-top:50px; border:1px solid #ddd; background:#fafafa; }.journey .journey-steps { display:flex; align-items:center; justify-content:space-around; width:90%; gap:16px; }.journey-steps div { flex:1; text-align:center; }.journey-steps i { display:block; width:14px; height:14px; margin:0 auto 13px; border-radius:50%; background:#050505; }.journey-steps span { font:11px "DM Mono",monospace; }
.challenge { margin:0; padding:clamp(58px,7vw,100px) 0; background:transparent; color:#111; text-align:left; }.challenge h2 { max-width:900px; margin:0 0 20px; font-size:clamp(34px,3vw,50px); line-height:1.02; }.challenge-question { max-width:920px; margin:0 0 44px; color:#4f596b; font-size:clamp(19px,1.65vw,27px) !important; line-height:1.35 !important; }.challenge-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.challenge-item { min-height:300px; padding:30px; border:1px solid #dfe3ea; border-radius:20px; background:#fff; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; }.challenge-item:hover { border-color:#cbd3df; box-shadow:0 14px 30px rgba(40,54,76,.07); transform:translateY(-4px); }.challenge-icon { width:58px; height:58px; display:grid; place-items:center; margin-bottom:42px; border-radius:16px; background:#f1f4fa; font-size:28px; }.challenge-item div > p:first-child { margin:0 0 12px; color:#7c8696; font:11px "DM Sans",Arial,sans-serif !important; }.challenge-item h3 { margin:0 0 13px; font-size:clamp(21px,1.8vw,29px); line-height:1.1; }.challenge-item div > p:last-child { margin:0; color:#5d687a; font-size:clamp(15px,1.2vw,18px) !important; line-height:1.48 !important; }
.solution-direction { max-width:980px; padding:clamp(58px,7vw,96px) 0; border-top:1px solid #ddd; }.solution-direction h2 { max-width:730px; margin:0 0 22px; font-size:clamp(30px,2.5vw,43px); line-height:1.05; }.solution-direction > p:not(.solution-direction-highlight) { max-width:820px; margin:0; color:#4f596b; font-size:clamp(17px,1.35vw,21px) !important; line-height:1.45 !important; }.solution-direction-highlight { max-width:960px; margin:34px 0 0; color:#111; font-size:clamp(30px,2.8vw,47px) !important; font-weight:600; line-height:1.12 !important; }
.my-role { padding:clamp(58px,7vw,96px) 0; border-top:1px solid #ddd; }.my-role > h2 { margin:0 0 20px; font-size:clamp(34px,3vw,50px); line-height:1.02; }.my-role-intro { max-width:820px; margin:0 0 42px; color:#4f596b; font-size:clamp(18px,1.45vw,23px) !important; line-height:1.42 !important; }.role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.role-card { min-height:300px; padding:30px; border:1px solid #dfe3ea; border-radius:20px; background:#fff; }.role-icon { width:58px; height:58px; display:grid; place-items:center; margin-bottom:38px; border-radius:16px; background:#f1f4fa; font-size:28px; }.role-card h3 { margin:0 0 14px; font-size:clamp(21px,1.75vw,28px); line-height:1.1; }.role-card p { margin:0; color:#5d687a; font-size:clamp(15px,1.2vw,18px) !important; line-height:1.48 !important; }
.design-opportunities > h2 { margin:0 0 65px; font:700 clamp(34px,4.6vw,64px)/1 Manrope,sans-serif; letter-spacing:-.08em; }.opportunity { max-width:980px; margin:0 auto; padding:0 0 100px; text-align:center; }.opportunity + .opportunity { padding-top:95px; border-top:1px solid #ddd; }.opportunity-label { margin:0 0 18px; font:12px "DM Mono",monospace; color:#777; }.solution-upload { min-height:440px; margin-bottom:56px; border:1px solid #ddd; border-radius:20px; background:#f4f4f4; }.solution-upload span { border-color:#050505; color:#050505; }.opportunity h3 { margin:0; font:700 clamp(38px,5vw,74px)/.95 "DM Mono",monospace; letter-spacing:-.08em; }.opportunity-description { max-width:640px; margin:25px auto 45px; font:clamp(17px,1.65vw,23px)/1.42 "DM Mono",monospace; }.pros-cons { max-width:640px; margin:0 auto; text-align:left; }.pros-cons h4 { margin:0 0 18px; font:700 18px "DM Mono",monospace; }.pros-cons ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; }.pros-cons li { padding-left:25px; position:relative; font:15px/1.4 "DM Mono",monospace; }.pros-cons li::before { content:"✅"; position:absolute; left:0; font-size:14px; }.pros-cons .con { margin-top:28px; }.pros-cons .con li::before { content:"❌"; }
.stakeholder-feedback > h2 { margin:0 0 68px; font:700 clamp(34px,4.6vw,64px)/1 Manrope,sans-serif; letter-spacing:-.08em; }.feedback-conversation { max-width:1000px; margin:0 auto; display:grid; gap:42px; }.quote-card { display:grid; grid-template-columns:116px minmax(0,1fr); gap:24px; align-items:center; max-width:760px; }.quote-card.is-right { grid-template-columns:minmax(0,1fr) 116px; margin-left:auto; text-align:right; }.quote-avatar { width:116px; height:116px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 30% 28%,#ffdc66 0 9%,#c77d99 43%,#744da1 100%); font-size:64px; }.quote-card.is-right .quote-avatar { order:2; background:radial-gradient(circle at 30% 28%,#f4c272 0 9%,#bd794c 43%,#4c2e34 100%); }.quote-bubble { position:relative; padding:23px 26px; border:1px solid #ddd; border-radius:18px; background:#fff; text-align:left; }.quote-card.is-right .quote-bubble { text-align:right; }.quote-bubble::before { content:""; position:absolute; left:-9px; top:50%; width:16px; height:16px; border-left:1px solid #ddd; border-bottom:1px solid #ddd; background:#fff; transform:translateY(-50%) rotate(45deg); }.quote-card.is-right .quote-bubble::before { right:-9px; left:auto; border:0; border-top:1px solid #ddd; border-right:1px solid #ddd; }.quote-role { margin:0 0 11px; font:12px "DM Mono",monospace; color:#777; }.quote-bubble blockquote { margin:0; font:clamp(17px,1.65vw,23px)/1.38 "DM Mono",monospace; }.feedback-summary { max-width:670px; margin:90px 0 0; font:clamp(20px,2vw,29px)/1.35 "DM Mono",monospace; }.feedback-outcomes { display:grid; gap:14px; max-width:700px; margin:60px 0 0; }.feedback-outcomes p { margin:0; padding-left:30px; position:relative; font:17px/1.42 "DM Mono",monospace; }.feedback-outcomes p::before { content:"✅"; position:absolute; left:0; font-size:16px; }
.workflow-refinement > h2 { margin:0 0 62px; font:700 clamp(34px,4.6vw,64px)/1 Manrope,sans-serif; letter-spacing:-.08em; }.workflow-upload { min-height:560px; max-width:1060px; margin:0 auto; border:1px solid #ddd; border-radius:20px; background:#f5f5f5; }.workflow-upload span { border-color:#050505; color:#050505; }.workflow-outcomes { display:grid; gap:18px; max-width:900px; margin:65px auto 0; }.workflow-outcomes p { margin:0; padding-left:32px; position:relative; font:clamp(17px,1.65vw,23px)/1.4 "DM Mono",monospace; }.workflow-outcomes p::before { content:"✅"; position:absolute; left:0; font-size:17px; }
.ui-design-iterations > h2 { margin:0 0 54px; font:700 clamp(38px,5vw,74px)/1 Manrope,sans-serif; letter-spacing:-.085em; }.ui-iteration-grid { display:grid; grid-template-columns:1fr; gap:clamp(58px,8vw,108px); max-width:1060px; margin:0 auto; }.ui-iteration-card { display:flex; flex-direction:column; }.ui-iteration-label { margin:0 0 15px; color:#777; font:12px "DM Mono",monospace; }.ui-iteration-upload { min-height:500px; border:1px solid #ddd; border-radius:18px; background:#f5f5f5; }.ui-iteration-upload span { border-color:#050505; color:#050505; }.ui-iteration-copy { min-height:84px; margin:20px 0 0; border-top:1px solid #ddd; }
.final-design > h2 { margin:0 0 66px; font:700 clamp(38px,5vw,74px)/1 Manrope,sans-serif; letter-spacing:-.085em; }.final-feature { max-width:1080px; margin:0 auto; padding:0 0 105px; text-align:center; }.final-feature + .final-feature { padding-top:95px; border-top:1px solid #ddd; }.final-feature-label { margin:0 0 18px; font:12px "DM Mono",monospace; color:#777; }.final-upload { min-height:535px; margin-bottom:52px; border:1px solid #ddd; border-radius:20px; background:#f5f5f5; }.final-upload span { border-color:#050505; color:#050505; }.final-upload.has-image { cursor:zoom-in; }.final-upload.has-image img { transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease; }.final-upload.has-image::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.12)); opacity:0; pointer-events:none; transition:opacity .35s ease; }.final-upload.has-image:hover img { transform:scale(1.035); filter:saturate(1.04); }.final-upload.has-image:hover::after { opacity:1; }.final-upload.has-image span { z-index:3; border-color:#fff; color:#fff; background:rgba(0,0,0,.24); opacity:0; pointer-events:none; transition:opacity .25s ease; }.final-upload.has-image:hover span { opacity:1; }.final-feature h3 { margin:0; font:700 clamp(34px,4.6vw,64px)/.98 "DM Mono",monospace; letter-spacing:-.08em; }.final-feature > p:not(.final-feature-label) { max-width:640px; margin:24px auto 0; font:clamp(17px,1.65vw,23px)/1.42 "DM Mono",monospace; }.feature-details { display:grid; max-width:640px; margin:42px auto 0; border-top:1px solid #ddd; text-align:center; }.feature-detail { min-height:74px; padding:19px 0; }.feature-detail + .feature-detail { border-top:1px solid #ddd; }.feature-detail h4 { margin:0; font:600 clamp(20px,2vw,28px)/1 Manrope,sans-serif; letter-spacing:-.06em; }.feature-detail p { max-width:570px; margin:12px auto 0; font:17px/1.42 "DM Mono",monospace; }
.image-lightbox { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:clamp(22px,5vw,70px); background:rgba(10,10,10,.78); backdrop-filter:blur(12px); opacity:0; pointer-events:none; transition:opacity .25s ease; }.image-lightbox.is-open { opacity:1; pointer-events:auto; }.image-lightbox img { max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; box-shadow:0 20px 80px rgba(0,0,0,.45); transform:scale(.96); transition:transform .3s cubic-bezier(.2,.7,.2,1); }.image-lightbox.is-open img { transform:scale(1); }.image-lightbox button { position:absolute; top:22px; right:24px; width:42px; height:42px; border:1px solid rgba(255,255,255,.6); border-radius:50%; background:rgba(0,0,0,.25); color:#fff; font-size:27px; line-height:1; cursor:pointer; }
.reflection { max-width:none; margin:0; padding:88px 0 36px; border-top:1px solid #ddd; text-align:left; }.reflection h2 { margin:0; font:700 clamp(38px,5vw,74px)/1 Manrope,sans-serif; letter-spacing:-.085em; }.reflection p { max-width:620px; margin:28px 0 0; color:#777; font:clamp(17px,1.65vw,23px)/1.42 "DM Mono",monospace; }
.reflection-list { max-width:760px; margin:28px 0 0; padding:0; display:grid; gap:14px; color:#56637a; font:400 clamp(16px,1.25vw,19px)/1.55 "DM Sans",sans-serif; list-style:none; text-align:left; }.reflection-list li { position:relative; padding-left:22px; }.reflection-list li::before { content:"•"; position:absolute; left:0; color:#4e8f73; }
.reflection-signoff { margin:38px 0 0 !important; padding-top:24px; max-width:760px; border-top:1px solid #d9dde4; color:#171717 !important; font:600 clamp(22px,1.8vw,28px)/1.35 "DM Sans",sans-serif !important; }
.next-steps { max-width:720px; margin:42px auto 0; padding-top:24px; border-top:1px solid #ddd; text-align:left; }.next-steps h3 { margin:0 0 20px; font:600 clamp(21px,2vw,28px)/1 Manrope,sans-serif; letter-spacing:-.06em; }.next-steps ul { display:grid; gap:14px; margin:0; padding:0; list-style:none; }.next-steps li { position:relative; padding-left:28px; font:17px/1.42 "DM Mono",monospace; }.next-steps li::before { content:"→"; position:absolute; left:0; }
.solution-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:55px; }.solution { min-height:340px; padding:25px; border:1px solid #ddd; border-radius:18px; display:flex; flex-direction:column; justify-content:space-between; }.solution h3 { margin:0; font-size:26px; letter-spacing:-.06em; }.solution p { max-width:330px; margin:0; font-size:15px; line-height:1.45; }.phone { width:142px; height:258px; margin:auto; border:6px solid #111; border-radius:22px; background:linear-gradient(150deg,#eef4e8,#94c786); }
.feedback { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:52px; }.quote { padding:25px; border-radius:18px; background:#f5f5f5; font-size:19px; line-height:1.35; letter-spacing:-.04em; }.quote small { display:block; margin-top:33px; font:11px "DM Mono",monospace; color:#777; }
.iteration { display:grid; grid-template-columns:1fr 1.35fr; gap:45px; align-items:start; }.iteration h2 { margin:0; font-size:clamp(42px,5vw,74px); line-height:.94; letter-spacing:-.09em; }.iteration .journey { margin:0; min-height:420px; }
@media (max-width:720px) { .case-page { padding:0 20px 80px; }.case-page .hero { min-height:0; margin:0; padding:52px 0 46px; }.hero-tags { gap:8px; margin-bottom:30px; }.hero-tags span { padding:7px 10px; font-size:10px; }.case-page .hero h1 { font-size:48px; }.case-page .hero .lead { margin:20px 0 34px; font-size:17px; }.hero-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 18px; padding-top:22px; }.hero-facts dd { font-size:14px; }.about-project,.background-layout,.user-layout,.user-journey-section,.section-intro,.two-col,.iteration { grid-template-columns:1fr; }.about-project h2,.background-copy h2,.user-copy h2,.journey-copy h2 { margin-bottom:32px; }.pain-point { grid-template-columns:62px 1fr; gap:14px; }.persona { padding-top:0; }.stakeholder-grid { grid-template-columns:1fr; }.stakeholder { min-height:185px; }.key-insights { margin-top:60px; }.key-insight { grid-template-columns:62px 1fr; gap:14px; }.insights,.solution-grid,.feedback { grid-template-columns:1fr; }.challenge { margin:0 -20px; padding:70px 20px; }.media-upload { min-height:265px; }.journey-upload { min-height:245px; }.solution-upload { min-height:260px; margin-bottom:40px; }.opportunity { padding-bottom:70px; }.opportunity + .opportunity { padding-top:70px; }.journey .journey-steps { flex-wrap:wrap; }.journey-steps div { min-width:70px; } }
@media (min-width:1100px) and (max-width:1749px) { .case-page { padding-left:210px; } .case-page .hero { width:calc(100% + 150px); margin-left:-150px; } .case-toc { left:22px; } }
@media (max-width:1099px) { .case-toc { display:none; } }
@media (min-width:721px) {
  .case-page { padding-bottom:90px; }
  .case-page section { padding:clamp(54px,7vw,96px) 0; }
  .case-page .hero { min-height:0; padding:clamp(44px,4vw,68px) 0 clamp(34px,3.5vw,52px); }
  .case-page .hero h1 { margin-bottom:0; font-size:clamp(46px,4.2vw,68px); }
  .case-page .hero .lead { font-size:clamp(16px,1.25vw,21px); }
  .case-page p:not(.research-method):not(.opportunity-label):not(.final-feature-label):not(.quote-role), .case-page li, .case-page blockquote { font-size:clamp(14px,1.2vw,18px) !important; line-height:1.42 !important; }
  .about-project h2,.background-copy h2,.research-heading,.key-insights h2,.user-copy h2,.journey-copy h2,.pain-points-heading { margin-bottom:34px; font-size:clamp(30px,2.2vw,40px); }
  .about-project,.background-layout,.user-layout { gap:clamp(34px,7vw,90px); }
  .project-facts { gap:24px; }.project-facts h3 { font-size:clamp(21px,2vw,30px); }.project-facts p { font-size:14px !important; }
  .background-copy p + p { margin-top:18px; }
  .stakeholder { min-height:210px; padding:21px; }.stakeholder-icon { font-size:48px; }.key-insights { margin-top:58px; }.key-insight { padding:20px 0; }.key-insight p { font-size:clamp(16px,1.45vw,21px) !important; }
  .user-needs { margin-top:46px; }.user-needs h3 { margin-bottom:17px; }.user-needs ul { gap:10px; }.persona { padding-top:48px; }.persona-avatar { width:112px; height:112px; font-size:64px; }
  .journey-copy h2 { margin-bottom:38px; }.journey-upload { min-height:320px; }.pain-point { padding:20px 0; }.pain-point h2 { font-size:clamp(22px,2.5vw,36px); }
  .challenge { padding:clamp(50px,6vw,80px) 0; }.challenge h2 { margin:0 0 18px; font-size:clamp(34px,3vw,50px); }
  .design-opportunities > h2,.stakeholder-feedback > h2,.workflow-refinement > h2,.ui-design-iterations > h2,.final-design > h2,.reflection h2 { margin-bottom:44px; font-size:clamp(42px,3.2vw,56px); }
  .opportunity { padding-bottom:72px; }.opportunity + .opportunity { padding-top:68px; }.solution-upload { min-height:380px; margin-bottom:40px; }.opportunity-description { margin:20px auto 34px; }.pros-cons li { font-size:13px !important; }
  .feedback-conversation { gap:30px; }.quote-card { gap:18px; }.quote-avatar { width:96px; height:96px; font-size:54px; }.feedback-summary { margin-top:62px; }.feedback-outcomes { margin-top:40px; }
  .workflow-refinement > h2 { margin-bottom:44px; }.workflow-upload { min-height:460px; }.workflow-outcomes { margin-top:46px; gap:13px; }.ui-iteration-upload { min-height:440px; }.ui-iteration-copy { min-height:70px; margin-top:16px; }
  .final-feature { padding-bottom:78px; }.final-feature + .final-feature { padding-top:72px; }.final-upload { min-height:450px; margin-bottom:38px; }.final-feature h3 { font-size:clamp(34px,3vw,46px); }.final-feature > p:not(.final-feature-label) { margin-top:18px; }.feature-details { margin-top:30px; }.feature-detail { min-height:0; padding:15px 0; }.feature-detail h4 { font-size:clamp(20px,1.6vw,24px); }.feature-detail p { margin-top:8px; font-size:14px !important; }
  .reflection { padding:64px 0 24px; }.reflection p { margin-top:20px; }.next-steps { margin-top:30px; padding-top:20px; }.next-steps ul { gap:10px; }
}

/* Final V1 user-flow sizing override: never inherit the older portrait upload height. */
.case-page .design-evolution-item:first-child .design-evolution-upload {
  display:block;
  width:100%;
  min-height:0 !important;
  height:auto;
  aspect-ratio:2222 / 620;
  background:#fff;
}

.case-page .design-evolution-item:first-child .design-evolution-upload > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.case-page .final-design-intro {
  border-bottom:0;
}

/* Final override: Reuse Gallery uses the same card layout as Donate. */
.case-page .final-feature--gallery-reverse > h3,
.case-page .final-feature--gallery-reverse > p:not(.final-feature-label),
.case-page .final-feature--gallery-reverse > .gallery-feature-intros {
  grid-column:2;
  max-width:520px;
}

.case-page .final-feature--gallery-reverse > h3 { grid-row:1; }
.case-page .final-feature--gallery-reverse > p:not(.final-feature-label) {
  grid-row:2;
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.6 !important;
}
.case-page .final-feature--gallery-reverse > .gallery-feature-intros { grid-row:3; }
.case-page .final-feature--gallery-reverse > .final-feature-phone-upload {
  grid-column:1;
  grid-row:1 / span 4;
}

.case-page .final-feature.final-feature--gallery-reverse > .feature-details {
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2vw,24px);
  align-items:stretch;
  grid-column:1 / -1;
  grid-row:5;
  width:100%;
  max-width:760px;
  margin:clamp(32px,4vw,48px) auto 0 !important;
  border:0;
}

.case-page .final-feature--gallery-reverse > .feature-details .feature-detail {
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.case-page .final-feature--gallery-reverse > .feature-details .feature-detail + .feature-detail {
  padding-left:0;
  border:0;
}

.case-page .final-feature--gallery-reverse > .feature-details h4 {
  font-family:var(--rd-body) !important;
  font-size:17px !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  letter-spacing:-.015em !important;
  text-transform:none;
}

.case-page .final-feature--gallery-reverse > .feature-details p {
  margin-top:10px;
  font-size:15px !important;
  line-height:1.55 !important;
}

.case-page .final-feature--gallery-reverse > .feature-details {
  grid-column:1 / -1;
  grid-row:5;
  width:100%;
  max-width:760px;
  margin:clamp(32px,4vw,48px) auto 0 !important;
}

@media (min-width:901px) {
  .case-page .final-feature--split.final-feature--gallery-reverse {
    grid-template-columns:minmax(360px,.9fr) minmax(360px,.88fr);
    column-gap:clamp(34px,4.5vw,72px);
  }

  .case-page .final-feature--gallery-reverse > h3,
  .case-page .final-feature--gallery-reverse > p:not(.final-feature-label),
  .case-page .final-feature--gallery-reverse > .gallery-feature-intros {
    transform:translateY(clamp(72px,7vw,112px));
  }
}

@media (max-width:900px) {
  .case-page .final-feature--gallery-reverse > h3,
  .case-page .final-feature--gallery-reverse > p:not(.final-feature-label),
  .case-page .final-feature--gallery-reverse > .gallery-feature-intros,
  .case-page .final-feature--gallery-reverse > .final-feature-phone-upload,
  .case-page .final-feature--gallery-reverse > .feature-details {
    grid-column:1;
    grid-row:auto;
    grid-template-columns:1fr;
    transform:none;
  }
}

/* Separate the three design-iteration stages without framing the whole section. */
.case-page .design-evolution-item + .design-evolution-item {
  padding-top:72px;
  border-top:1px solid #d9dde4;
}

@media (max-width:720px) {
  .case-page .design-evolution-item + .design-evolution-item {
    padding-top:52px;
  }
}

/* Gallery supporting notes use the same compact vertical list as Donate and Find. */
.case-page .final-feature--gallery-reverse > .feature-details {
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2vw,24px);
  grid-column:1 / -1;
  grid-row:5;
  width:100%;
  max-width:760px;
  margin:clamp(32px,4vw,48px) auto 0 !important;
  border:0;
}

.case-page .final-feature.final-feature--gallery-reverse > .feature-details .feature-detail,
.case-page .final-feature.final-feature--gallery-reverse > .feature-details .feature-detail + .feature-detail {
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
}

/* Reuse Gallery mirrors the Donate feature layout with the screen on the left. */
.case-page .final-feature--gallery-reverse > h3,
.case-page .final-feature--gallery-reverse > p:not(.final-feature-label),
.case-page .final-feature--gallery-reverse > .gallery-feature-intros {
  grid-column:2;
  max-width:520px;
}

.case-page .final-feature--gallery-reverse > h3 { grid-row:1; }
.case-page .final-feature--gallery-reverse > p:not(.final-feature-label) {
  grid-row:2;
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.6 !important;
}
.case-page .final-feature--gallery-reverse > .gallery-feature-intros { grid-row:3; }

.case-page .final-feature--gallery-reverse > .final-feature-phone-upload {
  grid-column:1;
  grid-row:1 / span 4;
}

@media (min-width:901px) {
  .case-page .final-feature--split.final-feature--gallery-reverse {
    grid-template-columns:minmax(360px,.9fr) minmax(360px,.88fr);
    column-gap:clamp(34px,4.5vw,72px);
  }

  .case-page .final-feature--gallery-reverse > h3,
  .case-page .final-feature--gallery-reverse > p:not(.final-feature-label),
  .case-page .final-feature--gallery-reverse > .gallery-feature-intros {
    transform:translateY(clamp(72px,7vw,112px));
  }
}

@media (max-width:900px) {
  .case-page .final-feature--gallery-reverse > h3,
  .case-page .final-feature--gallery-reverse > p:not(.final-feature-label),
  .case-page .final-feature--gallery-reverse > .gallery-feature-intros,
  .case-page .final-feature--gallery-reverse > .final-feature-phone-upload,
  .case-page .final-feature--gallery-reverse > .feature-details {
    grid-column:1;
    grid-row:auto;
    transform:none;
  }
}

/* Final gallery note layout override. */
.case-page .final-feature.final-feature--gallery-reverse > .feature-details {
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2vw,24px);
  grid-column:2;
  grid-row:4;
  width:100%;
  max-width:520px;
  margin:clamp(30px,3vw,44px) 0 0 !important;
  transform:none;
  border:0;
}

.case-page .final-feature.final-feature--gallery-reverse > .feature-details .feature-detail,
.case-page .final-feature.final-feature--gallery-reverse > .feature-details .feature-detail + .feature-detail {
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
}

@media (max-width:900px) {
  .case-page .final-feature.final-feature--gallery-reverse > .feature-details {
    grid-column:1;
    grid-row:auto;
    max-width:760px;
    transform:none;
  }
}

/* Give the case header more breathing room from the left-side table of contents. */
@media (min-width:1100px) and (max-width:1749px) {
  .case-page .hero {
    width:calc(100% + 110px);
    margin-left:-110px;
  }
}
.case-page h1,.case-page h2,.case-page h3,.case-page h4 { font-family:Manrope,Arial,sans-serif !important; letter-spacing:-.035em !important; }
.experience-breakdown { margin-top:72px; }.experience-breakdown > h2 { max-width:650px; margin:0 0 26px; font-size:clamp(30px,2.2vw,40px); line-height:1.05; }.breakdown-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.breakdown-item { min-height:278px; padding:24px; border:1px solid #ddd; border-radius:18px; }.breakdown-label { margin:0 0 42px; color:#818b9c; font:11px "DM Mono",monospace !important; letter-spacing:.05em; }.breakdown-item h3 { margin:0 0 12px; font-size:clamp(21px,1.8vw,28px); font-weight:500; line-height:1.08; }.breakdown-item p:not(.breakdown-label) { max-width:430px; margin:0; color:#4f596b; }.breakdown-flow { display:grid; grid-template-columns:minmax(0,.8fr) auto minmax(0,1.15fr) auto minmax(0,.9fr); align-items:center; gap:7px; margin-top:20px; padding-top:16px; border-top:1px solid #e2e2e2; color:#717b8b; font:12px/1.3 "DM Sans",Arial,sans-serif; }.breakdown-flow b { color:#9aa4b4; font-size:15px; font-weight:400; }.breakdown-summary { max-width:980px; margin:24px 0 0; color:#4f596b; font-size:clamp(16px,1.3vw,20px) !important; }.breakdown-context { max-width:760px; margin:12px 0 0; color:#4f596b; font-size:clamp(16px,1.3vw,20px) !important; }
.direction-shift { max-width:900px; margin-top:72px; padding:30px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }.direction-shift h2 { margin:0 0 20px; font-size:clamp(25px,2vw,34px); line-height:1.08; }.direction-shift > p:not(.direction-conclusion) { max-width:760px; margin:0; color:#4f596b; }.case-page .direction-shift .direction-conclusion { max-width:900px; margin:40px 0 0; font-size:clamp(40px,4vw,64px) !important; font-weight:600; line-height:1.06 !important; color:#111; }
.direction-conversations { display:grid; gap:46px; margin-top:32px; }.direction-quote { display:flex; align-items:center; gap:18px; max-width:650px; }.direction-quote.is-reversed { align-self:end; flex-direction:row-reverse; text-align:right; transform:translateX(90px); }.direction-avatar { flex:0 0 76px; width:76px; height:76px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 32% 28%,#ffd86a 0 7%,#fa9b85 34%,#9b76d0 70%,#604789 100%); font-size:44px; box-shadow:0 12px 26px rgba(84,57,116,.2); animation:direction-avatar-float 4.5s ease-in-out infinite; }.direction-quote.is-reversed .direction-avatar { animation-delay:-2.1s; }.direction-bubble { position:relative; padding:16px 18px; border:1px solid #ddd; border-radius:16px; background:#f7f7f7; }.direction-bubble::before { content:""; position:absolute; top:50%; left:-8px; width:14px; height:14px; border-left:1px solid #ddd; border-bottom:1px solid #ddd; background:#f7f7f7; transform:translateY(-50%) rotate(45deg); }.direction-quote.is-reversed .direction-bubble::before { right:-8px; left:auto; border:0; border-top:1px solid #ddd; border-right:1px solid #ddd; }.direction-bubble p { margin:0; color:#111; font-size:15px !important; line-height:1.35 !important; }.direction-bubble span { display:block; margin-top:9px; color:#7c8696; font:11px "DM Sans",Arial,sans-serif; }@keyframes direction-avatar-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-7px) rotate(2deg); } }@media (prefers-reduced-motion:reduce) { .direction-avatar { animation:none; } }@media (max-width:720px) { .direction-quote.is-reversed { transform:none; } }
.case-page .hero .lead { font-size:clamp(16px,1.25vw,21px) !important; }
@media (max-width:720px) { .case-page .hero .lead { font-size:17px !important; } }
@media (min-width:721px) { .hero-preview { min-height:clamp(460px,47vw,700px); } }
@media (max-width:720px) { .quote-card,.quote-card.is-right { grid-template-columns:70px minmax(0,1fr); gap:16px; margin-left:0; text-align:left; }.quote-card.is-right .quote-avatar { order:0; }.quote-card.is-right .quote-bubble { text-align:left; }.quote-card.is-right .quote-bubble::before { left:-9px; right:auto; border:0; border-left:1px solid #ddd; border-bottom:1px solid #ddd; }.quote-avatar { width:70px; height:70px; font-size:40px; }.feedback-summary { margin-top:65px; }.experience-breakdown { margin-top:56px; }.breakdown-grid { grid-template-columns:1fr; }.breakdown-item { min-height:0; }.breakdown-label { margin-bottom:28px; }.challenge-list,.role-grid { grid-template-columns:1fr; }.challenge-item,.role-card { min-height:0; padding:24px; }.challenge-icon,.role-icon { margin-bottom:28px; }.challenge-question { margin-bottom:30px; } }
@media (max-width:720px) { .workflow-upload { min-height:300px; }.workflow-outcomes { margin-top:42px; }.ui-iteration-grid { grid-template-columns:1fr; gap:46px; }.ui-iteration-upload { min-height:285px; } }
@media (max-width:720px) { .final-upload { min-height:285px; margin-bottom:38px; }.final-feature { padding-bottom:70px; }.final-feature + .final-feature { padding-top:70px; } }
@media (max-width:720px) { .feature-details { margin-top:32px; }.feature-detail + .feature-detail { padding-left:16px; } }
.design-evolution { padding:clamp(58px,7vw,96px) 0; border-top:1px solid #ddd; }.design-evolution > h2 { margin:0 0 18px; font-size:clamp(34px,3vw,50px); line-height:1.02; }.design-evolution-intro { max-width:760px; margin:0 0 44px; color:#4f596b; font-size:clamp(18px,1.45vw,23px) !important; line-height:1.42 !important; }.design-evolution-list { display:grid; gap:72px; }.design-evolution-item { max-width:none; }.design-evolution-label { margin:0 0 14px; color:#7c8696; font:12px "DM Mono",monospace !important; letter-spacing:.05em; }.design-evolution-upload { min-height:clamp(420px,45vw,660px); width:100%; border:1px solid #ddd; border-radius:20px; background:#f5f5f5; }.design-evolution-upload span { border-color:#050505; color:#050505; }.design-evolution-copy { max-width:none; min-height:29px; margin:22px 0 0; color:#7c8696; font-size:clamp(16px,1.25vw,20px) !important; line-height:1.45 !important; }.design-evolution-label + .design-evolution-copy { margin:0 0 22px; }@media (max-width:720px) { .design-evolution-list { gap:52px; }.design-evolution-upload { min-height:285px; }.design-evolution-copy { margin-top:16px; }.design-evolution-label + .design-evolution-copy { margin:0 0 16px; } }
.design-evolution-item:first-child .design-evolution-upload,.design-evolution-item:nth-child(2) .design-evolution-upload { min-height:clamp(320px,33vw,460px); }
.design-evolution-item:first-child .design-evolution-label { color:#111; font-weight:700 !important; }
.design-evolution-item:nth-child(2) .design-evolution-label { color:#111; font-weight:700 !important; }
.case-page .design-evolution-list .design-evolution-item:nth-child(-n+2) .design-evolution-label { font:700 clamp(32px,3vw,48px)/1.08 Manrope,Arial,sans-serif !important; letter-spacing:-.035em; }
.design-evolution-copy + .design-evolution-copy { margin:0 0 22px; }

/* Keep the V1 supporting copy comfortably readable instead of spanning the full canvas. */
.case-page .design-evolution-item:first-child .design-evolution-copy {
  max-width: 860px;
}
.design-evolution-changes { display:grid; gap:10px; max-width:none; margin:0 0 24px; padding:0; color:#4f596b; font-size:clamp(16px,1.25vw,20px); line-height:1.45; list-style:none; }.design-evolution-changes li { position:relative; padding-left:30px; }.design-evolution-changes li::before { content:"✅"; position:absolute; left:0; top:.1em; font-size:.9em; }
.case-page .design-evolution-item:nth-child(2) .design-evolution-changes { color:#111; }
.case-page .design-evolution-item:nth-child(3) .design-evolution-changes { color:#111; }
.iteration-learnings { margin-top:32px; padding-top:0; border:0; }.iteration-learnings h3 { margin:0 0 22px; font-size:clamp(18px,1.45vw,23px); line-height:1.1; }.iteration-learnings ul { display:grid; gap:24px; margin:0; padding:0; list-style:none; }.iteration-learnings li { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; padding:0; border:0; }.iteration-learnings p,.iteration-learnings span { margin:0; font-size:clamp(15px,1.15vw,18px) !important; line-height:1.45 !important; }.iteration-learnings p { color:#4f596b; }.iteration-learnings span { position:relative; padding-left:44px; color:#111; font-weight:600; }.iteration-learnings p::before { content:"💬"; display:inline-block; margin-right:10px; }.iteration-learnings span::before { content:"💡"; position:absolute; top:0; left:0; }@media (max-width:720px) { .iteration-learnings li { grid-template-columns:1fr; gap:10px; } }
.design-evolution-item:first-child .iteration-learnings { padding-bottom:0; border:0; }
.case-page .final-design { counter-reset:final-feature; padding:clamp(72px,9vw,120px) 0; }.case-page .final-eyebrow { display:inline-flex; margin:0 0 34px; padding:9px 16px; border-radius:999px; background:#e6f3ed; color:#147255; font:700 12px/1 "DM Sans",Arial,sans-serif !important; letter-spacing:.11em !important; }.case-page .final-design > h2 { max-width:920px; margin:0 0 22px; font:700 clamp(42px,4.4vw,70px)/.98 Georgia,"Times New Roman",serif !important; letter-spacing:-.05em !important; }.case-page .final-design-intro { max-width:1080px; margin:0 0 48px; padding-bottom:40px; border-bottom:1px solid #dde1e8; color:#5d687a; font-size:clamp(19px,1.7vw,27px) !important; line-height:1.45 !important; }.case-page .final-feature { position:relative; max-width:none; margin:0; padding:46px 0 72px 94px; text-align:left; counter-increment:final-feature; }.case-page .final-feature::before { content:"0" counter(final-feature); position:absolute; top:47px; left:0; display:grid; place-items:center; width:52px; height:52px; border:1px solid #dfe3ea; border-radius:14px; color:#8792a3; font:600 17px/1 "DM Mono",monospace; }.case-page .final-feature + .final-feature { padding-top:64px; border-top:1px solid #dde1e8; }.case-page .final-feature + .final-feature::before { top:65px; }.case-page .final-feature-label { margin:0 0 12px; color:#667287; font:700 clamp(14px,1.25vw,19px)/1 "DM Sans",Arial,sans-serif !important; letter-spacing:.1em !important; }.case-page .final-feature h3 { margin:0 0 22px; font:700 clamp(30px,3vw,48px)/1.05 Georgia,"Times New Roman",serif !important; letter-spacing:-.04em !important; }.case-page .final-feature > p:not(.final-feature-label) { max-width:980px; margin:0 0 30px; color:#5d687a; font-size:clamp(17px,1.45vw,23px) !important; line-height:1.45 !important; }.case-page .final-upload { min-height:clamp(370px,38vw,560px); margin:0 0 34px; border-radius:18px; }.case-page .feature-details { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; margin:0; text-align:left; }.case-page .feature-detail { min-height:0; padding:20px 0; }.case-page .feature-detail + .feature-detail { padding-left:32px; border-top:0; border-left:1px solid #dde1e8; }.case-page .feature-detail h4 { font:700 14px/1 "DM Sans",Arial,sans-serif !important; letter-spacing:.08em !important; text-transform:uppercase; }.case-page .feature-detail p { max-width:560px; margin:10px 0 0; color:#5d687a; font-size:clamp(15px,1.15vw,18px) !important; line-height:1.45 !important; }@media (max-width:720px) { .case-page .final-eyebrow { margin-bottom:24px; }.case-page .final-design-intro { margin-bottom:32px; padding-bottom:28px; }.case-page .final-feature { padding:34px 0 58px; }.case-page .final-feature::before { position:static; width:42px; height:42px; margin-bottom:20px; }.case-page .final-feature + .final-feature { padding-top:52px; }.case-page .final-upload { min-height:260px; }.case-page .feature-details { grid-template-columns:1fr; }.case-page .feature-detail + .feature-detail { padding-left:0; border-top:1px solid #dde1e8; border-left:0; } }
@media (max-width:720px) { .design-evolution-item:first-child .design-evolution-upload,.design-evolution-item:nth-child(2) .design-evolution-upload { min-height:240px; } }

/* Keep Final design typography consistent with the rest of the Reuse case study. */
.case-page .final-design > h2,
.case-page .final-feature h3 {
  font-family:"DM Serif Display", Georgia, serif !important;
  font-weight:400 !important;
  letter-spacing:-.035em !important;
}

/* A more compact heading scale for the Final design section. */
.case-page .final-design > h2 {
  font-size:clamp(36px,3.7vw,58px) !important;
}

.case-page .final-feature h3 {
  font-size:clamp(26px,2.4vw,40px) !important;
}

/* Align each feature's number, copy, visual, and details to one left edge. */
.case-page .final-feature {
  padding-left:0;
}

.case-page .final-feature::before {
  position:static;
  margin:0 0 22px;
}

.case-page .final-feature + .final-feature::before {
  top:auto;
}

/* Keep the feature heading beside its number, with supporting content full-width below. */
@media (min-width:721px) {
  .case-page .final-feature::before {
    position:absolute;
    top:46px;
    left:0;
    margin:0;
  }

  .case-page .final-feature + .final-feature::before {
    top:64px;
  }

  .case-page .final-feature-label,
  .case-page .final-feature h3 {
    margin-left:94px;
  }

  .case-page .final-feature > p:not(.final-feature-label) {
    max-width:calc(100% - 94px);
    margin-left:94px;
  }
}

/* Entry point shown before the three core features. */
.case-page .final-entry {
  padding:0 0 72px;
  border-bottom:1px solid #dde1e8;
}

.case-page .final-entry-label {
  margin:0 0 12px;
  color:#667287;
  font:700 clamp(14px,1.25vw,19px)/1 "DM Sans",Arial,sans-serif !important;
  letter-spacing:.1em !important;
}

.case-page .final-entry h3 {
  margin:0 0 22px;
  font:400 clamp(26px,2.45vw,36px)/1.08 "DM Serif Display",Georgia,serif !important;
  letter-spacing:-.035em !important;
}

.case-page .final-entry > p:not(.final-entry-label) {
  max-width:980px;
  margin:0 0 30px;
  color:#5d687a;
  font-size:clamp(17px,1.45vw,23px) !important;
  line-height:1.45 !important;
}

.case-page .final-entry-upload {
  min-height:clamp(330px,34vw,480px);
  margin:0;
}

/* Keep the wide V1 user-flow export fully visible and readable. */
.design-evolution-item:first-child .design-evolution-upload {
  background:#fff;
}

.design-evolution-item:first-child .design-evolution-upload img {
  object-fit:contain;
  background:#fff;
}

.design-evolution-item:first-child .design-evolution-upload.has-image {
  cursor:zoom-in;
}

.design-evolution-item:first-child .design-evolution-upload.has-image img {
  transition:transform .45s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}

.design-evolution-item:first-child .design-evolution-upload.has-image:hover img {
  transform:scale(1.015);
  filter:brightness(.96);
}

.design-evolution-item:first-child .design-evolution-upload.has-image span {
  z-index:3;
  border-color:#111;
  color:#111;
  background:rgba(255,255,255,.86);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.design-evolution-item:first-child .design-evolution-upload.has-image:hover span {
  opacity:1;
}

/* The V1 diagram contains two long parallel flows, so preserve its wide ratio. */
.design-evolution-item:first-child .design-evolution-upload {
  width:100%;
  min-height:0;
  height:auto;
  aspect-ratio:2222 / 620;
  margin-left:0;
  margin-right:0;
  overflow:hidden;
}

.design-evolution-item:first-child .design-evolution-upload img {
  width:100%;
  height:100%;
  object-fit:contain;
}

@media (max-width:720px) {
  .design-evolution-item:first-child .design-evolution-upload {
    width:100%;
    min-height:0;
    aspect-ratio:2222 / 620;
  }
}

/* Keep the Donate Materials flow at its original image ratio. */
.case-page .final-upload:has(> img[src$="reuse-depot-feature-donate.png"]) {
  display:block !important;
  width:100% !important;
  aspect-ratio:1140 / 594 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}

.case-page .final-upload:has(> img[src$="reuse-depot-feature-donate.png"]) > img {
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
}

/* V2 separates the overall flow from the Gallery feature so each visual can be read independently. */
.v2-gallery-feature {
  margin-top:38px;
  padding-top:30px;
  border-top:1px solid #ddd;
}

.v2-overall-label {
  margin:30px 0 14px;
  color:#111;
  font:700 clamp(22px,2vw,31px)/1.1 Manrope,Arial,sans-serif !important;
  letter-spacing:-.035em !important;
}

.v2-gallery-label {
  margin:0 0 10px;
  color:#111;
  font:700 clamp(22px,2vw,31px)/1.1 Manrope,Arial,sans-serif !important;
  letter-spacing:-.035em !important;
}

.v2-gallery-copy {
  max-width:720px;
  margin:0 0 20px;
  color:#4f596b;
  font-size:clamp(16px,1.25vw,20px) !important;
  line-height:1.45 !important;
}

.v2-gallery-upload {
  min-height:clamp(300px,32vw,460px);
  background:#f5f5f5;
}

.v2-gallery-upload.has-image { cursor:zoom-in; }

.v2-gallery-upload.has-image img {
  transition:transform .45s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}

.v2-gallery-upload.has-image:hover img {
  transform:scale(1.015);
  filter:brightness(.96);
}

.v2-gallery-upload.has-image span {
  z-index:3;
  border-color:#111;
  color:#111;
  background:rgba(255,255,255,.86);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.v2-gallery-upload.has-image:hover span { opacity:1; }

@media (max-width:720px) {
  .v2-gallery-feature { margin-top:28px; padding-top:24px; }
  .v2-gallery-upload { min-height:260px; }
}

@media (max-width:720px) {
  .case-page .final-entry { padding-bottom:58px; }
  .case-page .final-entry-upload { min-height:240px; }
}

/* Compact reading rhythm: preserve hierarchy while reducing empty vertical space. */
@media (min-width:721px) {
  .case-page { padding-bottom:72px; }

  .case-page section {
    padding:clamp(44px,4.5vw,70px) 0;
  }

  .case-page .research-section {
    padding-top:clamp(36px,4vw,62px);
  }

  .case-page p:not(.research-method):not(.opportunity-label):not(.final-feature-label):not(.quote-role),
  .case-page li,
  .case-page blockquote {
    font-size:clamp(14px,1.08vw,17px) !important;
    line-height:1.42 !important;
  }

  .background-copy h2,
  .research-heading,
  .key-insights h2,
  .experience-breakdown > h2,
  .challenge h2,
  .solution-direction h2,
  .my-role > h2,
  .design-evolution > h2 {
    margin-bottom:22px;
  }

  .research-intro,
  .design-evolution-intro,
  .my-role-intro {
    margin-bottom:30px;
  }

  .stakeholder { min-height:190px; padding:19px; }
  .key-insights { margin-top:44px; }
  .experience-breakdown,
  .direction-shift { margin-top:48px; }
  .direction-conversations { gap:30px; }

  .challenge { padding:clamp(44px,4.5vw,70px) 0; }
  .challenge-question { margin-bottom:30px; }
  .challenge-item,
  .role-card { min-height:250px; padding:24px; }
  .challenge-icon,
  .role-icon { margin-bottom:28px; }

  .design-evolution { padding:clamp(44px,4.5vw,70px) 0; }
  .design-evolution-list { gap:52px; }
  .design-evolution-item:first-child .design-evolution-upload,
  .design-evolution-item:nth-child(2) .design-evolution-upload {
    min-height:clamp(280px,29vw,400px);
  }
  .iteration-learnings { margin-top:22px; padding-top:18px; }

  .case-page .final-design { padding:clamp(52px,5vw,78px) 0; }
  .case-page .final-design-intro { margin-bottom:34px; padding-bottom:28px; }
  .case-page .final-entry { padding-bottom:52px; }
  .case-page .final-entry-upload { min-height:clamp(280px,29vw,400px); }
  .case-page .final-feature { padding-bottom:54px; }
  .case-page .final-feature + .final-feature { padding-top:52px; }
  .case-page .final-feature + .final-feature::before { top:52px; }
  .case-page .final-upload { min-height:clamp(290px,30vw,420px); margin-bottom:26px; }
  .case-page .feature-detail { padding:16px 0; }
}

/* Preserve the V2 flow board at its native proportions so its UI remains readable. */
.design-evolution-item:nth-child(2) > .design-evolution-upload {
  width:min(100%,842px);
  min-height:0;
  aspect-ratio:842 / 864;
  margin-left:0;
  margin-right:0;
  background:#fff;
}

.design-evolution-item:nth-child(2) > .design-evolution-upload img {
  object-fit:contain;
  background:#fff;
}

.design-evolution-item:nth-child(2) > .design-evolution-upload.has-image {
  cursor:zoom-in;
}

.design-evolution-item:nth-child(2) > .design-evolution-upload.has-image img {
  transition:transform .45s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}

.design-evolution-item:nth-child(2) > .design-evolution-upload.has-image:hover img {
  transform:scale(1.015);
  filter:brightness(.96);
}

.design-evolution-item:nth-child(2) > .design-evolution-upload.has-image span {
  z-index:3;
  border-color:#111;
  color:#111;
  background:rgba(255,255,255,.86);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.design-evolution-item:nth-child(2) > .design-evolution-upload.has-image:hover span {
  opacity:1;
}

@media (max-width:720px) {
  .design-evolution-item:nth-child(2) > .design-evolution-upload {
    width:100%;
    min-height:0;
  }
}

/* The Gallery journey is a wide flow diagram, shown without cropping. */
.v2-gallery-upload {
  min-height:0;
  aspect-ratio:1224 / 612;
  background:#fff;
}

.v2-gallery-upload img {
  object-fit:contain;
  background:#fff;
}

@media (max-width:720px) {
  .v2-gallery-upload {
    min-height:0;
  }
}

/* Empty decision-note blocks keep space for the rationale to be added later. */
.v2-image-notes {
  max-width:760px;
  margin-top:24px;
  padding:18px 0 4px;
  border-top:1px solid #ddd;
}

.v2-image-notes h4 {
  margin:0 0 12px;
  color:#111;
  font:700 13px/1 "DM Sans",Arial,sans-serif !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
}

.v2-image-notes ul {
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.v2-image-notes li {
  height:18px;
  border-bottom:1px dashed #d7dce4;
}

.case-page .final-entry-secondary-upload {
  min-height:0;
  aspect-ratio:994 / 518;
  margin-top:24px;
  background:#fff;
}

.case-page .final-entry-secondary-upload img {
  object-fit:contain;
  object-position:center;
}

.case-page .final-entry-secondary-media {
  display:block !important;
  margin-top:40px !important;
}

.case-page .final-entry-secondary-label {
  display:none !important;
}

.case-page .final-entry-secondary-upload {
  position:relative !important;
  overflow:visible !important;
  margin-top:104px !important;
}

.case-page .final-entry-secondary-upload::before {
  content:"Home page";
  position:absolute;
  top:-62px;
  left:0;
  z-index:3;
  color:#171b23;
  font:600 20px/1.3 "DM Sans",Arial,sans-serif;
  letter-spacing:-0.01em;
}

.case-page .final-entry-secondary-media .final-entry-secondary-upload {
  margin-top:0 !important;
}

/* Match the QR entry visual's wide campus-flyer composition. */
.case-page .final-entry-upload {
  min-height:0 !important;
  aspect-ratio:1100 / 556;
}

.case-page .final-entry-qr-caption {
  max-width:720px;
  margin:30px 0 0;
  text-align:left;
}

.case-page .final-entry-qr-caption h4 {
  margin:0 0 8px;
  color:#171b23;
  font:600 16px/1.35 "DM Sans",Arial,sans-serif !important;
}

.case-page .final-entry-qr-caption p {
  margin:0;
  color:#667287;
  font:400 16px/1.55 "DM Sans",Arial,sans-serif !important;
}
.case-page .final-entry-home-caption {
  max-width:720px;
  margin:18px 0 38px;
  text-align:left;
}
.case-page .final-entry-home-caption-label {
  margin:0 0 10px;
  color:#667287;
  font:500 14px/1.35 "DM Sans",Arial,sans-serif !important;
}
.case-page .final-entry-home-caption h4 {
  margin:0 0 8px;
  color:#171b23;
  font:600 16px/1.35 "DM Sans",Arial,sans-serif !important;
}
.case-page .final-entry-home-caption p:not(.final-entry-home-caption-label) {
  margin:0;
  color:#667287;
  font:400 16px/1.55 "DM Sans",Arial,sans-serif !important;
}

/* Preserve the full donation-flow annotation board in Feature 01. */
.case-page .final-entry + .final-feature .final-upload {
  min-height:0 !important;
  aspect-ratio:1010 / 608;
}

/* Preserve the full annotated material-finding flow in Feature 02. */
.case-page .final-entry + .final-feature + .final-feature .final-upload {
  min-height:0 !important;
  aspect-ratio:1312 / 526;
}

/* Preserve the full annotated Gallery flow in Feature 03. */
.case-page .final-entry + .final-feature + .final-feature + .final-feature .final-upload {
  min-height:0 !important;
  aspect-ratio:1048 / 772;
}

/* Keep the header copy inset while its project preview spans the full case width. */
.case-page .hero {
  width:calc(100% + clamp(20px,3vw,46px) + clamp(20px,3vw,46px));
  margin-left:calc(0px - clamp(20px,3vw,46px));
  padding-bottom:clamp(34px,3.5vw,52px);
}

.case-page .hero-content {
  padding:0 clamp(60px,6.5vw,108px);
}

.case-page .hero-preview {
  position:relative;
  display:grid;
  width:100% !important;
  max-width:none;
  min-height:0;
  margin:38px 0 0;
  transform:none;
  aspect-ratio:16 / 7;
}

.case-page .hero-preview img {
  object-fit:contain;
}

.case-page .hero-preview--video {
  background:#e1f0e4;
}

.case-page .hero-preview--video .hero-video-frame {
  position:absolute;
  top:50%;
  left:50%;
  height:78%;
  width:auto;
  aspect-ratio:538 / 1160;
  padding:0;
  border:1px solid #8fa399;
  border-radius:24px;
  box-sizing:border-box;
  background:#fff;
  overflow:hidden;
  transform:translate(-50%,-50%);
}

.case-page .hero-preview--video .hero-video-frame video {
  position:absolute;
  top:50%;
  left:50%;
  width:104%;
  height:104%;
  max-width:none;
  object-fit:cover;
  transform:translate(-50%,-48.8%);
}

.case-page .hero-preview--video > .hero-video-replace {
  display:none;
}

.case-page .hero-preview {
  background:#e2f1e5;
}

.case-page .hero-tags span {
  background:#fff;
}

.case-page .section-tag {
  display:inline-flex;
  margin:0 0 18px;
  padding:7px 12px;
  border:1px solid #cde8da;
  border-radius:999px;
  background:#e4f4ec;
  color:#087a5b;
  font:11px/1 "DM Mono", monospace !important;
  letter-spacing:.03em !important;
}

.case-page .about-project h2,
.case-page .background-copy h2 {
  margin:0 0 28px;
}

.case-page .about-project > div > p:not(.section-tag) {
  color:#4f596b;
}

.case-page .about-project > div > p:not(.section-tag) strong {
  color:#111;
}

.case-page .background-copy p {
  color:#4f596b;
}

.case-page .background-copy p strong {
  color:#111;
}

.case-page .research-intro strong {
  color:#111;
}

.case-page .stakeholder h3 {
  font-family:"DM Sans",Arial,sans-serif !important;
  font-size:clamp(18px,1.55vw,26px) !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
  line-height:1.08;
}

.case-page .breakdown-item {
  position:relative;
  background:#fff;
}

.case-page .breakdown-emoji {
  position:absolute;
  top:22px;
  right:24px;
  font-size:27px;
  line-height:1;
}

.case-page .direction-shift,
.case-page .direction-shift > p:not(.direction-conclusion) {
  max-width:1080px;
}

.case-page .direction-shift {
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

.case-page .direction-shift .direction-conclusion {
  margin-left:0;
  margin-right:0;
  text-align:left;
}

.case-page .direction-conversations {
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

.case-page .direction-quote.is-reversed {
  transform:none;
}

.case-page .key-insights {
  padding:0;
  border:0;
  background:transparent;
}

.case-page .key-insights .insight-list {
  padding:0 clamp(22px,3vw,42px);
  border:0;
  border-radius:0;
  background:#eef8f4;
}

.case-page .key-insights .section-tag {
  margin-bottom:18px;
}

.case-page .background-copy p {
  max-width:940px;
}

.case-page .about-project > div > p:not(.section-tag) {
  font-size:26px !important;
}

@media (max-width:720px) {
  .case-page .about-project > div > p:not(.section-tag) { font-size:20px !important; }
}

.case-page .hero-facts dt {
  font-size:10px;
}

.case-page .hero-facts dd {
  font-size:14px;
  line-height:1.35;
}

.case-page .hero .lead {
  max-width:980px;
  font-size:clamp(25px,2.2vw,34px) !important;
  line-height:1.3;
}

@media (min-width:1100px) and (max-width:1749px) {
  .case-page .hero {
    width:calc(100% + 210px + clamp(20px,3vw,46px));
    margin-left:-210px;
  }
}

@media (max-width:720px) {
  .case-page .hero-content { padding:0 36px; }
  .case-page .hero-preview { margin-top:30px; aspect-ratio:4 / 3; }
}

.case-page .back-to-work {
  display:inline-flex;
  align-items:center;
  margin:0 0 22px;
  color:#667287;
  font:600 14px/1 "DM Sans",Arial,sans-serif;
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}

.case-page .back-to-work:hover {
  color:#111;
  transform:translateX(-3px);
}

.case-page .back-to-work span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:1em;
  margin-right:8px;
  font:400 30px/1 Arial,sans-serif;
}

/* Use a clean white ground throughout the Reuse Depot case study. */
html,
body,
.case-page,
.shell {
  background:#fff;
}

/* Highlight the research synthesis as a distinct, quiet-green insight panel. */
.case-page .key-insights {
  margin-top:52px;
  padding:clamp(26px,3vw,42px);
  border:1px solid #a8ddc4;
  border-radius:20px;
  background:#eef8f4;
}

.case-page .key-insights h2 {
  margin-bottom:22px;
}

.case-page .key-insights .insight-list,
.case-page .key-insights .key-insight {
  border-color:#c5e6d5;
}

/* A compact chapter break between the design process and the final product. */
.case-page .final-transition {
  display:block;
  width:100vw;
  min-height:0;
  margin:clamp(44px,6vw,78px) 0 0 calc(50% - 50vw);
  padding:0;
  overflow:hidden;
  border:0;
  background:#003f36;
  color:#fff;
}

.final-transition-track {
  display:flex;
  width:max-content;
  align-items:center;
  gap:clamp(54px,7vw,118px);
  padding:18px 0 20px;
  white-space:nowrap;
  animation:final-design-marquee 32s linear infinite;
}

.final-transition-track span {
  display:block;
  font:700 clamp(25px,2.35vw,38px)/1 Manrope,Arial,sans-serif !important;
  letter-spacing:-.045em !important;
}

@keyframes final-design-marquee {
  from { transform:translateX(0); }
  to { transform:translateX(-32%); }
}

@media (prefers-reduced-motion:reduce) {
  .final-transition-track { animation:none; }
}

@media (max-width:720px) {
  .case-page .final-transition { margin-top:42px; }
  .final-transition-track { gap:42px; padding:16px 0 18px; }
}

/* Keep the role summary compact and easy to scan. */
.case-page .role-grid { gap:14px; }

.case-page .role-card {
  min-height:228px;
  padding:22px;
}

.case-page .role-icon {
  width:48px;
  height:48px;
  margin-bottom:22px;
  border-radius:14px;
  font-size:24px;
}

.case-page .role-card h3 {
  margin-bottom:10px;
  font-size:clamp(18px,1.4vw,22px);
}

/* Tighter type scale for the research insight summary. */
.case-page .key-insights h2 {
  margin-bottom:18px;
  font-size:clamp(26px,2.35vw,36px);
}

.case-page .key-insight {
  grid-template-columns:150px minmax(0,1fr);
  gap:20px;
  padding:20px 0;
}

.case-page .insight-label {
  font-size:10px !important;
}

.case-page .key-insight h3 {
  margin-bottom:6px;
  font-size:clamp(18px,1.4vw,23px);
}

.case-page .key-insight div > p {
  font-size:clamp(13px,1vw,15px) !important;
}

@media (max-width:720px) {
  .case-page .key-insight { grid-template-columns:56px minmax(0,1fr); gap:12px; }
}

/* Keep the uploaded project preview clean until it is intentionally replaced. */
.case-page .hero-preview:has(img) > span {
  opacity:0;
  transition:opacity .2s ease;
}

.case-page .hero-preview:has(img):hover > span,
.case-page .hero-preview:has(img):focus-within > span {
  opacity:.82;
}

/* Apply the display face across Reuse Depot headings. */
.case-page h1,
.case-page h2,
.case-page h3,
.case-page h4 {
  font-family:"DM Serif Display", Georgia, serif !important;
  font-weight:400 !important;
  letter-spacing:-.035em !important;
}

/* Keep the Key insights tag outside its highlighted insight panel. */
.case-page .key-insights {
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

.case-page .key-insights .insight-list {
  padding:0 clamp(22px,3vw,42px);
  border:1px solid #a8ddc4;
  border-radius:20px;
  background:#eef8f4;
}

.case-page .challenge-question {
  max-width:1120px;
  margin:0 0 44px;
  color:#111;
  font-family:var(--rd-body) !important;
  font-size:clamp(22px,1.8vw,29px) !important;
  font-weight:300 !important;
  line-height:1.3 !important;
  letter-spacing:-.015em !important;
}

.case-page .challenge .section-tag {
  margin-bottom:18px;
}

.case-page .challenge-list-heading {
  margin:0 0 22px;
  font-size:clamp(24px,2vw,32px);
  line-height:1.1;
}

.case-page .solution-direction > h2 {
  font-size:clamp(24px,2vw,32px) !important;
  line-height:1.1;
  font-family:var(--rd-body) !important;
  font-weight:600 !important;
  letter-spacing:-.025em !important;
}

.case-page .design-evolution > h2 {
  font-size:clamp(24px,2vw,32px) !important;
  line-height:1.1;
}

.case-page .v2-user-feedback {
  max-width:860px;
  margin:28px 0 42px;
  padding:20px 0;
  border-top:1px solid #d9dee7;
  border-bottom:1px solid #d9dee7;
}

.case-page .v2-user-feedback h3 {
  margin:0 0 8px;
  color:#111;
  font:600 15px/1.25 "DM Sans",Arial,sans-serif !important;
  letter-spacing:0 !important;
}

.case-page .v2-user-feedback ul {
  display:grid;
  gap:8px;
  margin:0;
  padding-left:20px;
  color:#69768d;
  font-size:16px !important;
}

/* Keep pain-point titles aligned with the body typography. */
.case-page .breakdown-item h3 {
  font-family:"DM Sans",Arial,sans-serif !important;
  font-size:clamp(19px,1.55vw,24px) !important;
  font-weight:600 !important;
  letter-spacing:-.025em !important;
}

/* A little more breathing room for long-form case study copy. */
.case-page p:not(.section-tag):not(.research-method):not(.opportunity-label):not(.final-feature-label):not(.quote-role):not(.breakdown-label):not(.insight-label):not(.design-evolution-label):not(.final-eyebrow),
.case-page li,
.case-page blockquote {
  line-height:1.55 !important;
}

.case-page .research-intro,
.case-page .key-insight div > p,
.case-page .challenge-item div > p:last-child,
.case-page .solution-direction > p:not(.solution-direction-highlight),
.case-page .my-role-intro,
.case-page .my-role-detail,
.case-page .role-card p,
.case-page .direction-shift > p:not(.direction-conclusion),
.case-page .direction-bubble p,
.case-page .design-evolution-intro,
.case-page .design-evolution-copy,
.case-page .design-evolution-changes,
.case-page .iteration-learnings p,
.case-page .iteration-learnings span,
.case-page .final-design-intro,
.case-page .final-feature > p:not(.final-feature-label),
.case-page .feature-detail p {
  line-height:1.55 !important;
}

/* Research-card titles use the same readable sans-serif treatment. */
.case-page .stakeholder h3 {
  font-family:"DM Sans",Arial,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
}

.case-page .direction-shift > p strong {
  color:#111;
  font-weight:700;
}

.case-page .key-insight h3 {
  font-family:"DM Sans",Arial,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
}

/* Keep challenge-card titles consistent with the insight typography. */
.case-page .challenge-item h3 {
  font-family:"DM Sans",Arial,sans-serif !important;
  font-size:clamp(20px,1.55vw,25px) !important;
  font-weight:500 !important;
  letter-spacing:-.025em !important;
}

.case-page .role-card h3 {
  font-family:"DM Sans",Arial,sans-serif !important;
  font-weight:500 !important;
  letter-spacing:-.025em !important;
}

.case-page .solution-direction > p strong {
  color:#111 !important;
}

.case-page .design-evolution-copy strong {
  color:#111 !important;
  font-weight:700 !important;
}

/* Feedback-to-response relationship in the V2 learning list. */
@media (min-width:721px) {
  .iteration-learnings li {
    grid-template-columns:minmax(0,.9fr) 42px minmax(0,1.1fr);
    gap:12px;
  }
  .iteration-learnings li::before {
    display:none;
  }
  .iteration-learnings li::after {
    content:"→";
    grid-column:2;
    grid-row:1;
    align-self:start;
    justify-self:center;
    margin-top:0;
    color:#8b96a7;
    font:400 24px/1 "DM Sans",Arial,sans-serif;
  }
  .iteration-learnings li p { grid-column:1; grid-row:1; }
  .iteration-learnings li span { grid-column:3; grid-row:1; }
}

/* Reusable evidence beneath each final-design flow. */
.case-page .feature-details--three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.case-page .feature-details--three .feature-detail h4 { letter-spacing:0 !important; text-transform:none; }
.case-page .final-entry-details { max-width:none; margin:0 0 32px; text-align:left; }
@media (max-width:720px) { .case-page .feature-details--three { grid-template-columns:1fr; } }

/* Reuse Depot — unified, reading-first type scale. */
.case-page {
  --rd-display:"DM Serif Display", Georgia, serif;
  --rd-body:"DM Sans", Arial, sans-serif;
  --rd-hero:clamp(42px, 4vw, 56px);
  --rd-section:clamp(28px, 2.4vw, 36px);
  /* Keep supporting headings distinct without competing with the reading copy. */
  --rd-subsection:clamp(20px, 1.65vw, 24px);
  --rd-card:clamp(17px, 1.2vw, 19px);
  --rd-lead:17px;
  --rd-body-size:16px;
  --rd-small:14px;
  --rd-meta:13px;
}

/* Page and chapter headings remain distinct from the sans-serif reading copy. */
.case-page .hero h1,
.case-page .hero-content h1 {
  font-family:var(--rd-display) !important;
  font-size:var(--rd-hero) !important;
  font-weight:400 !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
}

.case-page :is(
  .about-project,
  .background-section,
  .research-section,
  .direction-shift,
  .solution-direction,
  .my-role,
  .design-evolution,
  .workflow-refinement,
  .ui-design-iterations,
  .final-design,
  .reflection
) > h2 {
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

/* Card and feature headings use one clear, lighter sans-serif level. */
.case-page :is(
  .stakeholder,
  .breakdown-item,
  .key-insight,
  .challenge-item,
  .role-card,
  .feature-detail
) :is(h3, h4),
.case-page .final-feature h3 {
  font-family:var(--rd-body) !important;
  font-size:var(--rd-card) !important;
  font-weight:600 !important;
  line-height:1.22 !important;
  letter-spacing:-.025em !important;
}

.case-page :is(.challenge-list-heading, .solution-direction > h2) {
  font-size:var(--rd-subsection) !important;
  line-height:1.2 !important;
}

.case-page .design-evolution > h2 {
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .design-evolution-item:first-child > h3 {
  font-family:Manrope,Arial,sans-serif !important;
  font-size:clamp(18px,1.45vw,23px) !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

/* This earlier, more generous rule is intentionally tightened to match card headings. */
.case-page .challenge-item h3 {
  font-size:var(--rd-card) !important;
}

/* Leads introduce each section; body copy follows a comfortable reading rhythm. */
.case-page :is(
  .research-intro,
  .my-role-intro,
  .direction-shift > p:not(.direction-conclusion),
  .solution-direction > p:not(.solution-direction-highlight),
  .design-evolution-intro,
  .final-design-intro
) {
  font-size:var(--rd-lead) !important;
  line-height:1.58 !important;
}

.case-page :is(
  .about-project p,
  .background-section p,
  .research-section p,
  .my-role-detail,
  .design-evolution-copy,
  .design-evolution-changes,
  .direction-bubble p,
  .final-feature > p:not(.final-feature-label)
) {
  font-size:var(--rd-body-size) !important;
  line-height:1.6 !important;
}

.case-page :is(
  .stakeholder p,
  .breakdown-item p,
  .key-insight div > p,
  .challenge-item div > p:last-child,
  .role-card p,
  .feature-detail p,
  .iteration-learnings p,
  .iteration-learnings span,
  .v2-user-feedback li
) {
  font-size:var(--rd-small) !important;
  line-height:1.55 !important;
}

/* Tags, labels and supporting metadata deliberately share one quiet level. */
.case-page :is(
  .section-tag,
  .research-method,
  .opportunity-label,
  .final-feature-label,
  .quote-role,
  .breakdown-label,
  .insight-label,
  .design-evolution-label,
  .final-eyebrow
) {
  font-family:var(--rd-body) !important;
  font-size:var(--rd-meta) !important;
  font-weight:500 !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

@media (max-width:720px) {
  .case-page {
    --rd-hero:clamp(38px, 11vw, 46px);
    --rd-section:clamp(27px, 8vw, 32px);
    --rd-subsection:clamp(20px, 6vw, 23px);
    --rd-card:17px;
    --rd-lead:17px;
    --rd-body-size:16px;
    --rd-small:14px;
  }
}

/* Reuse Depot hero — an editorial split layout inspired by the supplied reference. */
@media (min-width:900px) {
  .case-page .hero {
    width:100vw;
    min-height:calc(100svh - 90px);
    margin-left:calc(50% - 50vw);
    padding:clamp(42px,4vw,64px) clamp(32px,4vw,72px);
    display:grid;
    grid-template-columns:minmax(380px,.88fr) minmax(600px,1.12fr);
    gap:clamp(42px,5vw,78px);
    align-items:center;
  }

  .case-page .hero-content {
    padding:0;
    transform:translateY(-36px);
  }

  .case-page .hero-tags {
    margin-bottom:clamp(30px,3vw,42px);
  }

  .case-page .hero h1,
  .case-page .hero-content h1 {
    max-width:620px;
  }

  .case-page .hero .lead {
    max-width:590px;
    margin:22px 0 clamp(38px,4vw,56px);
    line-height:1.5 !important;
  }

  .case-page .hero-facts {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 34px;
    width:100%;
    padding-top:24px;
  }

  .case-page .hero-facts > div {
    padding-bottom:6px;
  }

  .case-page .hero-preview {
    align-self:stretch;
    width:100% !important;
    min-height:calc(100svh - 174px);
    margin:0;
    aspect-ratio:auto;
    border-radius:24px;
    overflow:hidden;
  }

  .case-page .hero-preview img {
    object-fit:contain;
  }
}

@media (min-width:900px) and (max-width:1320px) {
  .case-page .hero {
    grid-template-columns:minmax(340px,.9fr) minmax(460px,1.1fr);
    gap:38px;
  }

  .case-page .hero-preview {
    min-height:calc(100svh - 174px);
  }
}

@media (max-width:899px) {
  .case-page .hero {
    display:block;
    width:auto;
    margin:0;
  }

  .case-page .hero-content {
    padding:0;
    transform:none;
  }

  .case-page .hero-preview {
    margin-top:38px;
  }
}

/* Break the full-screen hero out of the case-study content inset at each desktop range. */
@media (min-width:900px) and (max-width:1099px) {
  .case-page .hero { margin-left:calc(0px - clamp(20px,3vw,46px)); }
}

@media (min-width:1100px) and (max-width:1749px) {
  .case-page .hero { margin-left:-210px; }
}

@media (min-width:1750px) {
  .case-page .hero { margin-left:calc((100vw - 1380px) / -2 - 46px); }
}

.case-page .overview-design-goal {
  margin-top:0;
}

.case-page .overview-design-goal h2 {
  margin:0 0 28px;
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .about-project .overview-design-goal p {
  max-width:980px;
  margin:0;
  color:#4f596b;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.6 !important;
}

.case-page .overview-pain-points {
  margin-top:0;
}

.case-page .overview-summary-layout {
  display:grid;
  gap:clamp(36px,4.5vw,58px);
  margin-top:clamp(20px,2.5vw,32px);
}

.case-page .overview-summary-row {
  display:grid;
  grid-template-columns:minmax(240px,.34fr) minmax(0,1fr);
  gap:clamp(44px,7vw,108px);
  align-items:start;
  padding:0;
  border-top:0;
  border-bottom:0;
}

.case-page .about-project {
  padding-top:clamp(44px,5vw,68px);
  padding-bottom:clamp(50px,6vw,78px);
  border-top:0;
  border-bottom:0;
}

.case-page .overview-summary-row > h2 {
  margin:0 !important;
}

.case-page .overview-summary-content {
  min-width:0;
}

.case-page .overview-summary-content > p {
  max-width:none !important;
  color:#4f596b;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.45 !important;
}

.case-page .overview-summary-content strong {
  color:#111;
}

.case-page .overview-summary-content > p + p {
  margin-top:20px;
}

.case-page .research-section .research-intro {
  max-width:820px;
  margin:0 0 clamp(38px,5vw,58px);
}

.case-page .research-section .research-intro strong {
  color:#111;
}

.case-page .interview-conversations {
  max-width:980px;
  margin-top:0;
  margin-bottom:clamp(64px,8vw,96px);
}

.case-page .feature-priorities {
  padding:clamp(34px,4vw,52px) 0 clamp(62px,7vw,96px);
}

.case-page .feature-priorities > h2 {
  margin:0 0 18px;
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .feature-priorities-intro {
  max-width:900px;
  margin:0 0 clamp(34px,4vw,48px);
  color:#4f596b;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.55 !important;
}

.case-page .feature-priority-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.case-page .feature-priority-item {
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:22px;
  align-items:start;
  min-height:0;
  padding:24px 28px 20px;
  border:1px solid #e0e4e8;
  border-radius:18px;
  background:#fff;
}

.case-page .feature-priority-icon {
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:14px;
  background:#eef8f4;
  font-size:25px;
}

.case-page .feature-priority-item h3 {
  margin:0 0 7px;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-card) !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  letter-spacing:-.015em !important;
}

.case-page .feature-priority-item p {
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.5 !important;
}

@media (max-width:900px) {
  .case-page .feature-priority-list { grid-template-columns:1fr; }
  .case-page .feature-priority-item { min-height:0; }
}

@media (max-width:620px) {
  .case-page .feature-priority-item { grid-template-columns:48px minmax(0,1fr); gap:16px; padding:18px; }
  .case-page .feature-priority-icon { width:44px; height:44px; font-size:21px; }
}

@media (max-width:820px) {
  .case-page .overview-summary-row { grid-template-columns:1fr; gap:24px; }
}

.case-page .overview-pain-points h2 {
  margin:0 0 28px;
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .overview-pain-points ul {
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:overview-pain-point;
}

.case-page .overview-pain-points li {
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  gap:18px;
  align-items:start;
  margin:0;
  padding:8px 0;
  border-top:0;
  border-bottom:0;
  color:#4f596b;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.45 !important;
  counter-increment:overview-pain-point;
}

.case-page .overview-pain-points li::before {
  content:"0" counter(overview-pain-point) ".";
  color:#9aa4b4;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size);
  font-weight:400;
  line-height:1.45;
}

@media (max-width:720px) {
  .case-page .overview-pain-points li { grid-template-columns:50px minmax(0,1fr); gap:12px; }
}

.case-page .overview-solution {
  margin-top:clamp(54px,6vw,82px);
}

.case-page .overview-solution h2 {
  margin:0 0 clamp(32px,4vw,48px);
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .overview-solution-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
  align-items:start;
}

.case-page .overview-solution-grid figure {
  margin:0;
}

.case-page .overview-solution-grid figcaption {
  width:max-content;
  max-width:100%;
  margin:0 auto 18px;
  padding:8px 16px;
  border-radius:999px;
  background:#f3f5f4;
  color:#4f596b;
  font:500 14px/1.2 var(--rd-body);
  text-align:center;
}

.case-page .overview-phone-upload {
  width:min(100%,250px);
  min-height:0;
  margin:0 auto;
  aspect-ratio:9 / 19.5;
  border:1px solid #aeb7b2;
  border-radius:38px;
  background:#f7faf8;
  box-shadow:0 16px 34px rgba(42,70,58,.1);
}

.case-page .overview-phone-upload::before {
  content:"";
  position:absolute;
  top:12px;
  left:50%;
  z-index:1;
  width:34%;
  height:20px;
  border-radius:999px;
  background:#111;
  transform:translateX(-50%);
}

.case-page .overview-phone-upload span {
  color:#6d7884;
  border-color:#aeb7b2;
  background:#fff;
}

.case-page .overview-phone-upload img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:37px;
}

.case-page .overview-phone-upload--full-screen {
  aspect-ratio:470 / 986;
  border:0;
  border-radius:40px;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
}

.case-page .overview-phone-upload--full-screen::before {
  display:none;
}

.case-page .overview-phone-upload--full-screen img {
  object-fit:cover;
  border-radius:40px;
}

.case-page .overview-phone-upload--gallery-screen {
  aspect-ratio:470 / 986;
  overflow:hidden;
  border:1px solid #8fa399;
  border-radius:40px;
  box-sizing:border-box;
  clip-path:none;
}

.case-page .overview-phone-upload--gallery-screen img {
  object-fit:cover;
  border-radius:39px;
  clip-path:none;
}


.case-page .v2-screen-grid .v2-donate-screen {
  width:min(100%,270px);
  aspect-ratio:538 / 1128;
}

.case-page .v2-screen-grid .v2-donate-screen img {
  object-fit:contain;
  border-radius:38px;
}

.case-page .v2-screen-grid .v2-find-screen {
  width:min(100%,270px);
  aspect-ratio:538 / 1128;
}

.case-page .v2-screen-grid .v2-find-screen img {
  object-fit:contain;
  border-radius:38px;
}

.case-page .v2-screen-grid .v2-gallery-screen {
  width:min(100%,270px);
  aspect-ratio:538 / 1128;
  background:#fff;
}

.case-page .v2-screen-grid .v2-gallery-screen img {
  object-fit:cover;
  border-radius:38px;
}

.case-page .v3-system-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;
  max-width:1100px;
  margin:32px auto 0;
  justify-content:center;
  align-items:start;
  gap:clamp(16px,2vw,28px);
}

.case-page .v3-system-grid figure { margin:0; }

.case-page .v3-system-grid figcaption {
  width:max-content;
  max-width:100%;
  margin:0 auto 18px;
  padding:8px 16px;
  border-radius:999px;
  background:#f3f5f4;
  color:#4f596b;
  font:500 14px/1.2 var(--rd-body);
  text-align:center;
}

.case-page .v3-system-screen {
  width:100%;
  min-height:0;
  aspect-ratio:9 / 19.5;
  border:0;
  border-radius:40px;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
}

.case-page .v3-system-screen img {
  display:block;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:40px;
  transform:scale(1.018);
  transform-origin:center;
}

.case-page .v3-system-screen::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  box-sizing:border-box;
  border:1px solid #82978d;
  border-radius:40px;
  pointer-events:none;
}

.case-page .v3-system-screen span { display:none; }

.case-page .v3-final-direction {
  max-width:980px;
  margin:clamp(64px,7vw,88px) auto clamp(26px,3vw,38px);
}

.case-page .v3-final-direction h3 {
  margin:0 0 10px;
  color:#111;
  font-family:var(--rd-body) !important;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  letter-spacing:-.015em !important;
}

.case-page .v3-final-direction p {
  margin:0;
  color:#111;
  font-family:var(--rd-body) !important;
  font-size:clamp(17px,1.25vw,19px) !important;
  font-weight:400 !important;
  line-height:1.5 !important;
}

@media (max-width:1100px) {
  .case-page .v3-system-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:600px;
    row-gap:38px;
  }
}

@media (max-width:620px) {
  .case-page .v3-system-grid {
    grid-template-columns:minmax(0,1fr);
    max-width:300px;
  }
}

.case-page .overview-phone-upload--full-screen:has(img) span {
  opacity:0;
  transition:opacity .2s ease;
}

.case-page .overview-phone-upload--full-screen:has(img):hover span {
  opacity:.78;
}

@media (max-width:820px) {
  .case-page .overview-solution-grid { grid-template-columns:1fr; gap:42px; }
  .case-page .overview-phone-upload { width:min(100%,300px); }
  .case-page .v2-screen-grid .v2-donate-screen { width:min(100%,300px); }
  .case-page .v2-screen-grid .v2-find-screen { width:min(100%,300px); }
  .case-page .v2-screen-grid .v2-gallery-screen { width:min(100%,300px); }
}

.case-page .solution-direction > .solution-direction-statement {
  max-width:1100px;
  margin:0;
  font-family:var(--rd-body) !important;
  font-size:clamp(20px,1.55vw,26px) !important;
  font-weight:300 !important;
  line-height:1.3 !important;
  letter-spacing:-.015em !important;
}

.case-page .solution-direction {
  border-top:0 !important;
  padding-bottom:clamp(28px,3.5vw,44px) !important;
}

/* Final-design entry point: editorial copy on the left, supporting visuals on the right. */
.case-page .final-entry-layout {
  display:grid;
  grid-template-columns:minmax(340px,.82fr) minmax(520px,1.18fr);
  gap:clamp(36px,5vw,72px);
  align-items:center;
  width:100%;
  max-width:1180px;
  margin:0 auto;
}

.case-page .final-entry-copy {
  align-self:center;
  padding-top:0;
}

.case-page .final-entry-copy > p:not(.final-entry-label) {
  max-width:480px;
  margin:0;
  color:#5d687a;
  font-size:var(--rd-body-size) !important;
  line-height:1.6 !important;
}

.case-page .final-entry-media {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  width:100%;
}

.case-page .final-entry-media .final-entry-upload {
  flex:0 0 100%;
  width:100%;
  max-width:none;
  min-height:0 !important;
  aspect-ratio:1124 / 894 !important;
}

.case-page .final-entry-media .final-entry-upload img {
  object-fit:contain;
}

.case-page .final-entry-secondary-upload {
  margin-top:48px !important;
}

.case-page .final-entry-signin {
  max-width:480px;
  margin-top:24px;
  padding:22px 24px;
  border-radius:18px;
  background:#f5f6f7;
}

.case-page .final-entry-signin h4 {
  margin:0 0 10px;
  color:#171b23;
  font-family:var(--rd-body) !important;
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.015em;
}

.case-page .final-entry-signin p {
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

.case-page .final-entry-secondary-upload::before {
  display:none;
}

@media (max-width:900px) {
  .case-page .final-entry-layout { grid-template-columns:1fr; gap:36px; }
  .case-page .final-entry-copy { padding-top:0; }
}

.case-page .final-homepage {
  padding:clamp(72px,8vw,112px) 0;
  border-bottom:1px solid #dde1e8;
}

.case-page .final-homepage-layout {
  display:grid;
  grid-template-columns:minmax(280px,420px) minmax(300px,520px);
  gap:clamp(36px,5vw,76px);
  align-items:center;
  justify-content:center;
}

.case-page .final-homepage-media {
  display:grid;
  place-items:center;
}

.case-page .final-homepage-upload {
  width:min(100%,340px);
  min-height:0;
  aspect-ratio:514 / 1100;
  border:0;
  border-radius:44px;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
}

.case-page .final-homepage-upload::before {
  display:none;
}

.case-page .final-homepage-upload img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:44px;
  transform:scale(1.012);
  transform-origin:center;
}

.case-page .final-homepage-copy h3 {
  margin:0 0 24px;
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .final-homepage-copy h4 {
  margin:0 0 14px;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-card) !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  letter-spacing:-.02em !important;
}

.case-page .final-homepage-copy p {
  max-width:520px;
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.6 !important;
}

.case-page .final-homepage-features {
  display:grid;
  align-content:space-between;
  gap:18px;
  min-height:500px;
  margin-top:24px;
}

.case-page .final-homepage-features article {
  position:relative;
  padding:clamp(14px,1.3vw,18px) clamp(20px,2.2vw,28px);
  border-radius:18px;
  background:#f5f6f7;
}

@media (min-width:901px) {
  .case-page .final-homepage-features article:first-child::before {
    content:"";
    position:absolute;
    top:-36px;
    right:100%;
    width:clamp(104px,8vw,138px);
    height:calc(50% + 36px);
    background:
      linear-gradient(#6f9484,#6f9484) left top / 72% 2px no-repeat,
      linear-gradient(#6f9484,#6f9484) 72% top / 2px 100% no-repeat,
      linear-gradient(#6f9484,#6f9484) right bottom / 28% 2px no-repeat;
  }

  .case-page .final-homepage-features article:first-child::after {
    content:"";
    position:absolute;
    top:50%;
    left:-15px;
    width:13px;
    height:13px;
    border-top:2px solid #6f9484;
    border-right:2px solid #6f9484;
    transform:translateY(-50%) rotate(45deg);
  }
}

.case-page .final-homepage-features h5 {
  margin:0 0 6px;
  color:#171b23;
  font-family:var(--rd-body) !important;
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.015em;
}

.case-page .final-homepage-features article p {
  margin:0;
  color:#5d687a;
  font-size:15px !important;
  line-height:1.55 !important;
}

.case-page .final-homepage-copy {
  align-self:center;
  padding-top:0;
  transform:translateY(-48px);
}

@media (max-width:900px) {
  .case-page .final-homepage-layout { grid-template-columns:1fr; gap:42px; }
  .case-page .final-homepage-copy { order:-1; padding-top:0; transform:none; }
  .case-page .final-homepage-features { min-height:0; gap:14px; margin-top:30px; }
  .case-page .final-homepage-upload { width:min(100%,330px); }
}

/* Donate feature: supporting copy on the left and one large mobile screen on the right. */
.case-page .final-feature--split {
  display:grid;
  grid-template-columns:minmax(320px,.78fr) minmax(360px,.92fr);
  grid-template-rows:auto auto auto 1fr;
  column-gap:clamp(54px,8vw,120px);
  align-items:start;
  padding:clamp(72px,8vw,112px) 0 !important;
}

.case-page .final-feature--split::before {
  display:none;
}

.case-page .final-feature--split > .final-feature-label,
.case-page .final-feature--split > h3,
.case-page .final-feature--split > p:not(.final-feature-label),
.case-page .final-feature--split > .feature-details {
  grid-column:1;
  max-width:520px;
  margin-left:0 !important;
}

.case-page .final-feature--split > .final-feature-label { grid-row:1; }
.case-page .final-feature--split > h3 { grid-row:2; }
.case-page .final-feature--split > p:not(.final-feature-label) { grid-row:3; }

.case-page .final-feature--donate-reverse > .final-feature-label,
.case-page .final-feature--donate-reverse > h3,
.case-page .final-feature--donate-reverse > p:not(.final-feature-label),
.case-page .final-feature--donate-reverse > .donate-feature-intros {
  grid-column:2;
}

.case-page .final-feature--donate-reverse > .final-feature-phone-upload {
  grid-column:1;
}

.case-page .final-feature--donate-reverse > h3 { grid-row:1; }
.case-page .final-feature--donate-reverse > p:not(.final-feature-label) { grid-row:2; }
.case-page .final-feature--donate-reverse > .donate-feature-intros { grid-row:3; }

.case-page .final-feature--find-split > h3 { grid-row:1; }
.case-page .final-feature--find-split > p:not(.final-feature-label) { grid-row:2; }
.case-page .final-feature--find-split { border-top:0 !important; }
.case-page .final-feature--find-split > .find-feature-intros {
  grid-column:1;
  grid-row:3;
}

.case-page .donate-feature-intros {
  display:grid;
  gap:14px;
  width:100%;
  max-width:520px;
  margin-top:clamp(30px,4vw,48px);
}

.case-page .donate-feature-intros article {
  padding:clamp(20px,2.2vw,28px);
  border-radius:18px;
  background:#f5f6f7;
}

.case-page .donate-feature-intros h4 {
  margin:0 0 10px;
  color:#171b23;
  font-family:var(--rd-body) !important;
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.015em;
}

.case-page .donate-feature-intros p {
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

/* Match Donate and Find feature-card type exactly to the Home page cards. */
.case-page :is(.donate-feature-intros,.find-feature-intros) h4 {
  margin:0 0 6px;
  color:#171b23;
  font-family:var(--rd-body) !important;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  letter-spacing:-.015em !important;
}

.case-page :is(.donate-feature-intros,.find-feature-intros) p {
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  letter-spacing:normal !important;
}

.case-page .final-feature--donate-reverse > h3 {
  margin:0 0 24px;
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .final-feature--find-split > h3 {
  margin:0 0 24px;
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .final-feature--donate-reverse > p:not(.final-feature-label) {
  max-width:520px;
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.6 !important;
}

.case-page .final-feature--find-split > p:not(.final-feature-label) {
  max-width:520px;
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.6 !important;
}

.case-page .final-feature--gallery-split > h3 {
  margin:0 0 24px;
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .gallery-extensions {
  display:grid;
  gap:clamp(72px,9vw,120px);
  padding:clamp(24px,4vw,48px) 0 clamp(78px,9vw,120px);
}

.case-page .gallery-extension {
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(360px,1fr);
  gap:clamp(54px,8vw,120px);
  align-items:center;
}

.case-page .gallery-extension + .gallery-extension {
  padding-top:clamp(64px,8vw,104px);
  border-top:1px solid #dde1e8;
}

.case-page .gallery-extension-copy {
  max-width:520px;
}

.case-page .gallery-extension--profile .gallery-extension-copy {
  grid-column:1;
  grid-row:1;
  align-self:center;
  max-width:520px;
}

@media (min-width:901px) {
  .case-page .gallery-extension--profile .gallery-extension-copy {
    transform:translateX(clamp(22px,2vw,32px));
  }
}

.case-page .gallery-extension--profile > .gallery-extension-screen {
  grid-column:2;
  grid-row:1;
}

.case-page .gallery-extension--profile .profile-feature-intros {
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:clamp(30px,4vw,46px);
}

.case-page .profile-feature-details {
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2vw,24px);
  margin-top:clamp(28px,3vw,42px);
}

.case-page .profile-feature-details article {
  padding:0;
}

.case-page .profile-feature-details h4 {
  margin:0 0 10px;
  font-family:var(--rd-body) !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
}

.case-page .profile-feature-details p {
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

.case-page .gallery-extension--profile .profile-feature-intros article {
  padding:clamp(20px,2.2vw,28px);
  border-radius:18px;
  background:#f5f6f7;
}

.case-page .gallery-extension--profile .profile-feature-intros article:first-child {
  order:3;
}

.case-page .gallery-extension--profile .profile-feature-intros article:nth-child(2) {
  order:1;
}

.case-page .gallery-extension--profile .profile-feature-intros article:nth-child(3) {
  order:2;
}

.case-page .gallery-extension--profile .profile-feature-intros h4 {
  margin:0 0 10px;
  font-family:var(--rd-body) !important;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
}

.case-page .gallery-extension--profile .profile-feature-intros p {
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

.case-page .point-system-showcase {
  margin-top:clamp(64px,8vw,112px);
  padding:clamp(44px,6vw,76px) clamp(24px,4vw,56px);
  border-radius:32px;
  background:#f3f6f8;
}

.case-page .point-system-copy {
  max-width:900px;
  margin:0 auto clamp(40px,5vw,64px);
  text-align:center;
}

.case-page .point-system-copy h3 {
  margin:0 0 18px;
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .point-system-copy p {
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.6 !important;
}

.case-page .point-system-copy a {
  color:#2f7d61;
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

.case-page #art-bazaar {
  scroll-margin-top:72px;
}

.case-page .point-system-screens {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,300px));
  justify-content:center;
  gap:clamp(16px,2.4vw,32px);
  align-items:end;
}

.case-page .point-system-screen {
  width:100%;
  min-height:0;
  aspect-ratio:9 / 19.5;
  border:1px solid #aeb7b2;
  border-radius:32px;
  background:#fff;
  box-shadow:0 16px 34px rgba(42,70,58,.1);
}

.case-page .point-system-screen img {
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:inherit;
}

.case-page .point-system-screen.has-image {
  aspect-ratio:9 / 19.5;
  box-sizing:border-box;
  border:0;
  border-radius:40px;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
}

.case-page .point-system-screen.has-image::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border:1px solid #82978d;
  border-radius:40px;
  pointer-events:none;
}

.case-page .point-system-screen.has-image img {
  display:block;
  object-fit:cover;
  border-radius:40px;
  transform:scale(1.012);
  transform-origin:center;
}

.case-page .point-system-screen.has-image span {
  display:none;
}

.case-page .gallery-extension-eyebrow {
  margin:0 0 16px;
  color:#667287;
  font-family:var(--rd-body) !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
}

.case-page .gallery-extension h3 {
  margin:0 0 20px;
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .gallery-extension-copy > p:last-child {
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.55 !important;
}

.case-page .gallery-extension-screen {
  width:min(100%,330px);
  min-height:0;
  aspect-ratio:9 / 19.5;
  justify-self:center;
  border:1px solid #aeb7b2;
  border-radius:42px;
  background:#f7faf8;
  box-shadow:0 20px 42px rgba(42,70,58,.11);
}

.case-page .gallery-extension-screen--profile.has-image {
  aspect-ratio:9 / 19.5;
  border:0;
  border-radius:40px;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
}

.case-page .gallery-extension-screen--profile.has-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:40px;
  transform:scaleX(1.012);
  transform-origin:center;
}

.case-page .gallery-extension-screen--profile.has-image span {
  display:none;
}

.case-page .gallery-extension-screen--profile.has-image::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border:1px solid #82978d;
  border-radius:40px;
  pointer-events:none;
}

.case-page .gallery-extension-screen--art-bazaar.has-image,
.case-page .gallery-extension-screen--my-gallery.has-image {
  aspect-ratio:9 / 19.5;
  border:0;
  border-radius:40px;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
  clip-path:inset(1px round 40px);
}

.case-page .gallery-extension-screen--art-bazaar.has-image img,
.case-page .gallery-extension-screen--my-gallery.has-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:40px;
  transform:scaleX(1.012);
  transform-origin:center;
}

.case-page .gallery-extension-screen--art-bazaar.has-image span,
.case-page .gallery-extension-screen--my-gallery.has-image span {
  display:none;
}

.case-page .gallery-extension-screen--art-bazaar.has-image::after,
.case-page .gallery-extension-screen--my-gallery.has-image::after {
  content:"";
  position:absolute;
  inset:1px;
  z-index:2;
  border:1px solid #82978d;
  border-radius:39px;
  pointer-events:none;
}

.case-page .gallery-extension-screens {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,38px);
  align-items:end;
}

.case-page .gallery-extension-screens .gallery-extension-screen {
  width:100%;
}

.case-page .gallery-extension--collection {
  display:block;
  text-align:center;
}

.case-page .gallery-extension--collection .gallery-extension-copy {
  max-width:980px;
  margin:0 auto clamp(48px,6vw,76px);
}

.case-page .gallery-extension--collection .gallery-extension-eyebrow {
  display:none;
}

.case-page .gallery-extension--collection h3 {
  margin-bottom:22px;
}

.case-page .gallery-extension--collection .gallery-extension-copy > p:last-child {
  max-width:900px;
  margin:0 auto;
}

.case-page .collection-feature-intros {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  max-width:980px;
  margin:clamp(38px,5vw,58px) auto 0;
  text-align:left;
}

.case-page .collection-feature-intros article {
  padding:clamp(20px,2.2vw,28px);
  border-radius:18px;
  background:#f5f6f7;
}

.case-page .collection-feature-intros h4 {
  margin:0 0 10px;
  font-family:var(--rd-body) !important;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
}

.case-page .collection-feature-intros p {
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

.case-page .gallery-extension--collection .gallery-extension-screens {
  grid-template-columns:repeat(2,minmax(0,330px));
  justify-content:center;
  gap:clamp(28px,5vw,72px);
}

.case-page .gallery-extension-details {
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2vw,24px);
  max-width:760px;
  margin:clamp(40px,5vw,60px) auto 0;
  border:0;
  text-align:left;
}

.case-page .gallery-extension-details article {
  padding:0;
}

.case-page .gallery-extension-details article + article {
  border:0;
}

.case-page .gallery-extension-details h4 {
  margin:0 0 10px;
  font-family:var(--rd-body) !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  letter-spacing:0 !important;
}

.case-page .gallery-extension-details p {
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

@media (max-width:900px) {
  .case-page .gallery-extension { grid-template-columns:1fr; }
  .case-page .gallery-extension-copy { max-width:680px; }
  .case-page .gallery-extension-screen { margin-top:12px; }
  .case-page .gallery-extension--profile .gallery-extension-copy,
  .case-page .gallery-extension--profile > .gallery-extension-screen { grid-column:1; grid-row:auto; }
  .case-page .gallery-extension--profile .profile-feature-intros { grid-template-columns:1fr; }
  .case-page .point-system-screens { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .case-page .gallery-extension-details { grid-template-columns:1fr; }
  .case-page .gallery-extension-details article + article { border:0; }
  .case-page .collection-feature-intros { grid-template-columns:1fr; }
}

@media (max-width:560px) {
  .case-page .point-system-screens { grid-template-columns:1fr; }
  .case-page .point-system-screen { width:min(100%,320px); justify-self:center; }
}

@media (max-width:560px) {
  .case-page .gallery-extension-screens { grid-template-columns:1fr; }
  .case-page .gallery-extension-screens .gallery-extension-screen { width:min(100%,310px); }
}

/* Keep every Overview response at the same size as the Pain points copy. */
html body .case-page .about-project .overview-summary-content > p {
  font-size:22px !important;
  line-height:1.45 !important;
}

html body .case-page .about-project .overview-pain-points li,
html body .case-page .about-project .overview-pain-points li::before {
  font-size:20px !important;
  line-height:1.45 !important;
}

.case-page .final-feature--split > .feature-details {
  grid-row:4;
  display:grid;
  grid-template-columns:1fr;
  margin-top:clamp(28px,4vw,44px) !important;
}

.case-page .final-feature--split .feature-detail {
  padding:18px 0;
}

.case-page .final-feature--split .feature-detail + .feature-detail {
  padding-left:0;
  border-left:0;
  border-top:1px solid #dde1e8;
}

.case-page .final-feature--split > .final-feature-phone-upload {
  grid-column:2;
  grid-row:1 / span 4;
  align-self:center;
  justify-self:center;
  width:min(100%,360px) !important;
  min-height:0 !important;
  margin:0 !important;
  aspect-ratio:9 / 19.5 !important;
  border:1px solid #aeb7b2;
  border-radius:44px;
  background:#f7faf8;
  box-shadow:0 20px 42px rgba(42,70,58,.11);
}

.case-page .final-feature--split > .final-feature-phone-upload::before {
  content:"";
  position:absolute;
  top:14px;
  left:50%;
  z-index:2;
  width:34%;
  height:23px;
  border-radius:999px;
  background:#111;
  transform:translateX(-50%);
}

.case-page .final-feature--split > .final-feature-phone-upload img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:43px;
}

.case-page .final-feature--split > .final-feature-phone-upload.has-demo-video {
  border:0;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
}

.case-page .final-feature--split > .final-feature-phone-upload.has-demo-video::before {
  display:none;
}

.case-page .final-feature--split > .final-feature-phone-upload.has-demo-video::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  box-sizing:border-box;
  border:1px solid #82978d;
  border-radius:44px;
  background:transparent;
  opacity:1;
  pointer-events:none;
}

.case-page .final-feature-demo-video {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:43px;
  background:#fff;
  object-fit:cover;
  transform:scale(1.025);
  transform-origin:center;
}

@media (max-width:900px) {
  .case-page .final-feature--split { grid-template-columns:1fr; grid-template-rows:auto; row-gap:0; }
  .case-page .final-feature--split > .final-feature-label,
  .case-page .final-feature--split > h3,
  .case-page .final-feature--split > p:not(.final-feature-label),
  .case-page .final-feature--split > .feature-details,
  .case-page .final-feature--split > .final-feature-phone-upload { grid-column:1; grid-row:auto; }
  .case-page .final-feature--split > .final-feature-phone-upload { width:min(100%,330px) !important; margin-top:40px !important; }
}

/* Combined donate-and-find flow: centered explanation with a four-screen sequence. */
.case-page .combined-exchange-feature {
  padding:clamp(76px,9vw,124px) 0;
  border-bottom:1px solid #dde1e8;
}

.case-page .combined-exchange-feature--details-only {
  padding:0 0 clamp(32px,4vw,52px);
  border-bottom:0;
}

.case-page .combined-exchange-feature--details-only .combined-exchange-details {
  margin:0;
}

.case-page .combined-exchange-intro {
  max-width:900px;
  margin:0 auto clamp(38px,4.5vw,58px);
  text-align:center;
}

.case-page .combined-exchange-intro--standalone {
  padding-top:clamp(36px,4.5vw,58px);
  margin-bottom:clamp(8px,1.5vw,18px);
}

.case-page .combined-exchange-intro h3 {
  margin:0 0 18px;
  font-family:var(--rd-display) !important;
  font-size:var(--rd-section) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}

.case-page .combined-exchange-intro p {
  max-width:600px;
  margin:0 auto;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.6 !important;
}

.case-page .combined-exchange-screens {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px);
  align-items:end;
}

.case-page .combined-exchange-details {
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2vw,24px);
  max-width:760px;
  margin:0 auto clamp(20px,3vw,36px);
  border:0;
}

.case-page .final-feature--find-split > .find-exchange-details {
  grid-column:1;
  grid-row:4;
  width:100%;
  max-width:520px;
  margin:clamp(34px,4vw,48px) 0 0;
}

.case-page .final-feature--find-split {
  padding-top:clamp(28px,3.5vw,52px) !important;
  padding-bottom:clamp(120px,12vw,180px) !important;
}

.case-page .point-system-showcase {
  margin-top:clamp(28px,4vw,48px);
}

.case-page .combined-exchange-details article {
  padding:0;
}

.case-page .combined-exchange-details article + article {
  border:0;
}

.case-page .combined-exchange-details h4 {
  margin:0 0 10px;
  color:#171b23;
  font-family:var(--rd-body) !important;
  font-size:16px;
  font-weight:600;
  line-height:1.3;
}

.case-page .combined-exchange-details p {
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

/* Match Find and Reuse Gallery decision copy to the Profile treatment. */
.case-page :is(
  .combined-exchange-details,
  .final-feature--gallery-reverse > .feature-details
) h4 {
  margin:0 0 10px !important;
  color:#171b23 !important;
  font-family:var(--rd-body) !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  letter-spacing:-.035em !important;
  text-transform:none !important;
}

.case-page :is(
  .combined-exchange-details,
  .final-feature--gallery-reverse > .feature-details
) p {
  margin:0 !important;
  color:#5d687a !important;
  font-family:var(--rd-body) !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  letter-spacing:normal !important;
}

.case-page .combined-exchange-screen {
  width:100%;
  min-height:0;
  aspect-ratio:9 / 19.5;
  border:1px solid #aeb7b2;
  border-radius:34px;
  background:#f7faf8;
  box-shadow:0 16px 32px rgba(42,70,58,.09);
}

.case-page .combined-exchange-screen::before {
  content:"";
  position:absolute;
  top:11px;
  left:50%;
  z-index:2;
  width:34%;
  height:18px;
  border-radius:999px;
  background:#111;
  transform:translateX(-50%);
}

.case-page .combined-exchange-screen img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:33px;
}

@media (max-width:900px) {
  .case-page .combined-exchange-screens { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .case-page .combined-exchange-details { grid-template-columns:1fr; }
  .case-page .combined-exchange-details article + article { border:0; }
  .case-page .final-feature--donate-reverse > .final-feature-label,
  .case-page .final-feature--donate-reverse > h3,
  .case-page .final-feature--donate-reverse > p:not(.final-feature-label),
  .case-page .final-feature--donate-reverse > .donate-feature-intros,
  .case-page .final-feature--donate-reverse > .final-feature-phone-upload { grid-column:1; }
}

@media (max-width:540px) {
  .case-page .combined-exchange-screens { grid-template-columns:1fr; }
  .case-page .combined-exchange-screen { width:min(100%,300px); justify-self:center; }
}

/* Keep the Donate screen and copy in separate columns. */
@media (min-width:901px) {
  .case-page .final-feature--split.final-feature--find-split > h3,
  .case-page .final-feature--split.final-feature--find-split > p:not(.final-feature-label),
  .case-page .final-feature--split.final-feature--find-split > .find-feature-intros,
  .case-page .final-feature--split.final-feature--find-split > .find-exchange-details {
    transform:translate(clamp(22px,2vw,32px),clamp(72px,7vw,112px));
  }

  .case-page .final-feature--split.final-feature--donate-reverse {
    grid-template-columns:minmax(360px,.9fr) minmax(360px,.88fr);
    column-gap:clamp(34px,4.5vw,72px);
  }

  .case-page .final-feature--split.final-feature--donate-reverse > .final-feature-label,
  .case-page .final-feature--split.final-feature--donate-reverse > h3,
  .case-page .final-feature--split.final-feature--donate-reverse > p:not(.final-feature-label),
  .case-page .final-feature--split.final-feature--donate-reverse > .donate-feature-intros {
    grid-column:2;
    transform:translateY(clamp(72px,7vw,112px));
  }

  .case-page .final-feature--split.final-feature--donate-reverse > .final-feature-phone-upload {
    grid-column:1;
    grid-row:1 / span 4;
  }
}

.case-page .final-design-intro {
  border-bottom:0;
}

/* Final cascade override for the Reuse Gallery split layout. */
.case-page .final-feature--gallery-reverse > h3,
.case-page .final-feature--gallery-reverse > p:not(.final-feature-label),
.case-page .final-feature--gallery-reverse > .gallery-feature-intros {
  grid-column:2;
  max-width:520px;
}
.case-page .final-feature--gallery-reverse > h3 { grid-row:1; }
.case-page .final-feature--gallery-reverse > p:not(.final-feature-label) {
  grid-row:2;
  margin:0;
  color:#5d687a;
  font-family:var(--rd-body) !important;
  font-size:var(--rd-body-size) !important;
  line-height:1.6 !important;
}
.case-page .final-feature--gallery-reverse > .gallery-feature-intros { grid-row:3; }
.case-page .final-feature--gallery-reverse > .final-feature-phone-upload {
  grid-column:1;
  grid-row:1 / span 4;
}

.case-page .final-feature--gallery-reverse > .feature-details {
  grid-column:1 / -1;
  grid-row:5;
  width:100%;
  max-width:none;
  margin-top:clamp(48px,6vw,76px) !important;
}

@media (min-width:901px) {
  .case-page .final-feature--split.final-feature--gallery-reverse {
    grid-template-columns:minmax(360px,.9fr) minmax(360px,.88fr);
    column-gap:clamp(34px,4.5vw,72px);
    align-items:center;
  }
  .case-page .final-feature--gallery-reverse > h3,
  .case-page .final-feature--gallery-reverse > p:not(.final-feature-label),
  .case-page .final-feature--gallery-reverse > .gallery-feature-intros,
  .case-page .final-feature--gallery-reverse > .feature-details {
    transform:none;
  }
  .case-page .final-feature--gallery-reverse > .final-feature-phone-upload {
    align-self:center;
    justify-self:center;
  }
}

@media (max-width:900px) {
  .case-page .final-feature--gallery-reverse > h3,
  .case-page .final-feature--gallery-reverse > p:not(.final-feature-label),
  .case-page .final-feature--gallery-reverse > .gallery-feature-intros,
  .case-page .final-feature--gallery-reverse > .final-feature-phone-upload,
  .case-page .final-feature--gallery-reverse > .feature-details {
    grid-column:1;
    grid-row:auto;
    transform:none;
  }
}