/* 6B shared button system: brand primitives, surface variants, shared states. */
:root{--button-brand:#c82032;--button-ink:#24201c;--button-paper:#f5efce;--button-white:#fff;--button-duration:220ms;--button-ease:cubic-bezier(.2,.7,.2,1);--button-radius:999px;--button-blur:16px;--button-font-size:15px;--button-height:52px;--button-gap:12px;--button-font-weight:600}
body{--button-fill:linear-gradient(125deg,#ffffff0d,#24201c24 55%,#ffffff08);--button-text:var(--button-paper);--button-border:#ffffff60;--button-hover-border:#ffffffa3;--button-shadow:inset 0 1px 0 #ffffff40,0 6px 18px #00000012;--button-hover-shadow:inset 0 1px 0 #ffffff66,0 9px 22px #00000026;--button-focus:var(--button-paper);--button-fallback:#38332e;--button-divider:#38332e}
:is(.work-page,.journal-page,.guide-page) main,.home-page .capability-story,.home-page .work-band,.home-page .studio-guides,.site-nav .mega,.consent-banner,.consent-dialog,.lightbox{--button-fill:linear-gradient(125deg,#ffffff80,#ffffff2e 55%,#ffffff60);--button-text:#991b2a;--button-border:#991b2a66;--button-hover-border:#991b2ab3;--button-shadow:inset 0 1px 0 #ffffffaa,0 6px 18px #24201c12;--button-hover-shadow:inset 0 1px 0 #fff,0 9px 22px #24201c26;--button-focus:#991b2a;--button-fallback:#f9f4df;--button-divider:var(--button-paper)}
.site-footer,.site-nav,.closing,.work-archive .portfolio-project-info,.guide-resource{--button-fill:linear-gradient(125deg,#ffffff0d,#24201c24 55%,#ffffff08);--button-text:var(--button-paper);--button-border:#ffffff60;--button-hover-border:#ffffffa3;--button-shadow:inset 0 1px 0 #ffffff40,0 6px 18px #00000012;--button-hover-shadow:inset 0 1px 0 #ffffff66,0 9px 22px #00000026;--button-focus:var(--button-paper);--button-fallback:#38332e;--button-divider:#ac1729}
html body#top[data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]){background:var(--button-fill)!important;color:var(--button-text)!important;-webkit-text-fill-color:var(--button-text)!important;border:1px solid var(--button-border)!important;border-radius:var(--button-radius)!important;box-shadow:var(--button-shadow)!important;backdrop-filter:blur(var(--button-blur)) saturate(110%)!important;-webkit-backdrop-filter:blur(var(--button-blur)) saturate(110%)!important;font-family:inherit;font-size:var(--button-font-size)!important;font-weight:var(--button-font-weight)!important;line-height:1.4;letter-spacing:0;text-decoration:none!important;opacity:1;transition:transform var(--button-duration) var(--button-ease),box-shadow var(--button-duration) var(--button-ease),border-color var(--button-duration) var(--button-ease),filter var(--button-duration) var(--button-ease)!important}
html body#top[data-button-system] :is(a.pill,a.text-link,a.hero-work-link,.portfolio-actions a,.mega-intro>a,.service-content>a):not([hidden]){display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);min-height:var(--button-height);max-width:100%;padding:14px 22px!important;white-space:normal;text-align:center;box-sizing:border-box}
html body#top[data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]) svg:not(.pdf-file-icon){width:18px;height:18px;flex:0 0 18px;transition:transform var(--button-duration) var(--button-ease)!important}
@media(hover:hover){html body#top[data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]):not(:disabled):hover{transform:translateY(-2px)!important;border-color:var(--button-hover-border)!important;box-shadow:var(--button-hover-shadow)!important;filter:brightness(1.04)}html body#top[data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]):hover svg:not(.pdf-file-icon){transform:translate(2px,-2px)!important}}
html body#top[data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]):not(:disabled):active{transform:translateY(0) scale(.98)!important;box-shadow:inset 0 1px #ffffff66,0 2px 6px #0000001c!important}
html body#top[data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]):focus-visible{outline:3px solid var(--button-focus)!important;outline-offset:4px;box-shadow:0 0 0 2px var(--button-ink),var(--button-shadow)!important}
html body#top[data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]):disabled{opacity:.55;cursor:not-allowed;transform:none!important;filter:none}
/* Deliberate brand variant: selected filters and PDF downloads share the same treatment. */
html body#top[data-button-system] :is(.pdf-download.pill,.filters button[aria-pressed=true]){--button-fill:linear-gradient(125deg,#c82032f5,#a81929f2);--button-text:var(--button-white);--button-border:#ffffff88;--button-hover-border:#ffffffc2;--button-fallback:var(--button-brand)}
html body#top[data-button-system][data-button-system] #worksheet .pdf-download.pill{display:inline-grid!important;grid-template-columns:26px minmax(0,1fr);gap:12px;white-space:normal!important}
html body#top[data-button-system] .guide-download-link.pdf-download{display:inline-flex;align-items:center;gap:8px}html body#top[data-button-system] .pdf-download .pdf-file-icon{width:26px;height:30px;flex:0 0 26px}
html body#top[data-button-system] .pdf-download>span{min-width:0;flex-shrink:1;white-space:normal!important;overflow-wrap:break-word}
/* Grouped actions use the same glass, typography and motion as standalone buttons. */
html body#top[data-button-system] :is(.portfolio-action-group,.button-group){position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:460px;border-radius:var(--button-radius);border:1px solid var(--button-border);background:var(--button-fill);box-shadow:var(--button-shadow);backdrop-filter:blur(var(--button-blur)) saturate(110%);-webkit-backdrop-filter:blur(var(--button-blur)) saturate(110%);transition:transform var(--button-duration) var(--button-ease),box-shadow var(--button-duration) var(--button-ease),border-color var(--button-duration) var(--button-ease);isolation:isolate}
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a{background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;min-width:0;gap:8px;padding:14px 16px!important;white-space:nowrap;transform:none!important}
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) :is(.portfolio-detail,.button-group-primary){border-radius:999px 0 0 999px!important;padding-right:24px!important}html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) :is(.portfolio-live,.button-group-secondary){border-radius:0 999px 999px 0!important;padding-left:24px!important}
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a:hover{background:#ffffff10!important;box-shadow:none!important;transform:none!important}html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a:active{background:#ffffff20!important;transform:none!important}
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a:focus-visible{position:relative;z-index:3;outline-offset:3px;box-shadow:0 0 0 2px var(--button-ink)!important}
html body#top[data-button-system] :is(.portfolio-action-or,.button-group-divider){position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--button-border);border-radius:50%;background:var(--button-divider);color:var(--button-text);-webkit-text-fill-color:var(--button-text);box-shadow:inset 0 1px #ffffff40;font-family:var(--script);font-size:20px;line-height:1;pointer-events:none}
@media(hover:hover){html body#top[data-button-system] :is(.portfolio-action-group,.button-group):hover{transform:translateY(-2px);border-color:var(--button-hover-border);box-shadow:var(--button-hover-shadow)}}html body#top[data-button-system] :is(.portfolio-action-group,.button-group):has(a:active){transform:scale(.98)}
@media(max-width:800px){html body#top[data-button-system] :is(.portfolio-action-group,.button-group){--button-font-size:14px}html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a{padding:14px 10px!important;gap:6px}html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) :is(.portfolio-detail,.button-group-primary){padding-right:20px!important}html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) :is(.portfolio-live,.button-group-secondary){padding-left:20px!important}}
@media(max-width:360px){html body#top[data-button-system] :is(.portfolio-action-group,.button-group){--button-font-size:13px}html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) svg{width:14px!important;height:14px!important;flex-basis:14px!important}html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a{gap:4px!important;padding-inline:7px!important}html body#top[data-button-system] :is(.portfolio-action-or,.button-group-divider){width:26px;height:26px;font-size:18px}}
@media(prefers-reduced-motion:reduce){html:root body#top[data-button-system][data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]),html:root body#top[data-button-system][data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]) svg,html:root body#top[data-button-system][data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group),html:root body#top[data-button-system][data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a,html:root body#top[data-button-system][data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a svg{transition:none!important;transform:none!important}}
html:root:is(.reduce-motion,:has(.reduce-motion)) body#top[data-button-system][data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]),html:root:is(.reduce-motion,:has(.reduce-motion)) body#top[data-button-system][data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]) svg,html:root:is(.reduce-motion,:has(.reduce-motion)) body#top[data-button-system][data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group),html:root:is(.reduce-motion,:has(.reduce-motion)) body#top[data-button-system][data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a,html:root:is(.reduce-motion,:has(.reduce-motion)) body#top[data-button-system][data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a svg{transition:none!important;transform:none!important}
@supports not (backdrop-filter:blur(1px)){html body#top[data-button-system][data-button-system] :is(.pill,.text-link,.hero-work-link,.circle-link,.portfolio-actions a,.mega-intro>a,.service-content>a,button:not(.gallery-launch):not(.mega-toggle):not([data-cookie-settings])):not([hidden]),html body#top[data-button-system] :is(.portfolio-action-group,.button-group){background:var(--button-fallback)!important}}

/* Grouped action palette: ivory, charcoal and 6B red; shared glass and motion. */
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group){background:transparent;border-color:#ffffff70}
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) :is(.portfolio-detail,.button-group-primary){background:linear-gradient(125deg,#f5efcef5,#f5efcedb)!important;color:#24201c!important;-webkit-text-fill-color:#24201c!important;box-shadow:inset 0 1px #ffffff88!important}
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) :is(.portfolio-live,.button-group-secondary){background:linear-gradient(125deg,#38332ef5,#24201cdb)!important;color:#f5efce!important;-webkit-text-fill-color:#f5efce!important;box-shadow:inset 0 1px #ffffff30!important}
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) :is(.portfolio-action-or,.button-group-divider){background:linear-gradient(125deg,#c82032f5,#a81929f2);color:#fff;-webkit-text-fill-color:#fff;border:2px solid #f5efce;box-shadow:inset 0 1px #ffffff50,0 2px 8px #24201c33;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a:hover{filter:brightness(1.08)}

/* One grouped component for portfolio and hero; only labels and available width vary. */
html body#top[data-button-system] .hero-actions{width:100%;max-width:460px}
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) a{align-self:stretch!important;height:100%;white-space:normal}
html body#top[data-button-system] .button-group a>span{min-width:0;flex-shrink:1;white-space:normal;line-height:1.4;font-size:inherit!important;font-weight:inherit;letter-spacing:inherit}
/* Keep each segment's tint and text colour through hover and press states. */
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) :is(.portfolio-detail,.button-group-primary):is(:hover,:active){background:linear-gradient(125deg,#f5efcef5,#f5efcedb)!important;color:#24201c!important;-webkit-text-fill-color:#24201c!important;box-shadow:inset 0 1px #ffffff88!important}
html body#top[data-button-system][data-button-system] :is(#portfolio-gallery,.hero-actions) :is(.portfolio-action-group,.button-group) :is(.portfolio-live,.button-group-secondary):is(:hover,:active){background:linear-gradient(125deg,#38332ef5,#24201cdb)!important;color:#f5efce!important;-webkit-text-fill-color:#f5efce!important;box-shadow:inset 0 1px #ffffff30!important}