/* Three related campaign pages, with distinct client identities. */
.reference-design{--theme-accent:#ff009e;--theme-light:#00e7ff;--theme-panel:#03202d;--theme-rule:#007c99;background:radial-gradient(ellipse at 95% 10%,#062e3d80,transparent 40%),radial-gradient(ellipse at 0 60%,#54053544,transparent 50%),#020912}
.reference-hm{--theme-accent:#f2c64d;--theme-light:#ffe182;--theme-panel:#082b3d;--theme-rule:#9b7d32;background:radial-gradient(ellipse at 100% 38%,#aa731727,transparent 46%),linear-gradient(125deg,#021322,#092f43 55%,#041925)}
.reference-mm{--theme-accent:#ff009e;--theme-light:#24ecff;--theme-panel:#033443;--theme-rule:#008ba2;background:radial-gradient(ellipse at 10% 43%,#074767aa,transparent 45%),radial-gradient(ellipse at 95% 70%,#81157135,transparent 45%),#02121d}
.reference-design .ref-wrap,.reference-design #work>.wrap,.reference-design .faq>.wrap{width:min(1120px,calc(100% - 40px))}
.reference-design section{padding-block:24px}
.reference-design h1{font-size:clamp(2.2rem,4.1vw,3.55rem);line-height:1.02;letter-spacing:-.045em}
.reference-design h2{font-size:clamp(1.6rem,2.5vw,2.1rem);line-height:1.07}
.reference-design h3{font-family:'Barlow Condensed',Arial,sans-serif;font-size:1.18rem;font-weight:700;letter-spacing:0}
.reference-design .ref-main-hero{min-height:520px;grid-template-columns:1.03fr 1fr;padding-top:10px;padding-bottom:0}
.ref-main-hero .ref-brain{height:530px;width:112%;object-fit:contain}
.ref-main-hero .ref-hero-art{margin-left:-45px}.ref-main-hero .ref-hero-copy>p:not(.ref-kicker){max-width:41ch}
.reference-design .ref-btn{background:#ff009e;box-shadow:0 0 24px #ff009e25;padding:15px 25px;font-size:.85rem}
.reference-design .ref-cards{gap:10px}.reference-design .ref-cards>div{padding:18px 12px;border-color:var(--theme-rule);background:linear-gradient(145deg,var(--theme-panel),#00101bed);box-shadow:inset 0 0 22px #00ddff12,0 5px 20px #0003;border-radius:12px}
.reference-design .ref-cards p{font-size:.9rem}.reference-design .ref-cards .ref-icon{margin-bottom:8px;width:42px;height:42px}
.reference-design .ref-panel{padding:20px 18px;margin-block:8px;background:linear-gradient(140deg,#02313c88,#01101eee);border-color:var(--theme-rule);border-radius:18px}
.reference-design .ref-panel h2{margin-bottom:18px}.reference-design .ref-job-grid>div{padding:16px 10px}.reference-design .ref-job-grid .ref-icon{margin-bottom:8px}
.reference-design .ref-job-grid h3{font-family:'DM Sans',Arial,sans-serif;font-size:1rem;line-height:1.25;text-transform:none}
.reference-design .ref-studio{gap:30px;margin-block:15px}.reference-design .ref-studio .support-art{border:0;background:transparent}.reference-design .ref-studio .support-art img{mask-image:radial-gradient(ellipse at center,black 58%,transparent 98%)}
.reference-design .ref-studio h2{font-size:2rem}.reference-design .ref-studio .ref-scribble{font-size:1.7rem;margin:12px 0;color:#00e3f5}
.reference-design .ref-case-hero{min-height:550px;padding:0}.reference-design .ref-case-inner{min-height:570px;display:block}.reference-design .ref-case-hero .ref-hero-copy{width:52%;max-width:560px;padding:52px 0 28px;position:relative;z-index:4}.reference-design .ref-case-art{inset:0 calc((1120px - 100vw)/2) 0 22%;min-width:78%;overflow:visible}
.reference-design .ref-case-art:after{background:linear-gradient(90deg,#021322 0%,#021322c7 20%,#02132230 55%,transparent 80%),linear-gradient(0deg,#021322,transparent 30%)}
.reference-design .hm .ref-case-art .ref-scene{object-position:67% 65%}
.reference-design .ref-case-art .ref-client-logo{top:24px;right:7%;width:230px;max-height:190px;padding:8px;background:#fffdf4f5;box-shadow:0 10px 35px #0002}
.reference-design .hm .ref-case-art .ref-client-logo{border:1px solid #d5b155;border-radius:12px}
.reference-design .ref-case-art .ref-scribble{bottom:34px;right:6%;font-size:2rem;background:#021322b0;max-width:210px}
.reference-design .ref-state{font-size:.8rem;margin-top:17px;color:#7ff7da}
.reference-design .ref-back{margin-bottom:12px;font-size:.8rem}.reference-design .ref-kicker{margin-bottom:12px}
.reference-design .ref-benefits{margin-top:-2px;margin-bottom:12px;padding-bottom:14px}
.reference-hm .ref-kicker{color:#f2c64d}.reference-hm .ref-story{background:#fff8e6;color:#082d42;border:1px solid #ceb265}.reference-hm .ref-story li:before{color:#ae8521}.reference-hm .ref-panel{background:linear-gradient(145deg,#0c3548,#021b2a)}
.reference-hm .ref-roadmap article{background:#0c3041;border-color:#8e742b}.reference-hm .ref-close{background:linear-gradient(120deg,#173e50,#061f30);border-color:#d1aa44}.reference-hm .ref-close .ref-icon{color:#f2c64d}.reference-hm .ref-status{color:#ffe18a}
.reference-design .mm .ref-case-art:after{background:linear-gradient(90deg,#02121d 0%,#02121dba 23%,transparent 67%),linear-gradient(0deg,#02121d 0%,transparent 35%)}
.reference-design .mm .ref-scene{filter:blur(2px) brightness(.85)}
.reference-design .mm .ref-mascot{height:82%;right:12%;bottom:0;width:auto;z-index:3}
.reference-design .mm .ref-client-logo{width:205px;max-height:142px;right:5%;top:13px;z-index:4}
.theme-rainbow{position:absolute;right:0;top:100px;width:320px;height:auto;z-index:1;opacity:.95;transform:rotate(10deg)}
.theme-sun{position:absolute;right:2%;top:235px;width:85px;height:auto;z-index:3;transform:rotate(10deg)}
.reference-design .mm .ref-case-art .ref-scribble{bottom:35px;right:2%;font-size:1.55rem;z-index:4;max-width:170px;background:#faf8ebed;color:#07314b;padding:15px;transform:rotate(6deg)}
.reference-design .ref-story{margin-block:20px;border-radius:15px;grid-template-columns:1.2fr 1fr}.reference-design .ref-story>img{min-height:250px;max-height:310px}.reference-design .ref-story>div{padding:25px 30px}.reference-design .ref-story h2{font-size:2.2rem;margin-bottom:12px}.reference-design .ref-story ul{font-size:1.25rem;margin:12px 0}.reference-design .ref-story li{margin:6px 0}.reference-design .ref-story small{font-size:.75rem}
.reference-design .nursery-story>div{position:relative;background:#fffdf2;overflow:hidden}.theme-hands{display:block;width:180px;height:45px;object-fit:contain;object-position:left;margin-bottom:10px}
.reference-mm .ref-roadmap article:nth-child(1){border-top:3px solid #ffe52a}.reference-mm .ref-roadmap article:nth-child(2){border-top:3px solid #fa129e}.reference-mm .ref-roadmap article:nth-child(3){border-top:3px solid #42da73}
.client-feature{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-block:8px}.client-feature .support-art{margin-top:15px;border:1px solid var(--theme-rule);max-height:300px}.client-feature .support-art img{max-height:300px;object-fit:contain}.client-feature .feature-list{padding:0}.client-feature .feature-list li{padding:13px 0;font-size:1rem}.client-feature .feature-list strong{font-size:1rem}.client-feature p{font-size:1rem}.client-feature .theme-note{font-size:.9rem;color:#b9d0dc}.client-feature h2{margin-bottom:14px}.reference-design .client-feature .brand-connection{margin:0}.communication-feature{border-top:1px solid #14616d;border-bottom:1px solid #14616d;padding-block:24px!important;margin-block:18px}
.reference-design .ref-roadmap h2{font-size:1.75rem}.reference-design .ref-roadmap article{padding:20px}.reference-design .ref-roadmap article h3{font-size:1.3rem}.reference-design .ref-roadmap .ref-status{margin-bottom:12px}.reference-design .ref-details{padding-block:12px}.reference-design .ref-close{margin-top:18px;padding:24px}.reference-design .ref-close h2{font-size:1.5rem}
@media(max-width:1160px){.reference-design .ref-case-art{right:-20px}.reference-design .ref-case-art .ref-client-logo{right:4%;width:190px}.reference-design .mm .ref-client-logo{width:170px}.reference-design .mm .ref-mascot{right:13%;height:76%}}
@media(max-width:760px){.reference-design .ref-wrap,.reference-design #work>.wrap,.reference-design .faq>.wrap{width:calc(100% - 28px)}.reference-design .ref-main-hero{display:block;position:relative;min-height:600px;padding-top:25px}.ref-main-hero .ref-hero-copy{width:76%;z-index:3}.ref-main-hero .ref-hero-copy h1{font-size:clamp(2rem,7.6vw,3rem)}.ref-main-hero .ref-hero-copy>p:not(.ref-kicker){font-size:1rem;max-width:28ch}.ref-main-hero .ref-hero-art{position:absolute;right:-14px;bottom:0;width:75%;margin:0;min-height:0}.ref-main-hero .ref-brain{width:100%;height:auto;max-height:360px}.ref-main-hero .ref-hero-art .ref-scribble{font-size:1.25rem;right:5px;bottom:0;max-width:160px}.ref-main-hero .ref-btn{max-width:270px;font-size:.8rem}.reference-design .ref-cards>div{padding:15px 9px}.reference-design .ref-cards h3{font-size:1.05rem}.reference-design .ref-cards p{font-size:.875rem}.reference-design .ref-panel{padding:18px 12px}.reference-design .ref-job-grid h3{font-size:.95rem}.reference-design .ref-studio{grid-template-columns:1fr;gap:10px}.reference-design .ref-studio .support-art{max-height:250px;overflow:hidden}.reference-design .ref-studio .support-art img{max-height:250px;object-fit:contain}.reference-design .ref-studio h2{font-size:1.7rem}.reference-design .ref-case-hero{min-height:690px}.reference-design .ref-case-inner{min-height:690px}.reference-design .ref-case-hero .ref-hero-copy{width:76%;padding:20px 0 0}.reference-design .ref-case-hero h1{font-size:clamp(1.8rem,7vw,2.8rem)}.reference-design .ref-case-hero .ref-hero-copy p:not(.ref-kicker){font-size:1rem;max-width:30ch}.reference-design .ref-case-art{inset:0 -14px 0 0;min-width:100%;overflow:hidden}.reference-design .ref-case-art .ref-scene{object-position:62% bottom}.reference-design .ref-case-art:after{background:linear-gradient(90deg,#021322ed,#0213228c 50%,#02132220),linear-gradient(180deg,#02132280,transparent 70%)}.reference-design .hm .ref-case-art .ref-scene{height:67%;top:auto;bottom:0;object-position:70% bottom}.reference-design .ref-case-art .ref-client-logo{top:auto;bottom:30px;right:8px;width:145px;max-height:140px}.reference-design .ref-case-art .ref-scribble{right:auto;left:5px;bottom:22px;font-size:1.5rem;max-width:165px}.reference-design .mm .ref-case-art:after{background:linear-gradient(180deg,#02121de8,#02121d88 45%,transparent 70%)}.reference-design .mm .ref-mascot{left:0;right:auto;width:70%;height:auto;max-height:48%;bottom:0}.reference-design .mm .ref-client-logo{right:4px;bottom:20px;top:auto;width:126px;max-height:100px}.theme-rainbow{top:auto;bottom:175px;right:-20px;width:220px}.theme-sun{top:auto;bottom:250px;right:15px;width:65px}.reference-design .mm .ref-case-art .ref-scribble{right:5px;left:auto;bottom:125px;font-size:1.2rem;max-width:120px;padding:8px;transform:rotate(3deg)}.reference-design .ref-story{grid-template-columns:1fr}.reference-design .ref-story>img{min-height:210px;max-height:240px}.reference-design .ref-story>div{padding:22px}.reference-design .ref-story h2{font-size:2rem}.client-feature{grid-template-columns:1fr;gap:15px}.client-feature .feature-list{margin-top:0}.reference-design .ref-close{padding:20px}.reference-design .ref-close h2{font-size:1.3rem}.reference-design .ref-steps>div:nth-child(2):after{display:none}}
@media(max-width:760px){.ref-main-hero .ref-hero-art .ref-scribble{transform:none;right:14px;max-width:150px}.reference-design .ref-case-art .ref-scribble{transform:none}.reference-design .ref-details .showcase,.reference-design .ref-details .showcase-in{padding:18px}.reference-design .ref-details .phone,.reference-design .ref-details .form{max-width:100%}}
/* Keep expandable-panel markers and CTA arrows inside their text layouts at enlarged text sizes. */
.reference-design .ref-details summary > span,
.reference-design .ref-btn > span { flex-shrink: 0; }
.reference-design .ref-details summary { gap: 12px; }