/* Artwork floats directly on the case canvas: no added gray/white panels. */
.case-intro{padding-top:44px}h1{font-size:clamp(44px,7.2vw,94px);max-width:1100px}.intro-copy{gap:48px;max-width:1120px}.intro-copy h2{font-size:clamp(26px,2.6vw,36px)}.intro-copy p{font-size:15px}.case-hero{background:transparent;max-width:760px;margin:32px auto 0;border-radius:5px}.hero-caption{max-width:760px;margin:12px auto 0}.facts{max-width:1120px;margin:0 auto}.feature-section{max-width:1120px;margin:auto;padding-top:65px}.section-title h2{font-size:clamp(34px,4vw,54px)}.chapter-index{margin-bottom:34px}.chapter-block{margin-bottom:64px}.chapter-heading{padding:26px 0 22px}.chapter-heading h3{font-size:clamp(26px,3vw,38px)}.chapter-items{display:grid;gap:44px}.feature-unit{display:grid;grid-template-columns:minmax(240px,.82fr) minmax(0,1.4fr);gap:38px;align-items:center;padding:24px 0;border-top:1px solid #ffffff20;min-width:0}.feature-copy{max-width:340px;min-width:0}.feature-copy h3{font:500 clamp(23px,2.3vw,31px)/1.16 Archivo,Arial,sans-serif;letter-spacing:-.035em;margin:13px 0 16px}.feature-copy>p{font-size:14px;line-height:1.65;color:#b8b8ac;margin:0}.feature-index{font-size:11px}.feature-points{margin:18px 0 0}.feature-points li{font-size:11px;padding:10px 0}.feature-media{width:100%;max-width:640px;margin:0;justify-self:center;min-width:0}#features .media-shell,#features .media-shell.is-phone{background:transparent;padding:0;border:0;border-radius:0;box-shadow:none;display:block}#features .screen-scroll{background:transparent;border:0;border-radius:4px;box-shadow:none;width:100%;max-height:none}#features .screen-image{display:block;width:100%;height:auto;max-height:410px;object-fit:contain;object-position:center top;filter:none}#features .media-shell.is-long .screen-scroll{max-height:400px}#features .media-shell.is-long .screen-image{max-height:none}#features .media-shell.is-phone .screen-scroll{width:100%;border:0;border-radius:0;background:transparent;box-shadow:none;max-height:470px}#features .media-phone .feature-media{max-width:235px}#features .media-phone .screen-image{max-height:470px}#features .media-phone.long-art .screen-image{max-height:none}#features .source-trimmed{clip-path:inset(1.2% 2.4% 5.9% 2.4% round 16px)}.source-caption{font-size:9px;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.source-caption>span{max-width:62%;line-height:1.5}.zoom-button{font-size:9px;padding:9px 11px;gap:8px;border:1px solid #f4cf3660;background:transparent;color:var(--yellow)}.zoom-button:hover{background:var(--yellow);color:var(--ink);transform:translateY(-2px)}.zoom-button .icon-arrow{font-size:13px}.role-section{max-width:1120px;margin:auto;padding-top:45px}.role-panel{padding:38px;gap:44px}.role-panel h2{font-size:clamp(34px,4vw,48px)}.role-panel .role-text{font-size:18px}.role-list li{font-size:13px}
/* 1Creators: alternating editorial spreads, with compact mobile interludes. */
.layout-1creators .feature-unit.position-1{grid-template-columns:minmax(0,1.4fr) minmax(240px,.82fr)}.layout-1creators .position-1 .feature-copy{order:2}.layout-1creators .media-phone{grid-template-columns:1fr 1fr;max-width:790px;margin:auto;width:100%}.layout-1creators .chapter-heading{border-top:2px solid #f4cf3680}.layout-1creators .case-hero{margin-right:0;max-width:700px}
/* OnStudio: a content workbench, two illustrated studies per row. */
.layout-onstudio .chapter-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}.layout-onstudio .feature-unit{grid-template-columns:1fr;align-content:start;gap:22px;padding-top:20px}.layout-onstudio .feature-media{order:-1;max-width:520px}.layout-onstudio .feature-copy{max-width:470px}.layout-onstudio .feature-copy h3{font-size:25px}.layout-onstudio .case-hero{max-width:700px;margin-left:0}.layout-onstudio .chapter-heading{display:flex;align-items:baseline;gap:26px}
/* Onlala: staggered portrait gallery; no large enclosing phone panels. */
.layout-onlala .chapter-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 70px;max-width:900px;margin:auto}.layout-onlala .feature-unit{grid-template-columns:1fr;gap:24px;align-content:start;border:0}.layout-onlala .feature-media{order:-1}.layout-onlala .feature-copy{margin:auto;width:100%}.layout-onlala .feature-unit:nth-child(even){margin-top:82px}.layout-onlala .case-hero{max-width:620px}.layout-onlala .intro-copy{grid-template-columns:1fr 1.2fr}
/* HiPlay: a chaptered vertical journey, anchored by a slim timeline. */
.layout-hi-play .chapter-items{border-left:1px solid #f4cf3655;margin-left:12px;padding-left:38px}.layout-hi-play .feature-unit{grid-template-columns:minmax(240px,1.2fr) minmax(0,.8fr);max-width:830px;position:relative}.layout-hi-play .feature-unit:before{content:'';position:absolute;left:-44px;top:34px;width:9px;height:9px;border-radius:50%;background:var(--yellow)}.layout-hi-play .case-hero{max-width:680px;margin-right:0}.layout-hi-play .chapter-heading{padding-left:50px}.layout-hi-play .feature-copy{max-width:390px}
/* Admin Console: a compact, offset pair of operational views. */
.layout-onlala-admin .chapter-items{grid-template-columns:1fr 1fr;gap:48px}.layout-onlala-admin .feature-unit{grid-template-columns:1fr;gap:26px;align-content:start}.layout-onlala-admin .feature-unit:nth-child(2){padding-top:90px}.layout-onlala-admin .feature-copy{max-width:450px}.layout-onlala-admin .feature-media{order:-1}.layout-onlala-admin .case-hero{max-width:650px;margin-left:0}.layout-onlala-admin .facts{grid-template-columns:1fr 1fr 1fr}
/* Tera: image-led magazine spreads with a narrow reading column. */
.layout-tera-group .feature-unit{grid-template-columns:1.5fr .85fr;gap:55px;padding:40px 0}.layout-tera-group .feature-media{order:-1}.layout-tera-group .feature-unit:nth-child(even){grid-template-columns:.85fr 1.5fr}.layout-tera-group .feature-unit:nth-child(even) .feature-media{order:2}.layout-tera-group .intro-copy{grid-template-columns:1.4fr 1fr}.layout-tera-group .case-hero{max-width:720px;margin-right:0}
/* 1Reels: compact, sequential three-column mobile storyboard. */
.layout-1reels .chapter-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.layout-1reels .feature-unit{display:flex;flex-direction:column;align-items:stretch;gap:22px;justify-content:flex-start}.layout-1reels .feature-media{order:-1}.layout-1reels .feature-copy h3{font-size:23px}.layout-1reels .feature-copy>p{font-size:13px}.layout-1reels .chapter-heading{display:flex;align-items:baseline;gap:25px}.layout-1reels .case-hero{max-width:660px}
/* Voting: persistent chapter labels next to compact administration studies. */
.layout-voting-admin .chapter-block{display:grid;grid-template-columns:210px minmax(0,1fr);gap:40px;border-top:1px solid #ffffff35;padding-top:25px}.layout-voting-admin .chapter-heading{position:sticky;top:90px;align-self:start;border:0;padding:8px 0}.layout-voting-admin .chapter-heading h3{font-size:27px}.layout-voting-admin .feature-unit{grid-template-columns:1fr;gap:20px;max-width:680px}.layout-voting-admin .feature-copy{max-width:590px}.layout-voting-admin .feature-copy h3{font-size:25px}.layout-voting-admin .feature-points{display:flex;gap:20px;flex-wrap:wrap}.layout-voting-admin .feature-points li{border:0;padding:0}.layout-voting-admin .case-hero{max-width:720px;margin-left:0}
/* OnEcom: paired steps, with the first step opening each workflow. */
.layout-onecom .chapter-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px}.layout-onecom .feature-unit{grid-template-columns:1fr;gap:22px;align-content:start}.layout-onecom .feature-unit:first-child{grid-column:1/-1;grid-template-columns:.8fr 1.3fr;gap:45px}.layout-onecom .feature-copy{max-width:450px}.layout-onecom .feature-copy h3{font-size:25px}.layout-onecom .feature-unit:not(:first-child) .feature-media{order:-1}.layout-onecom .case-hero{max-width:680px;margin-right:0}
/* Vietcombank: restrained responsive editorial, then a separate explorations grid. */
.layout-vcb-haha .feature-unit{grid-template-columns:.9fr 1.3fr}.layout-vcb-haha .media-phone{grid-template-columns:.8fr 1.2fr;max-width:760px;margin:auto;width:100%}.layout-vcb-haha .media-phone .feature-media{order:-1}.layout-vcb-haha .chapter-number-4 .chapter-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px}.layout-vcb-haha .chapter-number-4 .feature-unit{grid-template-columns:1fr;align-content:start;gap:24px}.layout-vcb-haha .chapter-number-4 .feature-media{order:-1}.layout-vcb-haha .case-hero{max-width:660px;margin-left:0}
/* GrabFood: compact campaign boards with mobile interruptions. */
.layout-grabfood .chapter-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px}.layout-grabfood .feature-unit{display:flex;flex-direction:column;gap:24px;align-items:stretch;justify-content:flex-start}.layout-grabfood .feature-media{order:-1}.layout-grabfood .feature-copy{max-width:450px}.layout-grabfood .feature-copy h3{font-size:24px}.layout-grabfood .chapter-number-1 .feature-unit:first-child{grid-column:1/-1;display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}.layout-grabfood .chapter-number-1 .feature-unit:first-child .feature-media{order:0}.layout-grabfood .case-hero{max-width:720px;margin-right:0}
/* Social: original artwork is the gallery, with no imitation device surround. */
.layout-social-media .chapter-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 30px}.layout-social-media .feature-unit{display:flex;flex-direction:column;gap:20px;align-items:stretch;justify-content:flex-start;border:0}.layout-social-media .feature-media{order:-1}.layout-social-media .feature-unit:nth-child(3n+2){padding-top:65px}.layout-social-media .feature-copy h3{font-size:23px}.layout-social-media .feature-copy>p{font-size:13px}.layout-social-media .feature-points{display:none}.layout-social-media .case-hero{max-width:650px}
/* Freelance: numbered horizontal portfolio bands, not a social poster grid. */
.layout-graphic-design .feature-unit{grid-template-columns:.75fr 1.4fr;gap:55px;padding:40px 0}.layout-graphic-design .feature-copy{position:relative;padding-left:36px}.layout-graphic-design .feature-index{position:absolute;left:0;top:5px;writing-mode:vertical-rl}.layout-graphic-design .feature-unit:nth-child(even){grid-template-columns:1.4fr .75fr}.layout-graphic-design .feature-unit:nth-child(even) .feature-copy{order:2}.layout-graphic-design .case-hero{max-width:700px;margin-left:0}
@media(max-width:1000px) and (min-width:761px){.feature-unit{gap:24px}.layout-1reels .chapter-items,.layout-social-media .chapter-items{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-voting-admin .chapter-block{grid-template-columns:170px minmax(0,1fr);gap:25px}.layout-voting-admin .chapter-heading h3{font-size:24px}}
@media(max-width:760px){h1{font-size:clamp(40px,11vw,66px)}.case-intro{padding-top:30px}.intro-copy,.layout-onlala .intro-copy,.layout-tera-group .intro-copy{grid-template-columns:1fr;gap:22px}.case-hero{margin-top:25px}.hero-caption{font-size:9px}.feature-section{padding-top:45px}.section-title h2{font-size:35px}.chapter-block{margin-bottom:42px}.chapter-heading h3{font-size:28px}.feature-unit,.layout-1creators .feature-unit.position-1,.layout-1creators .media-phone,.layout-hi-play .feature-unit,.layout-tera-group .feature-unit,.layout-tera-group .feature-unit:nth-child(even),.layout-onecom .feature-unit:first-child,.layout-vcb-haha .feature-unit,.layout-vcb-haha .media-phone,.layout-grabfood .chapter-number-1 .feature-unit:first-child,.layout-graphic-design .feature-unit,.layout-graphic-design .feature-unit:nth-child(even){grid-template-columns:1fr;gap:25px;padding:26px 0}.feature-copy,.layout-hi-play .feature-copy{max-width:none}.feature-copy h3{font-size:27px}.feature-copy>p{font-size:14px}.feature-unit .feature-copy{order:0!important}.feature-unit .feature-media{order:1!important}.feature-media{max-width:540px}#features .screen-image{max-height:360px}#features .media-shell.is-long .screen-scroll{max-height:350px}#features .media-phone .feature-media{max-width:240px}#features .media-phone .screen-image{max-height:460px}#features .media-phone.long-art .screen-image{max-height:none}#features .media-shell.is-phone .screen-scroll{max-height:460px}.layout-onstudio .chapter-items,.layout-onlala .chapter-items,.layout-onlala-admin .chapter-items,.layout-1reels .chapter-items,.layout-onecom .chapter-items,.layout-vcb-haha .chapter-number-4 .chapter-items,.layout-grabfood .chapter-items,.layout-social-media .chapter-items{grid-template-columns:1fr;gap:30px}.layout-onlala .feature-unit:nth-child(even),.layout-onlala-admin .feature-unit:nth-child(2),.layout-social-media .feature-unit:nth-child(3n+2){margin-top:0;padding-top:26px}.layout-voting-admin .chapter-block{display:block;padding-top:0}.layout-voting-admin .chapter-heading{position:static;padding:24px 0}.layout-onstudio .chapter-heading,.layout-1reels .chapter-heading{display:block}.layout-hi-play .chapter-items{margin-left:0;padding-left:20px}.layout-hi-play .feature-unit:before{left:-25px}.layout-hi-play .chapter-heading{padding-left:20px}.layout-onlala-admin .facts{grid-template-columns:1fr}.layout-graphic-design .feature-copy{padding-left:28px}.source-caption>span{max-width:58%}.role-panel{padding:27px;gap:24px}.role-panel .role-text{font-size:17px}.role-panel h2{font-size:38px}}
/* The enlarged artwork viewer follows the same dark canvas. */
dialog,dialog .dialog-bar{background:#151510;color:#edece6}dialog button{background:#f4cf36;color:#151510}dialog{border:1px solid #ffffff30}