/* BROWNSTAS Website UI kit — shared portfolio layer, Figma 2023:795. */
body.website-ui {
 --bs-raw-white:#ffffff; --bs-raw-paper:#fafaf8; --bs-raw-ink:#171717;
 --bs-raw-muted:#656565; --bs-raw-line:#deded9; --bs-raw-dark:#181a1e;
 --bs-raw-onDark:#fafaf8; --bs-raw-mutedDark:#b9bbc0; --bs-raw-red:#ed3928; --bs-raw-hover:#363636;
 --bs-background:var(--bs-raw-white); --bs-surface:var(--bs-raw-paper);
 --bs-text:var(--bs-raw-ink); --bs-secondary:var(--bs-raw-muted); --bs-border:var(--bs-raw-line);
 --bs-dark:var(--bs-raw-dark); --bs-onDark:var(--bs-raw-onDark); --bs-mutedDark:var(--bs-raw-mutedDark);
 --bs-accent:var(--bs-raw-red); --bs-hover:var(--bs-raw-hover);
 --bs-space4:4px; --bs-space8:8px; --bs-space12:12px; --bs-space16:16px;
 --bs-space24:24px; --bs-space32:32px; --bs-space48:48px; --bs-space64:64px; --bs-space80:80px;
 --bs-radius0:0; --bs-radius8:8px; --bs-control52:52px;
}

/* Public portfolio only. Product demos and the robot scene keep their own styles. */
body.website-ui { --text:var(--bs-text); --muted:var(--bs-secondary); --line:var(--bs-border); --accent:var(--bs-accent); color:var(--bs-text); background:var(--bs-background); }
body.website-ui #main { --body-size:17px; --type-body:17px; --type-ui:16px; --type-caption:13px; }
body.website-ui #main :is(h1,h2,h3) { font-weight:400!important; letter-spacing:-.035em!important; text-wrap:balance; }
body.website-ui #main h1 { font-size:64px!important; line-height:72px!important; }
body.website-ui #main h2 { font-size:44px!important; line-height:50px!important; }
body.website-ui #main h3 { font-size:28px!important; line-height:35px!important; }
body.website-ui #main :is(p,li,dd) { font-size:17px!important; line-height:28px!important; }
body.website-ui #main :is(.owner-hero-desc,.studio-lead,.case-subtitle,.resume-role,.resume-intro,.as-lead,.catalog-intro) { font-size:20px!important; line-height:32px!important; }
body.website-ui #main :is(.case-list-card h2,.sales-services article h2) { font-size:28px!important; line-height:35px!important; }
body.website-ui #main.account-service h1 { font-size:76px!important; line-height:79px!important; }
body.website-ui #main.account-service h2 { font-size:50px!important; line-height:55px!important; }
body.website-ui #main :is(.resume-support-copy,.resume-work-copy,.case-summary,.case-role dd) { font-size:17px!important; line-height:28px!important; }
body.website-ui :is(a,button,summary):focus-visible { outline:2px solid var(--bs-accent)!important; outline-offset:5px; }
body.website-ui #main :is(.btn,.as-button,.case-inquiry,.home-close__cta) { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:52px!important; padding:12px 24px!important; border:1px solid var(--bs-text)!important; border-radius:0!important; background:var(--bs-text)!important; color:var(--bs-onDark)!important; font-size:16px!important; font-weight:400!important; line-height:23px!important; text-decoration:none!important; width:fit-content; max-width:100%; box-sizing:border-box; transition:background .18s,color .18s; }
body.website-ui #main :is(.btn,.as-button,.case-inquiry,.home-close__cta):hover { background:var(--bs-hover)!important; }
body.website-ui #main :is(.text-link,.project-heading-link,.home-work__link,.case-links a,.case-end-links a,.resume-hero-side a,.studio-copy a) { font-size:16px!important; line-height:23px!important; font-weight:400!important; min-height:44px; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; border-bottom:0!important; }
body.website-ui #main :is(.text-link,.project-heading-link,.home-work__link):hover { color:var(--bs-secondary)!important; }
body.website-ui #main .concept-options > :is(a,button) { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:52px!important; padding:12px 24px!important; border:1px solid var(--bs-onDark)!important; border-radius:0!important; background:var(--bs-onDark)!important; color:var(--bs-text)!important; font-size:16px!important; line-height:23px!important; font-weight:400!important; box-sizing:border-box; }
body.website-ui #main :is(.concept-label,.concept-note,.as-note) { font-size:13px!important; line-height:20px!important; }
body.website-ui .chrome--burger { width:44px!important; height:44px!important; padding:7px!important; }
body.website-ui .chrome--burger span { width:30px!important; height:2px!important; }
body.website-ui.portfolio-inner .chrome--burger span { background:var(--bs-text)!important; }
body.website-ui #main .portfolio-breadcrumbs { font-size:13px!important; line-height:20px!important; color:var(--bs-secondary); }
body.website-ui #main .portfolio-breadcrumbs :is(li,a,span) { font-size:13px!important; line-height:20px!important; }
body.website-ui #main .portfolio-breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; }
body.website-ui #main details { border:0!important; border-bottom:1px solid var(--bs-border)!important; padding:20px 0!important; background:transparent; }
body.website-ui #main summary { display:flex; align-items:center; justify-content:space-between; gap:24px; list-style:none; cursor:pointer; font-size:17px!important; line-height:28px!important; font-weight:400!important; padding:0!important; }
body.website-ui #main summary::-webkit-details-marker { display:none; }
body.website-ui #main summary > span[aria-hidden] { display:none!important; }
body.website-ui #main summary::after { content:'+'; flex:0 0 28px; font-size:28px; line-height:28px; font-weight:400; border:0; background:transparent; transform:none; width:28px; height:28px; text-align:center; }
body.website-ui #main details[open] > summary::after { content:'−'; transform:none; }
body.website-ui #main details > p { color:var(--bs-secondary); margin:16px 0 0; max-width:70ch; }
body.website-ui #main :is(.home-method,.home-questions,.home-works,.studio-block) { padding-top:80px!important; padding-bottom:80px!important; }
body.website-ui #main .home-method__flow > div { border-left:0!important; border-top:1px solid var(--bs-border); padding:24px 0 0!important; }
body.website-ui #main .studio-block { --studio-ink:var(--bs-onDark); background:#000; color:var(--bs-onDark); box-shadow:0 0 0 100vmax #000; }
body.website-ui #main .studio-block::before { background:#000; }
body.website-ui #main .studio-block :is(h2,dt,a,.studio-label,.studio-service__result>p) { color:var(--bs-onDark)!important; }
body.website-ui #main .studio-block :is(.studio-lead,.studio-service__intro>p,.studio-service__scope dd,.studio-service__result>span) { color:var(--bs-mutedDark)!important; }
body.website-ui #main .studio-block :is(.studio-service__scope>div,.studio-service__result) { border-color:#343434; }
body.website-ui #main :is(.home-close,.as-start,.case-contact,.editorial-start) { --bs-text:#fffaf7; --bs-onDark:#171717; --bs-accent:#b92e24; background:var(--bs-accent)!important; color:var(--bs-text)!important; border-radius:8px; padding:32px!important; }
body.website-ui #main .home-close::before { background:var(--bs-accent)!important; }
body.website-ui #main :is(.home-close,.as-start,.case-contact,.editorial-start) :is(h2,p,span,dt,dd,a:not(.btn):not(.as-button):not(.case-inquiry):not(.home-close__cta)) { color:var(--bs-text)!important; }
body.website-ui #main :is(.btn,.as-button,.case-inquiry,.home-close__cta) span { color:inherit!important; }
body.website-ui .owner-footer { color:var(--bs-text); }
body.website-ui .owner-footer :is(p,a,span) { font-size:13px!important; line-height:20px!important; }
body.website-ui .owner-footer a { min-height:44px; display:inline-flex; align-items:center; }
@media(max-width:809px) {
 body.website-ui #main h1,body.website-ui #main.account-service h1 { font-size:40px!important; line-height:44px!important; }
 body.website-ui #main h2,body.website-ui #main.account-service h2 { font-size:30px!important; line-height:34px!important; }
 body.website-ui #main h3,body.website-ui #main :is(.case-list-card h2,.sales-services article h2) { font-size:22px!important; line-height:28px!important; }
 body.website-ui #main :is(p,li,dd,.owner-hero-desc,.studio-lead,.case-subtitle,.resume-role,.resume-intro,.as-lead,.catalog-intro,.resume-support-copy,.resume-work-copy,.case-summary,.case-role dd) { font-size:16px!important; line-height:26px!important; }
 body.website-ui #main summary { font-size:16px!important; line-height:26px!important; }
 body.website-ui #main :is(.home-method,.home-questions,.home-works,.studio-block) { padding-top:64px!important; padding-bottom:64px!important; }
 body.website-ui #main :is(.home-close,.as-start,.case-contact,.editorial-start) { padding:24px!important; }
}

body.website-ui #main .studio-discuss { display:inline-flex; align-items:center; gap:16px; margin-top:24px; min-height:44px; }

@media(min-width:810px) {
 body.website-ui #main .case-list-section,body.website-ui #main .case-list-section .sales-heading { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); column-gap:64px; }
}

body.website-ui #main .home-works { margin-top:40px; padding-top:0!important; padding-bottom:0!important; }
/* Contact panel states are shared across home, cases and service pages. */
body.website-ui #main :is(.home-close,.as-start,.case-contact,.editorial-start) :is(.btn,.as-button,.case-inquiry,.home-close__cta):hover { background:#ffe0d9!important; }
body.website-ui #main :is(.home-close,.as-start,.case-contact,.editorial-start) a:focus-visible { outline-color:#fffaf7!important; }
body.website-ui #main .home-close__aside>div { border-color:#ffffff55; }
body.website-ui #main :is(.case-end a,.resume-project h3 a) { text-decoration-thickness:1px; text-underline-offset:5px; }
body.website-ui #main .case-end a { border-bottom:0; text-decoration:underline; min-height:44px; display:inline-flex; align-items:center; }
body.website-ui #main #robot-response:empty { display:none; }
@media(max-width:809px) {
 body.website-ui.robot-home #main .hero.hero--robot { min-height:0!important; }
 body.website-ui.robot-home #main .hero.hero--robot .hero__content { padding-bottom:64px!important; }
}
body.website-ui #main :is(.sales-label,.eyebrow,.case-kicker,.resume-kicker,.studio-label,.as-kicker,.home-work__kind,.case-list-category,.chapter-visual h3,figcaption,.home-stage-output dt,.concept-label,.as-note) { font-size:13px!important; line-height:20px!important; letter-spacing:.04em; }
body.website-ui #main.case-catalog-main .catalog-intro { margin-bottom:48px; }