/* Extend the prototype's Our Work composition to full narratives. */
.d-experience-hero{padding:88px 0 72px}
.d-experience-hero .study-eyebrow{color:var(--ink);font-weight:600;margin-bottom:24px}
.d-experience-hero h1{max-width:1060px;font-weight:500}
.d-experience-intro{max-width:770px;margin-top:32px;line-height:1.5}
.experience-work{background:var(--offwhite);padding:72px 0 72px}
.experience-cases{display:grid;gap:64px}
.experience-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:50px;padding:24px;background:#fff;border-radius:40px;scroll-margin-top:28px}
.experience-media{position:relative;min-width:0;min-height:636px;overflow:hidden;border-radius:20px;background:#8f9fd11a}
.experience-media .product-backdrop{width:180%;height:120%;max-width:none;left:-6%;top:0;filter:blur(96.5px);opacity:.47}
.experience-media > .experience-rawa{position:absolute;left:4%;top:50%;width:92%;max-width:none;height:auto;transform:translateY(-50%) rotate(-8.22deg);transform-origin:center;object-fit:contain}
.experience-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 68%}
.experience-scope .experience-media{background:linear-gradient(140deg,#e9f0f9,#cfdced)}
.experience-scope img.experience-scope{position:absolute;left:-3%;top:50%;width:106%;height:auto;max-width:none;transform:translateY(-50%);object-fit:contain}
.experience-copy{padding:24px 0 0;min-width:0;display:flex;flex-direction:column;gap:36px}
.experience-copy h2{font-size:32px;font-weight:500;line-height:1.2;letter-spacing:-.02em;margin:0 0 24px}
.experience-prose{font-size:22px;line-height:1.5;color:var(--muted)}
.experience-prose p+p{margin-top:28px}
.experience-prose strong{color:var(--ink);font-weight:600}
.experience-copy .study-identity{margin-top:auto}
.experience-copy .d-rawa-logo{width:160px;position:relative;overflow:hidden}
.experience-copy .d-rawa-logo img{position:absolute;width:310px;max-width:none;height:auto;max-height:none;left:-82px;top:-54px}
.experience-copy .d-scope-logo{width:196px}
.experience-copy .d-reflowx-logo{width:150px;height:46px;position:relative;overflow:hidden}
.experience-copy .d-reflowx-logo img{position:absolute;width:171px;max-width:none;height:auto;max-height:none;left:-21px;top:-64px}
@media(max-width:1100px){
 .d-experience-hero{padding:70px 0 64px}
 .experience-case{gap:30px}
 .experience-media{min-height:590px}
 .experience-copy{padding-top:14px;gap:30px}
 .experience-copy h2{font-size:29px}
 .experience-prose{font-size:21px}
 .experience-copy .study-identity{padding:10px 14px;gap:10px;height:80px;min-height:80px}
 .experience-copy .study-identity .d-sector{font-size:11px;padding:6px 10px}
 .experience-copy .d-scope-logo{width:155px}
}
@media(max-width:800px){
 .d-experience-hero{padding:52px 0 48px}
 .d-experience-hero h1{font-size:clamp(46px,9vw,62px);line-height:1.08;max-width:650px}
 .d-experience-hero .study-eyebrow{margin-bottom:20px}
 .d-experience-intro{font-size:21px;margin-top:26px}
 .experience-work{padding:32px 0 40px}
 .experience-cases{gap:28px}
 .experience-case{display:flex;flex-direction:column;gap:26px;border-radius:24px;padding:14px;scroll-margin-top:16px}
 .experience-media{min-height:0;width:100%;aspect-ratio:1;border-radius:14px}
 .experience-copy{padding:0 6px 6px;gap:30px}
 .experience-copy h2{font-size:28px;line-height:1.2;margin-bottom:22px}
 .experience-prose{font-size:20px;line-height:1.5}
 .experience-prose p+p{margin-top:28px}
 .experience-copy .study-identity{padding:10px 14px;gap:10px}
 .experience-copy .d-sector{font-size:11px}
 .experience-copy .d-scope-logo{width:155px}
}
@media(max-width:400px){
 .experience-copy h2{font-size:26px}
 .experience-prose{font-size:19px}
 .experience-copy .study-identity{padding:10px 12px}
 .experience-copy .d-scope-logo{width:143px}
 .experience-copy .d-sector{font-size:10px;padding:6px 9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Keep the case background continuous into the overlapping closing invitation. */
.d-close{padding:120px 0 150px;background:linear-gradient(to bottom,var(--offwhite) 0,var(--offwhite) 312.8px,#0b1121 312.8px)}
.d-close p{color:#c0c8dc}
@media(max-width:1100px){.d-close{padding:72px 0 90px;background:linear-gradient(var(--offwhite) 50%,#0b1121 50%)}}
@media(max-width:800px){.d-close{padding:32px 0 64px}}