/* Four families. Layout stays with each section; visual rules live here. */
:root{
 --button-height:46px;--button-radius:3px;--button-gap:12px;
 --button-font:650 12px/1.3 ui-monospace,monospace;
 --button-width:clamp(220px,15.5vw,285px);
 --button-compact-width:clamp(180px,15.5vw,285px);
 --button-fill:var(--sbi-ink);--button-fill-ink:var(--sbi-white);
 --button-outline-ink:var(--sbi-ink);
 --button-outline-fill:transparent;--button-control-ink:var(--sbi-ink);--button-control-paper:transparent;
 --button-selected-fill:var(--sbi-ink);--button-selected-ink:var(--sbi-white);
}
.ai-hero,.interior-opening,.service-detail-figure{
 --button-fill:var(--sbi-white);--button-fill-ink:var(--sbi-ink);
 --button-outline-ink:var(--sbi-white);
}
[data-ui-button]{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root [data-ui-button="primary"],:root [data-ui-button="secondary"]{
 display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);
 width:min(100%,var(--button-width));max-width:100%;min-width:0;min-height:var(--button-height);
 padding:11px 16px;border:1px solid var(--button-outline-ink);border-radius:var(--button-radius);
 font:var(--button-font);letter-spacing:.025em;text-transform:uppercase;text-align:center;
 text-decoration:none;white-space:normal;cursor:pointer;box-shadow:none;
 transition:background-color 180ms,color 180ms,border-color 180ms;
}
:root [data-ui-button="primary"]{background:var(--button-fill);color:var(--button-fill-ink);border-color:var(--button-fill)}
:root [data-ui-button="secondary"]{background:var(--button-outline-fill);color:var(--button-outline-ink)}
:root [data-ui-size="compact"]{width:min(100%,var(--button-compact-width))}
:root [data-ui-surface="overlay"]{--button-fill:var(--sbi-ink);--button-fill-ink:var(--sbi-white);--button-outline-ink:var(--sbi-white);background:var(--sbi-ink);color:var(--sbi-white)}
:root [data-ui-button="text"]{
 display:inline-flex;align-items:center;gap:var(--button-gap);min-height:44px;
 padding:8px 0;border:0;border-radius:var(--button-radius);background:transparent;color:inherit;
 font:var(--button-font);letter-spacing:.025em;text-transform:uppercase;text-decoration:none;
 cursor:pointer;box-shadow:none;transition:color 180ms;
}
:root [data-ui-button="text"][data-ui-size="display"]{
 font:400 clamp(36px,5vw,90px)/1.1 'EditorialSans',sans-serif;letter-spacing:-.04em;
 text-transform:none;border-bottom:1px solid currentColor;padding-bottom:12px;gap:25px;
}
:root .entity-discover[data-ui-button="text"]{display:flex;justify-content:space-between;align-items:baseline;padding:0}
:root .ai-explore[data-ui-button="text"]{display:grid;grid-template-columns:1fr 2fr 20px}
:root .service-detail-explore[data-ui-button="text"]{display:grid;grid-template-columns:1fr 1fr 20px;border-top:1px dashed var(--sbi-gray-4)}
:root [data-ui-button] > .button-arrow{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.5;transform:none}
:root [data-ui-size="display"] > .button-arrow{width:35px;height:35px;flex-basis:35px}
:root [data-ui-button] > .scramble-label{min-width:0}

/* Native menu/disclosure/card layouts are integrated controls, not standalone CTAs. */
:root [data-ui-button="control"]{border-radius:var(--button-radius);cursor:pointer}
:root [data-ui-control="action"],:root [data-ui-control="selection"],:root [data-ui-control="toggle"]{
 display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;
 padding:10px 16px;border:1px solid currentColor;background:var(--button-control-paper);color:var(--button-control-ink);
 font:var(--button-font);letter-spacing:.025em;text-align:center;box-shadow:none;
 transition:background-color 180ms,color 180ms,border-color 180ms;
}
:root [data-ui-control="selection"]{text-transform:uppercase}
:root [data-ui-control="selection"]:is([aria-selected="true"],[aria-pressed="true"],.active){background:var(--button-selected-fill);border-color:var(--button-selected-fill);color:var(--button-selected-ink)}
:root :is(.ai-hero,.service-detail-figure) [data-ui-control="toggle"],:root .ai-hero [data-ui-control="action"]{color:var(--sbi-white);background:var(--sbi-ink)}
:root [data-ui-control="icon"]{
 display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
 width:44px;height:44px;min-width:44px;min-height:44px;padding:11px;
 border:1px solid currentColor;background:var(--sbi-white);color:var(--sbi-ink);box-shadow:none;
 transition:background-color 180ms,color 180ms,border-color 180ms;
}
:root [data-ui-control="icon"][data-ui-surface="overlay"]{background:var(--sbi-ink);color:var(--sbi-white);border-color:var(--sbi-white)}
:root [data-ui-control="menu"]{min-width:44px;min-height:44px}
:root [data-ui-control="pagination"]{min-width:44px;min-height:44px}
:root .entity-signal-toggle[data-ui-control="icon"]{background:var(--sbi-brand);color:var(--sbi-ink);border-color:transparent}
:root .service-motion-toggle[data-ui-control="icon"]{background:var(--sbi-gray-1);color:var(--sbi-ink);border-color:transparent}
.ai-motion-toggle svg{display:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
:root [data-ui-button][hidden]{display:none!important}

@media(hover:hover) and (pointer:fine){
 :root [data-ui-button="primary"]:not(:disabled):hover,:root [data-ui-button="secondary"]:not(:disabled):hover,
 :root [data-ui-control="icon"]:hover,:root [data-ui-control="toggle"]:hover,:root [data-ui-control="action"]:not(:disabled):hover,
 :root [data-ui-control="selection"]:not([aria-selected="true"]):not([aria-pressed="true"]):not(.active):hover{
  background:var(--sbi-brand);color:var(--sbi-ink);border-color:var(--sbi-ink);text-decoration:none;
 }
 :root [data-ui-button="text"]:hover .scramble-label{text-decoration:underline;text-decoration-color:var(--sbi-brand);text-underline-offset:5px}
 :root [data-ui-button="text"]:hover > .button-arrow{animation:button-arrow-blink 800ms steps(1,end) infinite}
}
:root [data-ui-button]:focus-visible{outline:2px solid var(--sbi-brand);outline-offset:4px}
:root [data-ui-button]:disabled,:root [data-ui-button][aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none}
@keyframes button-arrow-blink{50%{opacity:.3}}
@media(max-width:640px){:root{--button-compact-width:160px}:root [data-ui-control="selection"]{padding:10px 12px}:root .service-detail-explore[data-ui-button="text"]{grid-template-columns:1fr 20px}:root [data-ui-button="text"][data-ui-size="display"]{font-size:53px}}
@media(max-width:900px){
 :root .ai-motion-toggle[data-ui-control="toggle"]{width:44px;height:44px;min-width:44px;min-height:44px;padding:12px;border-color:transparent;gap:0}
 .ai-motion-toggle .motion-toggle-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .ai-motion-toggle[aria-pressed="false"] .motion-pause-icon,.ai-motion-toggle[aria-pressed="true"] .motion-play-icon{display:block}
 .ai-hero-figure .ai-computation-status,.service-detail-figure .ai-computation-status{top:18px;right:68px;flex-wrap:wrap;gap:4px 8px}
}
@media(prefers-reduced-motion:reduce){:root [data-ui-button]{transition:none}:root [data-ui-button] > .button-arrow{animation:none}}

/* Compact project opening: same action typography, 44px effective hit area. */
:root [data-ui-size="slim"]{width:min(100%,clamp(168px,15.3vw,210px));min-height:32px;height:32px;padding:6px 16px}
:root [data-ui-size="slim"]::before{content:'';position:absolute;inset:-6px 0}
:root .case-return[data-ui-button="text"]>.button-arrow{order:-1;transform:none}
:root .proposal-discover[data-ui-button="text"]{display:grid;grid-template-columns:1fr 1fr 20px;width:100%;padding:0}
:root .case-next-project[data-ui-control="card"]{font:var(--button-font);text-transform:uppercase;letter-spacing:.025em;border:1px solid var(--sbi-ink);border-radius:var(--button-radius);text-decoration:none;transition:background-color 180ms,color 180ms}
@media(hover:hover) and (pointer:fine){:root .case-next-project[data-ui-control="card"]:hover{background:var(--sbi-brand);color:var(--sbi-ink)}}