
/* SBH Studio: illustrative work, shared by the published site and the WordPress theme. */
.studio-showcase{background:var(--ink);color:#f7f7f2;padding-top:88px;padding-bottom:92px;border-top:1px solid #ffffff18}
.studio-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;align-items:end;margin-bottom:54px}
.studio-heading .eyebrow{color:var(--acid);margin-bottom:22px}
.studio-heading h2{font-size:clamp(44px,5.25vw,78px);line-height:1.04;letter-spacing:-.025em}
.studio-heading h2 em{font-style:italic;border-bottom:1px solid var(--acid);padding-bottom:3px}
.studio-heading>p{font-size:1.125rem;line-height:1.65;max-width:400px;color:#bfc4b6;padding-bottom:5px}
.studio-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:66px 44px}
.studio-example{min-width:0;scroll-margin-top:120px}
.studio-example-top{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #ffffff32;padding-top:18px;margin-bottom:24px}
.studio-example-top>span:first-child{font-size:.75rem;letter-spacing:.08em;color:#c5cbbb}
.studio-example-status{font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase;padding:6px 9px;border:1px solid #c8ff0070;color:var(--acid);white-space:nowrap}
.studio-example-copy h3{font-family:var(--display);font-size:clamp(30px,3.15vw,47px);font-weight:400;line-height:1.13;letter-spacing:-.015em;margin:0 0 18px}
.studio-example-copy>p{font-size:1.0625rem;line-height:1.65;color:#bfc4b6;max-width:43ch;margin:0 0 18px}
.studio-example-copy .brief-trigger,.studio-example-copy .line-link{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;font-size:.875rem;color:#f7f7f2;background:transparent;border:0;border-bottom:1px solid var(--acid);border-radius:0;padding:12px 0;margin:0 0 26px}
.studio-example-copy .brief-trigger svg,.studio-example-copy .line-link svg{width:17px;height:17px;color:var(--acid)}
.studio-example--creative{grid-column:1/-1;display:grid;grid-template-columns:1.07fr 1fr;column-gap:64px;align-items:center}
.studio-example--creative>.studio-example-top{grid-column:1/-1}
.studio-example--creative>.studio-example-copy{grid-column:2;grid-row:2;max-width:470px}
.studio-example--creative>.studio-example-preview{grid-column:1;grid-row:2;min-width:0}
.studio-example-proof{display:flex;flex-wrap:wrap;gap:9px 20px;padding:18px 0 0;border-top:1px solid #ffffff25;color:#c5cbbb;font-size:.8125rem;line-height:1.6;max-width:42ch}
.studio-example-preview{min-width:0}
.sbh-demo{font-family:var(--body);font-synthesis:none}
.sbh-demo button{font-family:var(--body);touch-action:manipulation}
.sbh-demo button:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.sbh-demo [hidden]{display:none!important}
.demo-switch{display:flex;align-items:center;justify-content:flex-start;gap:24px;margin:0 0 15px;min-height:35px}
.demo-switch button{padding:6px 0;border:0;border-bottom:1px solid transparent;background:transparent;color:#929b87;font-size:.875rem;line-height:1.35}
.demo-switch button[aria-pressed=true]{color:#f7f7f2;border-color:var(--acid)}
.demo-creative-stage{height:550px;background:#1c2119;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff18;padding:20px;overflow:hidden}
.demo-poster{height:100%;aspect-ratio:2/3;position:relative;isolation:isolate;overflow:hidden;background:#13200f;box-shadow:0 10px 30px #0002;transition:aspect-ratio .3s}
.demo-poster>img{width:100%;height:100%;object-fit:cover;object-position:center 60%;position:absolute;inset:0;z-index:-1}
.demo-poster-copy{position:absolute;inset:5% 7% auto;color:#fffceb}
.demo-poster-copy>span{font-size:clamp(7px,.65vw,10px);letter-spacing:.12em}
.demo-poster-copy>strong{display:block;margin-top:11%;font-family:var(--display);font-weight:400;font-size:clamp(28px,3.2vw,48px);line-height:1.02;letter-spacing:-.02em}
.demo-poster-copy em{font-style:italic}
.demo-poster-bottom{position:absolute;left:7%;bottom:4%;color:#fffdeb;letter-spacing:.1em;line-height:1.7;font-size:8px}
.demo-creative[data-format=square] .demo-poster{height:auto;width:100%;max-width:470px;aspect-ratio:1}
.demo-creative[data-format=square] .demo-poster>img{object-position:center 72%}
.demo-creative[data-format=square] .demo-poster-copy>strong{margin-top:5%;font-size:clamp(29px,3vw,46px)}
.demo-creative[data-format=story] .demo-poster{aspect-ratio:9/16}
.demo-caption{display:flex;justify-content:space-between;align-items:start;gap:15px;font-size:.75rem;line-height:1.5;color:#aab39f;padding-top:12px}
.demo-caption>span:last-child{text-align:right}
.demo-assistant{background:#f2f3ea;color:#1b2016;display:flex;flex-direction:column;min-height:584px;border:1px solid #d1d8c8}
.demo-chat-head{display:flex;align-items:center;gap:12px;padding:21px 23px;border-bottom:1px solid #d3d9cb}
.demo-chat-mark{width:45px;height:45px;display:grid;place-items:center;font-family:var(--display);font-size:24px;font-style:italic;color:var(--acid);background:var(--ink);flex:none}
.demo-chat-head strong{display:block;font-weight:500;font-size:1rem}
.demo-chat-head small{display:block;font-size:.75rem;color:#65705b;margin-top:3px}
.demo-status-dot{width:7px;height:7px;background:#728b21;border-radius:50%;margin-left:auto;flex:none}
.demo-chat-history{padding:25px 24px 20px;display:flex;flex-direction:column;gap:12px;min-height:245px;max-height:310px;overflow:auto;scrollbar-width:thin}
.demo-chat-date{font-size:.625rem;letter-spacing:.12em;color:#6c765f;align-self:center;margin-bottom:7px}
.demo-chat-bubble{font-size:.9375rem;line-height:1.6;padding:15px 17px;max-width:91%}
.demo-chat-answer{background:#fff;border:1px solid #dce1d5;align-self:flex-start;border-radius:0 12px 12px 12px}
.demo-chat-question{background:#e2edc8;align-self:flex-end;border-radius:12px 0 12px 12px}
.demo-chat-answer strong{display:block;font-weight:500;margin-bottom:7px}
.demo-chat-order{display:block;margin:10px 0 0;padding-top:9px;border-top:1px solid #dce1d5;font-size:.8125rem;color:#667456}
.demo-chat-choices{padding:17px 24px 25px;display:flex;flex-direction:column;gap:8px;margin-top:auto}
.demo-chat-choices>span{font-size:.625rem;letter-spacing:.12em;color:#6c765f;margin-bottom:4px}
.demo-chat-choices button{display:flex;justify-content:space-between;gap:16px;text-align:left;background:transparent;padding:12px 14px;border:1px solid #c8d1bc;font-size:.875rem;line-height:1.3}
.demo-chat-choices button:hover,.demo-chat-choices button[aria-pressed=true]{border-color:#657549;background:#e8efdb}
.demo-chat-foot{padding:13px 24px;border-top:1px solid #d3d9cb;display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:.6875rem;line-height:1.5;color:#6c765f}
.demo-chat-foot button{padding:3px 0;background:none;border:0;border-bottom:1px solid #899876;font-size:.6875rem;color:#323d27;flex:none}
.demo-app-stage{background:#20251c;border:1px solid #ffffff18;min-height:584px;padding:23px 16px;display:flex;justify-content:center;align-items:center}
.demo-device{width:280px;min-height:535px;background:#f7f7ef;color:#1c2416;border:7px solid #12160e;border-radius:34px;position:relative;overflow:hidden;box-shadow:0 14px 28px #0002;padding:12px 17px 23px}
.demo-device-status{display:flex;justify-content:space-between;font-size:10px;font-weight:600;padding:0 5px 16px}
.demo-device-home{position:absolute;bottom:8px;left:37%;width:26%;height:3px;background:#1c2416;border-radius:8px}
.demo-app-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid #d5dccb}
.demo-app-head>strong{font-family:var(--display);font-size:23px;line-height:1.15;font-weight:400}
.demo-bag{font-size:10px;white-space:nowrap}
.demo-bag b{display:inline-grid;place-items:center;margin-left:4px;font-weight:500;background:var(--acid);width:19px;height:19px;border-radius:50%}
.demo-shop-photo{height:211px;background:#e5e8dc;margin:15px 0 15px;overflow:hidden}
.demo-shop-photo img{width:100%;height:100%;object-fit:cover;object-position:center 65%}
.demo-overline{display:block;font-size:8px;letter-spacing:.12em;color:#637054}
.demo-shop-product h4{font-family:var(--display);font-weight:400;font-size:28px;margin:6px 0 10px;line-height:1.1}
.demo-shop-price{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.demo-quantity{display:flex;align-items:center;border:1px solid #b6c3a6;font-size:13px}
.demo-quantity button{background:none;border:0;min-width:28px;min-height:28px;font-size:17px;line-height:1}
.demo-quantity>span{min-width:20px;text-align:center}
.demo-app-action{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 13px;background:#172011;color:#f7f7ef;border:0;margin-top:16px;font-size:12px}
.demo-cart-recap{font-size:11px;line-height:1.5;color:#46543a;margin:10px 0 0;min-height:0}
.demo-cart-recap:empty{display:none}
.demo-device-foot{font-size:8px;line-height:1.5;color:#7d876e;text-align:center;margin:15px auto 0;max-width:210px}
.demo-game>p{font-size:14px;line-height:1.5;margin:21px 0}
.demo-memory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.demo-memory-card{aspect-ratio:.8;border:1px solid #b6c3a6;background:#e4e9d8;position:relative;border-radius:4px;padding:0;color:#2c3822;font-size:24px;display:grid;place-items:center}
.demo-memory-face{display:none}
.demo-memory-card.is-flipped,.demo-memory-card.is-matched{background:#faffeb;border-color:#8da758}
.demo-memory-card.is-matched{background:var(--acid);color:#182012}
.demo-memory-card.is-flipped .demo-memory-back,.demo-memory-card.is-matched .demo-memory-back{display:none}
.demo-memory-card.is-flipped .demo-memory-face,.demo-memory-card.is-matched .demo-memory-face{display:block}
.demo-game-status{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;margin-top:19px}
.demo-game-status button{padding:4px 0;border:0;border-bottom:1px solid #7d8e69;background:transparent;font-size:11px}
.studio-project-image{display:block;border:1px solid #ffffff26;background:#20251c;padding:16px;overflow:hidden}
.studio-project-image img{width:100%;height:510px;object-fit:contain}
.studio-example:not(.studio-example--creative) .studio-project-image img{height:575px}
.studio-example [data-demo]{min-width:0}
@media(max-width:1050px){.studio-heading{gap:35px}.studio-example--creative{column-gap:38px}.studio-examples{gap:52px 28px}.demo-creative-stage{height:490px}.demo-chat-head{padding:19px 17px}.demo-chat-history,.demo-chat-choices{padding-left:18px;padding-right:18px}.demo-chat-foot{padding-left:18px;padding-right:18px}}
@media(max-width:760px){.studio-showcase{padding-top:57px;padding-bottom:60px}.studio-heading{grid-template-columns:1fr;gap:25px;margin-bottom:38px}.studio-heading h2{font-size:51px}.studio-heading>p{font-size:1rem;max-width:40ch}.studio-examples{grid-template-columns:1fr;gap:47px}.studio-example--creative{display:flex;flex-direction:column;align-items:stretch;gap:0}.studio-example-top{margin-bottom:21px;padding-top:16px}.studio-example-top>span:first-child{font-size:.6875rem}.studio-example-status{font-size:.5625rem;padding:5px 6px;letter-spacing:.05em}.studio-example-copy h3{font-size:34px}.studio-example-copy>p{font-size:1rem}.studio-example--creative>.studio-example-preview{order:2}.studio-example-proof{display:none}.demo-creative-stage{height:460px;padding:16px}.demo-poster-copy>span{font-size:8px}.demo-poster-copy>strong{font-size:36px}.demo-creative[data-format=square] .demo-poster-copy>strong{font-size:34px}.demo-caption{font-size:.6875rem;gap:10px}.demo-assistant{min-height:580px}.demo-chat-head{padding:17px 15px;gap:10px}.demo-chat-mark{width:38px;height:38px;font-size:22px}.demo-chat-head strong{font-size:.875rem}.demo-chat-head small{font-size:.6875rem}.demo-chat-history{padding:22px 15px 17px;min-height:220px}.demo-chat-bubble{font-size:.875rem;padding:13px 14px;max-width:96%}.demo-chat-choices{padding:15px 15px 22px}.demo-chat-foot{padding:12px 15px;font-size:.625rem;gap:10px}.demo-chat-foot button{font-size:.625rem}.demo-app-stage{padding:20px 10px;min-height:580px}.demo-device{width:min(280px,100%)}.studio-project-image img,.studio-example:not(.studio-example--creative) .studio-project-image img{height:auto;max-height:540px}.studio-example{scroll-margin-top:95px}}
@media(max-width:360px){.demo-creative-stage{height:410px;padding:12px}.demo-poster-copy>strong{font-size:31px}.demo-creative[data-format=square] .demo-poster-copy>strong{font-size:28px}.demo-poster-bottom{font-size:7px}.demo-switch{gap:20px}.demo-device{padding-left:12px;padding-right:12px;border-width:6px}.demo-chat-mark{display:none}.demo-chat-head small{font-size:.625rem}}

.demo-scenario-label{color:#aab39f;font-size:.875rem;line-height:1.35;padding:6px 0}
.studio-example:not(.studio-example--creative) .studio-example-proof{display:none}

@media(min-width:761px) and (max-width:1050px){.pro-header .header-contact{display:none}}

.demo-action-arrow{display:inline-block;vertical-align:middle;flex:none}.demo-game-status button{display:inline-flex;align-items:center;gap:4px}.demo-memory-face svg{display:block}
