#case-content *{box-sizing:border-box}
#case-content{scroll-behavior:smooth}
#case-content{margin:0;background:#fff;color:#29252e;font:17px/1.8 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
#case-content img,#case-content svg{display:block;width:100%;height:auto}
#case-content figure,#case-content dl,#case-content p{margin:0}
#case-content a{color:inherit;text-underline-offset:5px}
#case-content h1,#case-content h2{margin:0;line-height:1.3;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
#case-content h2{font-size:30px}
#case-content button{font:inherit;cursor:pointer}
#case-content a:focus-visible,#case-content button:focus-visible{outline:3px solid #f06c39;outline-offset:5px}
#case-content .container{width:min(1180px,calc(100% - 96px));margin:auto}
#case-content .narrow{width:min(800px,calc(100% - 48px));margin:auto}
#case-content .site-header{display:flex;align-items:center;justify-content:space-between;padding:18px 48px;min-height:88px}
#case-content .site-header img{width:46px;height:46px;object-fit:contain}
#case-content .site-header nav{display:flex;gap:38px;align-items:center}
#case-content .site-header a{text-decoration:none}
#case-content .contact{display:inline-block;background:#300a44;color:#fff;border-radius:30px;padding:12px 25px;text-decoration:none;font-size:15px}
#case-content .case-hero{background:linear-gradient(90deg,#300a44ed,#300a44cc),url(/assets/hrh-case/hero-showroom.webp) center/cover;color:#fff;padding:70px 0 78px}
#case-content .eyebrow{font-size:14px;margin-bottom:20px;color:#e1cce7}
#case-content .case-hero h1{font-size:56px;margin-bottom:28px}
#case-content .hero-info{display:grid;grid-template-columns:1.6fr 1fr;gap:90px;max-width:1050px}
#case-content .hero-info p+p{margin-top:16px}
#case-content .hero-info p:first-child{font-size:23px}
#case-content .hero-info dl{font-size:14px;line-height:1.6}
#case-content .hero-info dt{font-weight:700;color:#d3b9e4}
#case-content .hero-info dd{margin:3px 0 15px}
#case-content .challenge{padding:75px 0}
#case-content .narrow h2{margin-bottom:24px}
#case-content .narrow p+p{margin-top:20px}
#case-content .dual-showcase{display:grid;grid-template-columns:1fr 1fr}
#case-content .dual-showcase figure{padding:65px 42px 32px;min-width:0;background:#fff}
#case-content .dual-showcase figure+figure{background:#fff}
#case-content .browser-frame{background:#fff;border-radius:7px;overflow:hidden;box-shadow:0 14px 32px #20160e1a,0 2px 6px #20160e0a}
#case-content .browser-bar{display:flex;justify-content:space-between;gap:12px;background:#f5f4f2;color:#8a8580;font-size:10px;line-height:1.3;padding:12px 15px}
#case-content .dual-showcase .browser-frame{aspect-ratio:1.43;display:flex;flex-direction:column}
#case-content .dual-showcase .browser-frame>a{flex:1;min-height:0}
#case-content .dual-showcase .browser-bar{flex-shrink:0}
#case-content .dual-showcase img{height:100%;object-fit:cover;object-position:top}
#case-content .dual-showcase figcaption{text-align:center;margin-top:25px;font-size:15px;color:#4b3e31}
#case-content .dual-showcase figure+figure figcaption{color:#4b3e31}
#case-content .feature-banner{background:#300a44;color:#fff;padding:55px 0;text-align:center;margin-top:70px}
#case-content .feature-banner p{max-width:690px;margin:auto}
#case-content .website-story{padding:65px 0 40px}
#case-content .wide-website{position:relative;background:#f2f0ed;border-radius:12px;padding:42px 42px 26px;overflow:hidden}
#case-content .website-background{position:absolute;right:0;top:0;width:32%;height:100%;background:#d0b7a1}
#case-content .website-browser{position:relative;width:78%;z-index:1}
#case-content .website-browser img{aspect-ratio:1.52;object-fit:cover;object-position:top}
#case-content .texture-swatch{position:absolute;right:35px;bottom:60px;width:28%;z-index:2;box-shadow:0 15px 35px #0003}
#case-content .texture-swatch img{aspect-ratio:.8;object-fit:cover}
#case-content .wide-website figcaption{position:relative;margin-top:20px;font-size:12px;color:#69615b;z-index:2}
#case-content .feature-row{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:70px;align-items:center;margin-top:72px}
#case-content .feature-row.reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr)}
#case-content .feature-copy h2{font-size:27px;margin-bottom:22px}
#case-content .feature-copy p{font-size:16px;line-height:1.9;max-width:26em}
#case-content .feature-copy p+p{margin-top:18px}
#case-content .feature-copy>a{display:inline-block;font-size:14px;margin-top:20px}
#case-content .feature-visual{position:relative;min-width:0;border-radius:8px;overflow:hidden}
#case-content .simulator-stage{background:#ece8e0;padding:48px 32px 60px;min-height:420px;display:flex;align-items:center}
#case-content .simulator-stage>.browser-frame{width:92%}
#case-content .control-detail{width:26%;position:absolute;right:16px;bottom:25px;background:white;border:6px solid white;box-shadow:0 12px 30px #0003;border-radius:5px}
#case-content .compare-pair{background:transparent;padding:25px 35px}
#case-content .product-cell+ .product-cell{border-top:1px solid #d4d1cd;margin-top:12px;padding-top:12px}
#case-content .product-cell span{display:block;font-size:13px;color:#69615b;text-align:center}
#case-content .compare-pair figcaption{font-size:11px;color:#716b65;margin-top:20px;text-align:center}
#case-content .texture-detail{background:#f2f2f2}
#case-content .texture-detail svg{aspect-ratio:1.35}
#case-content .texture-detail figcaption{padding:15px 20px;background:#e8e1d7;font-size:12px;color:#6b5c4d}
#case-content .export-stage{padding:40px;background:#c9b6a1}
#case-content .export-sheet{background:#fff;box-shadow:0 16px 40px #40291133;padding:22px}
#case-content .export-sheet p{font-size:13px;color:#64594d}
#case-content .export-sheet>span{display:block;text-align:right;font-size:11px;color:#716b65;margin-top:16px}
#case-content .compare-switch{display:flex;gap:16px;margin-top:25px;border-bottom:1px solid #d1c7d6}
#case-content .compare-switch button{border:0;padding:10px 0;background:none;color:#6e6174;font-size:14px}
#case-content .compare-switch button[aria-pressed=true]{box-shadow:0 2px #300a44;color:#300a44;font-weight:700}
#case-content .closing-showcase{background:#34443d;margin-top:80px;padding:65px 0}
#case-content .closing-showcase .container{max-width:1000px}
#case-content .closing-showcase .browser-frame{box-shadow:0 20px 45px #0004}
#case-content .outcome{padding:75px 0 90px}
#case-content .next-step{background:#ff5039;color:#fff;text-align:center;padding:64px 0}
#case-content .next-step h2{font-size:36px;margin-bottom:18px}
#case-content .next-step p{margin-bottom:28px}
#case-content .next-step button{background:transparent;border:1px solid #fff;color:#fff;border-radius:30px;padding:11px 24px;font-size:15px;margin-left:16px}
#case-content footer{background:#300a44;color:#fff;padding:45px 48px;display:flex;align-items:center;gap:30px;font-size:14px}
#case-content footer .zn-trigger{margin:0 0 0 auto}
@media (max-width:900px){#case-content .container{width:calc(100% - 48px)}
#case-content .hero-info{gap:40px}
#case-content .dual-showcase figure{padding:35px 22px 24px}
#case-content .feature-row,#case-content .feature-row.reverse{gap:32px}
#case-content .simulator-stage{min-height:330px;padding:30px 18px 45px}
#case-content .feature-copy h2{font-size:24px}
#case-content .wide-website{padding:28px}
#case-content .case-hero h1{font-size:46px}}
@media (max-width:600px){#case-content{font-size:16px}
#case-content .site-header{padding:15px 20px;min-height:70px}
#case-content .site-header img{width:36px;height:36px}
#case-content .site-header nav{gap:18px;font-size:14px}
#case-content .site-header nav>a:first-child,#case-content .site-header nav>a:nth-child(3){display:none}
#case-content .contact{padding:10px 18px;font-size:14px}
#case-content .container,#case-content .narrow{width:calc(100% - 40px)}
#case-content .case-hero{padding:42px 0}
#case-content .case-hero h1{font-size:36px;margin-bottom:24px}
#case-content .eyebrow{font-size:12px}
#case-content .hero-info{grid-template-columns:1fr;gap:28px}
#case-content .hero-info p:first-child{font-size:20px}
#case-content .hero-info dl{display:grid;grid-template-columns:74px 1fr;gap:8px 12px;font-size:12px}
#case-content .hero-info dd{margin:0}
#case-content .challenge{padding:45px 0}
#case-content h2{font-size:26px}
#case-content .narrow h2{margin-bottom:20px}
#case-content .dual-showcase{grid-template-columns:1fr}
#case-content .dual-showcase figure{padding:30px 24px 22px}
#case-content .dual-showcase figcaption{font-size:13px;margin-top:18px}
#case-content .feature-banner{padding:38px 0;margin-top:40px;text-align:left}
#case-content .website-story{padding:40px 0 28px}
#case-content .wide-website{padding:18px 18px 20px;border-radius:6px}
#case-content .website-browser{width:90%}
#case-content .browser-bar{font-size:8px;padding:8px}
#case-content .texture-swatch{width:28%;right:12px;bottom:46px}
#case-content .wide-website figcaption{font-size:10px;margin-top:18px}
#case-content .feature-row,#case-content .feature-row.reverse{display:flex;flex-direction:column;gap:24px;margin-top:52px;align-items:stretch}
#case-content .feature-copy{order:0}
#case-content .feature-visual{order:1}
#case-content .feature-copy h2{font-size:25px}
#case-content .feature-copy p{font-size:16px;line-height:1.9;max-width:26em}
#case-content .simulator-stage{min-height:260px;padding:30px 18px 45px}
#case-content .compare-pair{padding:20px}
#case-content .export-stage{padding:25px}
#case-content .export-sheet{padding:18px}
#case-content .closing-showcase{margin-top:44px;padding:30px 0}
#case-content .outcome{padding:44px 0 50px}
#case-content .next-step{padding:40px 0}
#case-content .next-step h2{font-size:28px}
#case-content .next-step button{padding:10px 16px;margin-left:8px;font-size:14px}
#case-content footer{padding:30px 20px;gap:20px;flex-wrap:wrap}
#case-content footer .zn-trigger{margin:0;padding:8px 12px;font-size:13px}}
@media (prefers-reduced-motion:reduce){#case-content{scroll-behavior:auto}}
#case-content .case-image-link{position:relative;display:block;cursor:zoom-in}
#case-content .image-open-label{position:absolute;right:14px;bottom:14px;background:#fffefb;color:#34283a;border:1px solid #ded8df;border-radius:25px;padding:7px 14px;font-size:12px;line-height:1.4;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s}
#case-content .case-image-link:hover .image-open-label,#case-content .case-image-link:focus-visible .image-open-label{opacity:1;transform:none}
#case-content #case-lightbox{padding:0;border:1px solid #ffffff20;border-radius:10px;width:min(1320px,calc(100% - 40px));max-width:none;max-height:calc(100dvh - 40px);background:#f5f4f2;color:#28232b;box-shadow:0 30px 100px #0005;overflow:hidden}
#case-content #case-lightbox::backdrop{background:#16101be6}
#case-content .lightbox-toolbar{display:flex;align-items:center;gap:18px;padding:14px 20px;border-bottom:1px solid #dedbd6;background:#fff}
#case-content .lightbox-toolbar h2{font-size:16px;letter-spacing:0;margin-right:auto;line-height:1.5}
#case-content .lightbox-toolbar button{padding:8px 12px;border:1px solid #d8d2db;border-radius:4px;background:white;color:#302738;font-size:13px;white-space:nowrap}
#case-content .lightbox-toolbar .lightbox-close{font-size:26px;line-height:1;padding:6px;width:38px}
#case-content .lightbox-viewport{overflow:auto;max-height:calc(100dvh - 130px);overscroll-behavior:contain}
#case-content .lightbox-viewport img{display:block;width:100%;max-height:calc(100dvh - 130px);object-fit:contain}
#case-content .lightbox-viewport.is-zoomed img{width:var(--image-width);height:auto;max-width:none;max-height:none}
@media (hover:none){#case-content .image-open-label{opacity:1;transform:none}}
@media (max-width:600px){#case-content .image-open-label{font-size:10px;bottom:8px;right:8px;padding:5px 9px}
#case-content #case-lightbox{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
#case-content .lightbox-toolbar{padding:12px;gap:10px}
#case-content .lightbox-toolbar h2{font-size:13px}
#case-content .lightbox-toolbar button{font-size:12px;padding:7px 8px}
#case-content .lightbox-viewport,#case-content .lightbox-viewport img{max-height:calc(100dvh - 110px)}}
@media (prefers-reduced-motion:reduce){#case-content .image-open-label{transition:none;transform:none}}
#case-content .dual-showcase .browser-frame{border:1px solid #e8e5e2;box-shadow:0 8px 24px #20160e0a}
#case-content{scroll-padding-top:90px}
#case-content .case-subnav{border-block:1px solid #ece9e7;background:#fff;position:sticky;top:0;z-index:10;font-size:13px}
#case-content .case-subnav>.container{display:flex;justify-content:space-between;gap:16px;padding-block:16px}
#case-content .case-subnav span{color:#777}
#case-content .case-subnav a{text-decoration:none}
#case-content .case-subnav .container>div{display:flex;gap:30px}
#case-content .story-hero{text-align:center;padding-top:74px}
#case-content .project-name{font-size:23px;font-weight:650;margin-bottom:30px}
#case-content .story-hero h1{font-size:clamp(30px,3.2vw,46px);line-height:1.4;letter-spacing:-.025em}
#case-content .project-tags{color:#777;margin:28px 0 40px}
#case-content .story-hero figure{border-radius:18px;overflow:hidden}
#case-content .story-hero img{aspect-ratio:16/8.6;object-fit:cover}
#case-content .project-overview{padding:64px 0 75px;border-bottom:1px solid #e9e5e1}
#case-content .section-label{font-size:16px;color:#777;margin-bottom:25px}
#case-content .project-facts{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:40px;margin-bottom:56px}
#case-content .project-facts span{font-size:13px;color:#777}
#case-content .project-facts p{font-size:19px;line-height:1.7;margin-top:10px;font-weight:550}
#case-content .overview-body{display:grid;grid-template-columns:1.1fr 1fr;gap:90px}
#case-content .overview-body h2{font-size:30px;margin-bottom:24px}
#case-content .overview-body h3{font-size:17px;margin:0 0 10px}
#case-content .overview-body p{font-size:16px;line-height:1.9;color:#56515a}
#case-content .overview-body h3:not(:first-child){margin-top:25px}
#case-content .case-article{width:min(940px,calc(100% - 96px));margin:70px auto 0}
#case-content .article-title{font-size:32px;margin-bottom:50px}
#case-content .story-section{padding:0;margin:0 0 60px}
#case-content .story-section h2,#case-content .feature-copy h2{font-size:25px;line-height:1.5;margin:0 0 22px;text-wrap:initial}
#case-content .story-section p,#case-content .feature-copy p{font-size:17px;line-height:1.95;max-width:none}
#case-content .story-section p+p{margin-top:18px}
#case-content .story-section figure{margin-top:30px}
#case-content .story-section .container{width:100%}
#case-content .story-section .feature-copy{margin-bottom:30px}
#case-content .story-section .feature-copy>a{margin-top:18px}
#case-content .wide-website{background:white;padding:0;border-radius:0}
#case-content .website-background,#case-content .texture-swatch{display:none}
#case-content .website-browser{width:100%}
#case-content .website-browser img{aspect-ratio:auto}
#case-content .wide-website figcaption{text-align:center}
#case-content .feature-visual{border-radius:0}
#case-content .simulator-stage{background:white;padding:0;min-height:0}
#case-content .control-detail{display:none}
#case-content .compare-pair{display:grid;grid-template-columns:1fr 1fr;padding:0;gap:24px}
#case-content .product-cell+ .product-cell{border:0;margin:0;padding:0}
#case-content .compare-pair figcaption{grid-column:1/-1;margin-top:0}
#case-content .texture-detail{background:white;overflow:hidden}
#case-content .texture-detail svg{max-height:500px}
#case-content .texture-detail figcaption{background:white;text-align:center}
#case-content .export-stage{background:white;padding:0}
#case-content .export-sheet{box-shadow:none;border:1px solid #ece9e7;padding:24px}
#case-content .export-sheet svg{max-height:460px}
#case-content .closing-showcase{background:white;padding:0}
#case-content .closing-showcase figure{margin:0}
#case-content .outcome{padding:0 0 20px}
#case-content .next-step{background:#faf8f5;color:#29252e;border-top:1px solid #eee7e1}
#case-content .next-step button{border-color:#6b5c72;color:#300a44}
@media (max-width:700px){#case-content{scroll-padding-top:65px}
#case-content .container,#case-content .case-article{width:calc(100% - 40px)}
#case-content .case-subnav span{font-size:11px}
#case-content .case-subnav .container>div{gap:18px}
#case-content .case-subnav>.container{padding-block:13px}
#case-content .story-hero{padding-top:40px}
#case-content .project-name{font-size:18px;margin-bottom:20px}
#case-content .story-hero h1{font-size:30px}
#case-content .project-tags{font-size:13px;margin:20px 0 28px}
#case-content .story-hero figure{border-radius:9px}
#case-content .story-hero img{aspect-ratio:4/3}
#case-content .project-overview{padding:36px 0}
#case-content .project-facts{grid-template-columns:1fr;gap:18px;margin-bottom:32px}
#case-content .project-facts p{font-size:17px;margin-top:2px}
#case-content .overview-body{grid-template-columns:1fr;gap:28px}
#case-content .overview-body h2{font-size:25px}
#case-content .case-article{margin-top:40px}
#case-content .article-title{font-size:28px;margin-bottom:32px}
#case-content .story-section{margin-bottom:42px}
#case-content .story-section h2,#case-content .feature-copy h2{font-size:23px;margin-bottom:18px}
#case-content .story-section p,#case-content .feature-copy p{font-size:16px;line-height:1.9}
#case-content .story-section figure{margin-top:24px}
#case-content .compare-pair{gap:12px}
#case-content .product-cell span{font-size:11px}
#case-content .export-sheet{padding:14px}
#case-content .next-step h2{font-size:27px}}
#case-content .story-hero{padding:48px 0 38px}
#case-content .project-name{font-size:19px;margin-bottom:18px}
#case-content .project-tags{margin:20px 0 0}
#case-content .case-social{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);border:1px solid #e9e6e2;border-radius:26px;overflow:hidden;background:#fff;align-items:stretch}
#case-content .social-gallery{min-width:0;position:relative;background:white}
#case-content .social-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/5}
#case-content .social-slides::-webkit-scrollbar{display:none}
#case-content .social-slides figure{flex:0 0 100%;scroll-snap-align:start;margin:0;min-width:0}
#case-content .social-slides img{width:100%;height:100%;object-fit:contain}
#case-content .gallery-controls{display:flex;align-items:center;justify-content:center;gap:25px;padding:12px;background:white;border-top:1px solid #eee;font-size:13px}
#case-content .gallery-controls button{border:0;background:none;color:#403647;padding:6px 12px}
#case-content .gallery-controls button:disabled{opacity:.3;cursor:default}
#case-content .social-notes{min-width:0;display:flex;flex-direction:column;border-left:1px solid #ece9e5;position:relative}
#case-content .social-author{display:flex;gap:12px;align-items:center;padding:22px 25px;border-bottom:1px solid #ece9e5;flex-shrink:0}
#case-content .social-author>img{width:40px;height:40px}
#case-content .social-author strong{font-size:16px;display:block}
#case-content .social-author span{font-size:11px;color:#777;display:block}
#case-content .social-author>a{margin-left:auto;font-size:13px;background:#300a44;color:white;padding:7px 14px;border-radius:22px;text-decoration:none;white-space:nowrap}
#case-content .social-notes-body{position:absolute;top:94px;bottom:0;overflow-y:auto;overscroll-behavior:contain;padding:26px 30px 36px;scrollbar-width:thin;scrollbar-color:#c8c2bc transparent}
#case-content .social-notes h2{font-size:23px;line-height:1.5;margin:0 0 30px;text-wrap:initial}
#case-content .social-notes h3{font-size:18px;margin:30px 0 12px}
#case-content .social-notes p{font-size:16px;line-height:1.9;color:#605a64}
#case-content .social-notes p+p{margin-top:18px}
#case-content .social-notes b{color:#302b34;font-weight:600}
#case-content .read-details{display:inline-block;margin-top:30px;font-size:14px}
#case-content .case-article{margin-top:80px}
#case-content .article-intro{font-size:17px;line-height:1.95;margin-bottom:48px;color:#5c5660}
#case-content .demo-recording video{display:block;width:100%;aspect-ratio:8/5;background:white;border:1px solid #eee;border-radius:10px}
#case-content .demo-recording figcaption{text-align:center;font-size:13px;color:#777;margin-top:14px}
@media (max-width:700px){#case-content .story-hero{padding:32px 0 28px}
#case-content .story-hero h1{font-size:28px}
#case-content .case-social{display:block;border-radius:16px}
#case-content .social-notes{border-left:0;border-top:1px solid #eee}
#case-content .social-author{padding:18px}
#case-content .social-notes-body{position:static;max-height:440px;padding:22px;overflow:auto}
#case-content .social-notes h2{font-size:21px}
#case-content .social-notes h3{font-size:17px}
#case-content .social-notes p{font-size:15px}
#case-content .case-article{margin-top:45px}
#case-content .article-intro{font-size:16px;margin-bottom:35px}
#case-content .gallery-controls{padding:8px}
#case-content .social-author>a{font-size:12px}
#case-content .demo-recording figcaption{font-size:11px}}
#case-content .social-slides{aspect-ratio:4/5}
#case-content .social-notes{min-height:0}
#case-content .social-slides figure{height:100%}
@media (min-width:701px){#case-content .social-notes-body{min-height:0}}
#case-content .page-evidence{margin:30px 0 0}
#case-content .page-evidence img{border-radius:12px;border:1px solid #eee9e5}
#case-content .page-evidence figcaption{text-align:center;color:#777;font-size:13px;margin-top:14px}
#case-content .detail-subheading{font-size:21px;line-height:1.5;margin:38px 0 18px}
#case-content .story-section>.compare-switch{margin-top:26px}
#case-content .story-section .compare-pair{margin:28px 0 36px}
#case-content .case-article .story-section{margin-bottom:68px}
@media (max-width:700px){#case-content .case-article .story-section{margin-bottom:44px}
#case-content .detail-subheading{font-size:19px;margin-top:28px}
#case-content .page-evidence figcaption{font-size:11px}
#case-content .page-evidence img{border-radius:7px}}
@font-face{font-family:CaseOPPO;src:url("/assets/selected-cases/opposans-cn.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
#case-content{background:#222;color:#fff;font-family:CaseOPPO,"PingFang SC","Microsoft YaHei",sans-serif;font-weight:400}
#case-content .case-subnav{background:#222;border-color:#555;color:#fff;padding:24px max(20px,calc((100vw - 1100px)/2));font-size:14px}
#case-content .story-hero{max-width:1100px;padding:70px 0 60px}
#case-content .story-hero h1{font-family:inherit;font-size:44px;font-weight:400;line-height:1.3}
#case-content .story-hero .story-title{font-size:28px;font-weight:400;line-height:1.5;color:#fff;max-width:900px}
#case-content .story-hero .story-context{font-size:16px;line-height:1.65;color:#bdbdbd;max-width:760px}
#case-content .eyebrow{color:#bdbdbd;letter-spacing:0}
#case-content .case-social{width:calc(100% - 40px);max-width:1100px;margin:0 auto;grid-template-columns:61.363636% 38.636364%;border:0;border-radius:28px;background:#1d1d1f;align-items:stretch}
#case-content .social-gallery{position:relative}
#case-content .social-slides{aspect-ratio:3/4}
#case-content .gallery-controls{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;gap:16px;padding:8px 14px;border:0;border-radius:40px;background:#111d;color:white;z-index:2}
#case-content .gallery-controls button{color:white;padding:7px;font-size:12px}
#case-content .gallery-controls button:disabled{opacity:.4}
#case-content .social-notes{border:0}
#case-content .social-author{height:88px;padding:20px 36px;border-color:#ffffff1a;gap:12px}
#case-content .social-author img{width:42px;height:42px;background:white;border-radius:50%;padding:4px}
#case-content .social-author b{font-size:16px;font-weight:400}
#case-content .social-author small{color:#aaa;font-size:11px}
#case-content .social-author>a{background:#f00;font-size:14px;padding:8px 18px}
#case-content .social-notes-body{top:88px;bottom:0;padding:28px 38px 40px 36px;scrollbar-width:thin;scrollbar-color:#3f3f3f transparent}
#case-content .social-notes-body h2{font-size:22px;font-weight:400;line-height:1.5;margin:0 0 27px}
#case-content .social-notes-body h3{font-size:18px;font-weight:400;line-height:1.5;margin:30px 0 6px}
#case-content .social-notes-body p{font-size:16px;font-weight:400;line-height:1.65;color:#b8b8b9;margin:0 0 10px}
#case-content .social-notes-body b,#case-content .social-notes-body strong{font-weight:400;color:white}
#case-content .case-article{width:calc(100% - 40px);max-width:1100px;margin:110px auto 0}
#case-content .story-section{margin:0 0 80px;scroll-margin-top:100px}
#case-content .story-section h2{font-size:24px;line-height:1.5;font-weight:400;margin:0 0 17px}
#case-content .story-section .chapter-kicker{font-size:14px;color:#aaa;margin:0 0 10px;letter-spacing:0}
#case-content .story-section p,#case-content .detail-copy p{font-size:16px;line-height:1.65;color:#b8b8b9;max-width:none;margin:0 0 14px}
#case-content .story-section>p:not(.chapter-kicker){max-width:none}
#case-content .story-section figure{margin:28px 0 0}
#case-content .detail-copy{max-width:none;margin-top:30px}
#case-content .detail-copy h3{font-weight:400;font-size:20px;line-height:1.5;margin:30px 0 14px}
#case-content .image-button,#case-content .static-viewport{border:0;border-radius:14px}
#case-content .browser-bar{background:#303030;color:#bbb;border-color:#444}
#case-content .demo-viewport{border-color:#444}
#case-content .demo-controls{color:#bbb}
#case-content .demo-controls button,#case-content .mobile-enlarge{background:#292929;color:#ddd;border-color:#555}
#case-content .demo-controls button:hover{background:#444}
#case-content .phone-pair figcaption,#case-content figcaption{color:#bbb}
#case-content .page-navigation{border-color:#444}
#case-content .page-navigation small{color:#aaa}
#case-content .next-step{background:#1d1d1f;color:white;margin-top:100px}
#case-content .next-step h2{font-weight:400}
#case-content .next-step a{background:#f00}
#case-content .next-step p{color:#bbb}
#case-content footer{max-width:1100px;color:#aaa}
#case-content .project-cover,#case-content .cover{color:#29232d}
#case-content .project-cover-title h2,#case-content .cover-heading h2{font-family:CaseOPPO,sans-serif}
#case-content .booking-sequence{border-color:#444}
#case-content .sequence-controls{background:#1d1d1f}
#case-content .sequence-controls button{background:#333;color:#ddd}
#case-content .sequence-controls button[aria-pressed=true]{background:#eee;color:#222}
@media (min-width:1600px){#case-content .case-social,#case-content .case-article,#case-content .story-hero,#case-content footer{max-width:1320px}
#case-content .social-notes-body{padding:30px 51px 50px 49px}
#case-content .social-author{padding-left:47px;padding-right:41px;height:104px}
#case-content .social-notes-body{top:104px}
#case-content .social-notes-body h3{margin-top:35px}
#case-content .social-notes-body p,#case-content .story-section p{font-size:18px}
#case-content .social-notes-body h3{font-size:20px}
#case-content .story-section h2{font-size:28px}}
@media (max-width:1100px) and (min-width:701px){#case-content .social-author{padding:18px}
#case-content .social-author>a{padding:8px 12px}
#case-content .social-notes-body{padding:24px}
#case-content .social-notes-body p{font-size:15px}
#case-content .social-notes-body h2{font-size:20px}}
@media (max-width:700px){#case-content .case-subnav{padding:16px 20px}
#case-content .story-hero{width:calc(100% - 40px);padding:36px 0 32px}
#case-content .story-hero h1{font-size:30px}
#case-content .story-hero .story-title{font-size:22px}
#case-content .story-hero .story-context{font-size:14px;line-height:1.65}
#case-content .case-social{display:block;border-radius:12px}
#case-content .social-slides{aspect-ratio:3/4}
#case-content .gallery-controls{bottom:12px;padding:5px 12px}
#case-content .social-author{height:96px;padding:24px 16px}
#case-content .social-author b{font-size:15px}
#case-content .social-author>a{font-size:14px}
#case-content .social-notes-body{position:static;max-height:none;overflow:visible;padding:24px 16px 28px}
#case-content .social-notes-body h2{font-size:20px;line-height:1.5;margin-bottom:22px}
#case-content .social-notes-body h3{font-size:16px;line-height:1.5;margin:24px 0 6px}
#case-content .social-notes-body p{font-size:14px;line-height:1.65;margin-bottom:10px}
#case-content .case-article{margin:60px auto 0}
#case-content .story-section{margin-bottom:48px}
#case-content .story-section h2{font-size:20px;line-height:1.5;margin-bottom:14px}
#case-content .story-section p,#case-content .detail-copy p{font-size:14px;line-height:1.65}
#case-content .story-section .chapter-kicker{font-size:12px}
#case-content .detail-copy h3{font-size:18px}
#case-content .story-section figure{margin-top:24px}
#case-content .next-step{margin-top:60px}
#case-content .next-step h2{font-size:24px}
#case-content footer{margin:0 20px}
#case-content .phone-pair{gap:18px}}
#case-content .site-header{background:#222;color:white;border-color:#555;max-width:1100px;margin:auto}
#case-content .site-header a{color:white}
#case-content .site-header img{background:white;border-radius:50%;padding:4px}
#case-content .case-subnav{padding:0;background:#222;border-color:#555}
#case-content .case-subnav>.container{width:calc(100% - 40px);max-width:1100px;margin:auto}
#case-content .container{max-width:1100px}
#case-content .case-social.container{width:calc(100% - 40px);max-width:1100px}
#case-content .social-author strong{font-weight:400}
#case-content .social-author span{color:#aaa}
#case-content .social-notes-body b{color:white}
#case-content .project-story-summary,#case-content .project-tags{color:#b8b8b9}
#case-content .case-article .story-section{margin-bottom:80px}
#case-content .story-section h2,#case-content .feature-copy h2{font-size:24px;font-weight:400;line-height:1.5}
#case-content .story-section p,#case-content .feature-copy p{font-size:16px;line-height:1.65;color:#b8b8b9}
#case-content .supporting-views img{border-radius:14px}
#case-content .next-step{border-color:#444}
#case-content .next-step p{color:#bbb}
#case-content .next-step button{color:white;border-color:#777}
#case-content .next-step .contact{background:#f00;color:white}
#case-content .hrh-mobile{display:flex;justify-content:center;align-items:start;gap:30px}
#case-content .hrh-mobile img{width:100%;border-radius:22px}
#case-content .hrh-mobile figure{width:300px;max-width:45%;margin:0}
@media (max-width:700px){#case-content .site-header{padding:16px 20px}
#case-content .site-header nav{gap:14px}
#case-content .case-social.container{width:calc(100% - 40px)}
#case-content .story-section h2,#case-content .feature-copy h2{font-size:20px}
#case-content .story-section p,#case-content .feature-copy p{font-size:14px;line-height:1.65}
#case-content .social-notes-body{max-height:none;overflow:visible}
#case-content .case-article .story-section{margin-bottom:48px}
#case-content .project-story-summary{font-size:14px;line-height:1.65}
#case-content .hrh-mobile{gap:16px}
#case-content .hrh-mobile img{border-radius:12px}}
#case-content .project-story-summary{max-width:840px;margin:24px auto 0;font-size:17px;line-height:1.9;color:#68616b}
#case-content .supporting-views{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
#case-content .supporting-views figure{min-width:0;margin-top:24px}
#case-content .supporting-views img{width:100%;height:auto}
@media (max-width:700px){#case-content .project-story-summary{font-size:15px;line-height:1.85}
#case-content .supporting-views{grid-template-columns:1fr;gap:0}}
.case-site-main{padding:0!important;background:#222}#case-content{display:flow-root;margin:0;padding:0 0 50px;font-size:16px;line-height:1.65}#case-content .case-breadcrumb{display:flex;align-items:center;gap:8px;max-width:1100px;margin:auto;padding:24px 0;color:#bbb;font-size:14px}#case-content .case-breadcrumb div{display:flex;gap:24px;margin-left:auto}#case-content>header{margin:0 auto}#case-content h1,#case-content h2,#case-content h3,#case-content p{letter-spacing:normal}#case-content .case-breadcrumb a{color:#ddd}#case-content .social{scroll-margin-top:120px}#case-content .chapter{scroll-margin-top:130px}@media(max-width:700px){#case-content .case-breadcrumb{margin:0 20px;flex-wrap:wrap;font-size:12px}#case-content .case-breadcrumb div{width:100%;margin-left:0}#case-content{padding-right:0}#case-content .cta{padding:40px 20px}}
#case-content h1,#case-content h2,#case-content h3{color:#fff;font-family:inherit}#case-content .project-cover h2{color:#29232d}#case-content p,#case-content a,#case-content button,#case-content small,#case-content span{font-family:inherit}#case-content p{font-weight:400}#case-content header h1{color:#fff}#case-content .author b{color:#fff}#case-content .case-breadcrumb{font-weight:400}
@media(max-width:700px){#case-content header h1 span{display:block}#case-content header h1{font-size:28px}#case-content header .story-title{text-wrap:balance}}

#case-content .project-story-summary{color:#bbb}#case-content #case-lightbox h2{color:#29232d}