/* SBS entry page for all tools ([sbs_smart_home]). Same look as the KNX Smart Builder and the SBS designers. */
html body .sbs-hub{--ink:#101828;--muted:#5d6675;--line:#e3e1dc;--soft:#faf7f0;--gold:#c19031;--gold-lt:#f3e8d2;box-sizing:border-box;--sbs-w:min(1180px,calc(var(--sbs-vw,100vw) - 32px));--sbs-x:calc((var(--sbs-vw,100vw) - var(--sbs-w)) / 2);width:var(--sbs-w);max-width:none!important;margin-left:calc(var(--sbs-x) - var(--sbs-px,0px))!important;margin-right:0!important;/* centred on the page on any theme: --sbs-vw = page width without scrollbar, --sbs-px = where the theme column starts (hub.js) */color:var(--ink);font-family:inherit;font-size:16px;line-height:1.55;text-align:left}
html body .sbs-hub *{box-sizing:border-box}
html body .sbs-hub h1,html body .sbs-hub h2{font-family:inherit;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0}
html body .sbs-hub h2{font-size:clamp(26px,3vw,34px);line-height:1.2;margin-bottom:10px}
html body .sbs-hub-eyebrow{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
html body .sbs-hub-sub{max-width:720px;margin:0 0 22px;color:var(--muted)}
html body .sbs-hub section{margin:0 0 56px}

/* buttons */
html body .sbs-hub-actions{display:flex;flex-wrap:wrap;gap:10px}
html body .sbs-hub a.sbs-hub-btn{display:inline-block;padding:13px 22px;border-radius:6px;background:var(--gold);border:1px solid var(--gold);color:#fff;font-weight:600;text-decoration:none;line-height:1.2;transition:filter .15s,background .15s}
html body .sbs-hub a.sbs-hub-btn:hover{filter:brightness(.94)}
html body .sbs-hub a.sbs-hub-btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.75);color:#fff;backdrop-filter:blur(2px)}
html body .sbs-hub a.sbs-hub-btn-ghost:hover{background:rgba(255,255,255,.18);filter:none}
html body .sbs-hub a.sbs-hub-btn-line{background:#fff;color:var(--ink);border-color:var(--gold)}
html body .sbs-hub a.sbs-hub-btn-line:hover{background:var(--soft);filter:none}

/* hero with moving photos */
html body .sbs-hub-hero{position:relative;overflow:hidden;border-radius:14px;min-height:clamp(480px,72vh,660px);display:flex;align-items:center;background:#1b1f27;color:#fff;isolation:isolate}
html body .sbs-hub-slides{position:absolute;inset:0;z-index:-2}
html body .sbs-hub-slide{position:absolute;inset:0;background:#1b1f27 center/cover no-repeat;opacity:0;transform:scale(1.02);transition:opacity 1.8s ease}
html body .sbs-hub-slide.on{opacity:1;animation:sbsHubZoom 9s linear forwards}
html body .sbs-hub-slide.was{opacity:0;transform:scale(1.1)}
@keyframes sbsHubZoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
html body .sbs-hub-slide span{position:absolute;right:calc(5% + 18px);bottom:calc(5% + 10px);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,.5)}
html body .sbs-hub-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,24,40,.82) 0%,rgba(16,24,40,.55) 42%,rgba(16,24,40,.12) 72%,rgba(16,24,40,0) 100%)}
html body .sbs-hub-hero-in{max-width:760px;padding:48px clamp(22px,5vw,64px)}
html body .sbs-hub-hero h1{color:#fff;font-size:clamp(32px,4.4vw,52px);line-height:1.1;margin-bottom:16px}
html body .sbs-hub-hero .sbs-hub-eyebrow{color:#e6c37a}
html body .sbs-hub-lead{margin:0 0 26px;font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.88);max-width:560px}

/* three steps */
html body .sbs-hub-steps{list-style:none;margin:-30px 24px 56px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative;z-index:1}
html body .sbs-hub-steps li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(16,24,40,.08);font-size:14.5px;color:var(--muted);line-height:1.45}
html body .sbs-hub-steps li>span{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#fff;font-weight:700;font-size:14px;box-shadow:0 0 0 4px var(--gold-lt)}
html body .sbs-hub-steps b{display:block;color:var(--ink);font-size:16px;margin-bottom:2px}

/* builder feature */
html body .sbs-hub-builder{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--soft)}
html body .sbs-hub-builder-img{min-height:380px;background:center/cover no-repeat}
html body .sbs-hub-builder-txt{padding:clamp(24px,4vw,48px)}
html body .sbs-hub-builder-txt p{color:var(--muted);margin:0 0 14px}
html body .sbs-hub-builder-txt ul{margin:0 0 22px;padding:0;list-style:none}
html body .sbs-hub-builder-txt li{position:relative;padding-left:24px;margin:0 0 8px}
html body .sbs-hub-builder-txt li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--gold-lt)}

/* designer cards */
html body .sbs-hub-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
html body .sbs-hub a.sbs-hub-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .2s,transform .2s}
html body .sbs-hub a.sbs-hub-card:hover{border-color:var(--gold);box-shadow:0 10px 28px rgba(16,24,40,.10);transform:translateY(-2px)}
html body .sbs-hub-card-img{display:block;aspect-ratio:4/3;background:#f2f1ee center/cover no-repeat;transition:transform .6s ease}
html body .sbs-hub a.sbs-hub-card:hover .sbs-hub-card-img{transform:scale(1.04)}
html body .sbs-hub-card-txt{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
html body .sbs-hub-card-txt b{font-size:19px;font-weight:600}
html body .sbs-hub-card-txt>span{font-size:14px;color:var(--muted);line-height:1.45;flex:1}
html body .sbs-hub-card-txt em{font-style:normal;font-weight:600;font-size:14px;color:var(--gold)}
html body .sbs-hub-card-txt em::after{content:" \2192"}

/* why */
html body .sbs-hub-why{padding:clamp(24px,4vw,44px);background:#101828;border-radius:14px;color:#cfd4dc}
html body .sbs-hub-why h2{color:#fff;margin-bottom:22px}
html body .sbs-hub-why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;font-size:14.5px;line-height:1.5}
html body .sbs-hub-why-grid b{display:block;color:#fff;font-size:16px;margin-bottom:6px;padding-top:12px;border-top:2px solid var(--gold)}

/* trade band and end */
html body .sbs-hub-trade{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:18px 22px;border:1px solid var(--gold);border-radius:12px;background:var(--soft)}
html body .sbs-hub-trade b{color:var(--ink)}
html body .sbs-hub-end{text-align:center;padding:10px 0 20px}
html body .sbs-hub-end .sbs-hub-actions{justify-content:center;margin-top:16px}

@media (max-width:980px){html body .sbs-hub-cards{grid-template-columns:repeat(2,minmax(0,1fr))}html body .sbs-hub-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
 html body .sbs-hub-steps{grid-template-columns:1fr;margin:16px 0 40px}
 html body .sbs-hub-builder{grid-template-columns:1fr}html body .sbs-hub-builder-img{min-height:240px}
 html body .sbs-hub-hero::after{background:linear-gradient(180deg,rgba(16,24,40,.35) 0%,rgba(16,24,40,.82) 70%)}
 html body .sbs-hub-hero{align-items:flex-end}
 html body .sbs-hub section{margin-bottom:40px}
}
@media (max-width:520px){html body .sbs-hub-cards,html body .sbs-hub-why-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html body .sbs-hub-slide{transition:none}html body .sbs-hub-slide.on{animation:none}html body .sbs-hub a.sbs-hub-card,html body .sbs-hub-card-img{transition:none}}
html body .sbs-hub-steps a{color:var(--gold);font-weight:600;text-decoration:none}html body .sbs-hub-steps a:hover{text-decoration:underline}
html body .sbs-hub-hero-in{max-width:820px}html body .sbs-hub-hero .sbs-hub-actions{gap:8px}html body .sbs-hub-hero a.sbs-hub-btn{padding:12px 18px}
/* SBS branding (CI gold), kept small: house icon in the hero, logo above the closing call to action */
html body .sbs-hub-brand{display:flex;align-items:center;gap:9px}
html body .sbs-hub-ico{display:inline-flex;width:22px;height:22px;color:#c19031;flex:none}
html body .sbs-hub-ico svg{width:100%;height:100%;display:block}
html body .sbs-hub-logo{display:block;width:200px;height:auto;margin:0 auto 18px;opacity:.95}
html body .sbs-hub-end{border-top:1px solid var(--line);padding-top:40px!important}

/* ===== Full screen layout (owner 2026-10-13, like the SBS website): photo area and navy band edge to edge, content stays 1180 px ===== */
html body .sbs-hub .sbs-hub-hero,html body .sbs-hub .sbs-hub-why{width:var(--sbs-vw,100vw);max-width:var(--sbs-vw,100vw);margin-left:calc(-1 * var(--sbs-x,0px));margin-right:0;border-radius:0} /* --sbs-x = where the page column starts (hub.js), works on any theme */
html body .sbs-hub .sbs-hub-hero{min-height:clamp(520px,86vh,820px)}
html body .sbs-hub .sbs-hub-hero-in{max-width:none;width:100%;padding-left:max(24px,calc(var(--sbs-x,0px) + 40px));padding-right:24px}
html body .sbs-hub .sbs-hub-hero-in>*{max-width:760px}
html body .sbs-hub .sbs-hub-hero::after{background:linear-gradient(90deg,rgba(16,24,40,.84) 0%,rgba(16,24,40,.6) 35%,rgba(16,24,40,.15) 65%,rgba(16,24,40,0) 100%)}
html body .sbs-hub .sbs-hub-slide span{right:max(24px,calc(var(--sbs-vw,100vw) / 2 - 590px + 24px))}
html body .sbs-hub .sbs-hub-why{padding:clamp(40px,6vw,72px) max(24px,calc(var(--sbs-x,0px) + 40px))}
@media (max-width:760px){html body .sbs-hub .sbs-hub-hero-in{padding:32px 20px}html body .sbs-hub .sbs-hub-hero::after{background:linear-gradient(180deg,rgba(16,24,40,.35) 0%,rgba(16,24,40,.85) 70%)}}
html body .sbs-hub .sbs-hub-hero-in>.sbs-hub-lead{max-width:600px}

/* WordPress block layouts force margin:auto !important on content blocks: a stronger selector keeps the hub centred on the page */
html body .sbs-hub.sbs-hub[data-hub]{margin-left:calc(var(--sbs-x) - var(--sbs-px,0px))!important;margin-right:0!important}
/* owner 2026-10-21: builder card photo = 5 photos, slow crossfade (6 s each, 30 s round), caption bottom right like the hero */
html body .sbs-hub-builder-img{position:relative;overflow:hidden;background:#1b1f27}
html body .sbs-hub-bslide{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;opacity:0;animation:sbsHubB 30s linear infinite;animation-delay:calc(var(--i) * 6s)}
html body .sbs-hub-bslide:first-child{opacity:1}
html body .sbs-hub-bslide span{position:absolute;right:16px;bottom:14px;font-size:12px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.6)}
@keyframes sbsHubB{0%{opacity:0;transform:scale(1.02)}4%{opacity:1}20%{opacity:1}24%{opacity:0;transform:scale(1.08)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){html body .sbs-hub-bslide{animation:none}html body .sbs-hub-bslide:not(:first-child){display:none}}
/* owner 2026-10-21: gold buttons like on smartbuildingsolutions.us: text + white box with the gold arrow */
html body .sbs-hub a.sbs-hub-btn.sbs-hub-btn-arrow{display:inline-flex;align-items:center;gap:18px;min-height:54px;padding:0 6px 0 22px;border-radius:12px;font-weight:500}
html body .sbs-hub a.sbs-hub-btn.sbs-hub-btn-arrow:hover{filter:none;background:#a37a22;border-color:#a37a22}
html body .sbs-hub-bi{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:8px;background:#fff;flex:none}
html body .sbs-hub-bi svg{width:24px;height:auto;display:block;transition:transform .2s}
html body .sbs-hub a.sbs-hub-btn-arrow:hover .sbs-hub-bi svg{transform:translateX(3px)}
html body .sbs-hub-hero a.sbs-hub-btn.sbs-hub-btn-arrow{padding:0 6px 0 18px}
/* owner 2026-10-21: outlined hero buttons with the white arrow box too, like "Visit Showroom" on the website */
html body .sbs-hub a.sbs-hub-btn-ghost.sbs-hub-btn-arrow{background:rgba(16,24,40,.25);border-color:rgba(255,255,255,.8)}
html body .sbs-hub a.sbs-hub-btn-ghost.sbs-hub-btn-arrow:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* owner 2026-10-21: phone: hero buttons all the same width, arrows in one line */
@media (max-width:760px){html body .sbs-hub-hero .sbs-hub-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px}html body .sbs-hub-hero a.sbs-hub-btn.sbs-hub-btn-arrow{width:100%;box-sizing:border-box;justify-content:space-between;margin:0}}
html body .sbs-hub .sbs-hub-hero-in>.sbs-hub-actions{max-width:none}
@media (max-width:760px){html body .sbs-hub .sbs-hub-hero-in{padding-top:128px}} /* owner 2026-10-21: room for a transparent theme header over the hero (home page) */
/* owner 2026-10-28: home page hero, small designer cards under the buttons. Desktop: one calm row; narrower screens: swipe row that slides by itself (hub.js) */
html body .sbs-hub .sbs-hub-hero-in>.sbs-hub-dstrip{max-width:none;margin-top:28px}
html body .sbs-hub-dstrip-in{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 6px;-webkit-overflow-scrolling:touch}
html body .sbs-hub-dstrip-in::-webkit-scrollbar{display:none}
html body .sbs-hub a.sbs-hub-dcard{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.6);border-radius:12px;overflow:hidden;text-decoration:none;color:#101828;box-shadow:0 10px 26px rgba(0,0,0,.22);transition:transform .2s ease,box-shadow .2s ease}
html body .sbs-hub a.sbs-hub-dcard:hover,html body .sbs-hub a.sbs-hub-dcard:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.3)}
html body .sbs-hub-dcard-img{display:block;aspect-ratio:3/2;background:#eee center/cover no-repeat}
html body .sbs-hub-dcard-txt{display:flex;flex-direction:column;gap:2px;padding:8px 11px 10px;line-height:1.25}
html body .sbs-hub-dcard-txt b{font-size:14px;font-weight:700;color:#101828}
html body .sbs-hub-dcard-txt>span{font-size:12px;font-weight:600;color:#a37a22;white-space:nowrap}
html body .sbs-hub-dcard-txt i{font-style:normal}
@media (max-width:760px){html body .sbs-hub .sbs-hub-hero-in>.sbs-hub-dstrip{margin:22px -20px 0}html body .sbs-hub-dstrip-in{padding-left:20px;padding-right:20px;scroll-padding-left:20px}html body .sbs-hub a.sbs-hub-dcard{flex-basis:138px}}
@media (prefers-reduced-motion:reduce){html body .sbs-hub a.sbs-hub-dcard{transition:none}}
/* the hero sits about 55 px under the transparent menu: with the designer cards it needs more height and top room, or the title slides under the menu */
html body .sbs-hub .sbs-hub-hero:has(.sbs-hub-dstrip){min-height:clamp(640px,96vh,900px)}
html body .sbs-hub .sbs-hub-hero:has(.sbs-hub-dstrip) .sbs-hub-hero-in{padding-top:130px;padding-bottom:40px}
/* owner 2026-11-07 (SEO, local search): home page block under the 3 steps, Las Vegas showroom + USA projects. Soft card look like the steps. */
html body .sbs-hub-local{margin:0 0 56px;padding:clamp(24px,4vw,40px);background:var(--soft);border:1px solid #e6dcc8;border-radius:16px}
html body .sbs-hub-local-head{max-width:760px;margin-bottom:22px}
html body .sbs-hub-local h2{font-size:clamp(23px,2.6vw,30px);line-height:1.2;margin:0 0 10px}
html body .sbs-hub-local-head p:last-child{margin:0;color:var(--muted);font-size:16px}
html body .sbs-hub-local-grid{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html body .sbs-hub-local-grid li{margin:0;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;font-size:14.5px;line-height:1.5;color:var(--muted)}
html body .sbs-hub-local-grid b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
html body .sbs-hub-local-grid a{color:#8a6420;font-weight:600;text-decoration:none}html body .sbs-hub-local-grid a:hover{text-decoration:underline}
html body .sbs-hub-local-actions{display:flex;flex-wrap:wrap;gap:10px}
html body .sbs-hub .sbs-hub-local a.sbs-hub-btn-ghost,html body .sbs-hub .sbs-hub-local a.sbs-hub-btn-ghost.sbs-hub-btn-arrow{background:#fff;border-color:var(--gold);color:#8a6420;backdrop-filter:none}
html body .sbs-hub .sbs-hub-local a.sbs-hub-btn-ghost:hover{background:var(--gold-lt);border-color:var(--gold)}
@media (max-width:980px){html body .sbs-hub-local-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){html body .sbs-hub-local-grid{grid-template-columns:1fr}html body .sbs-hub-local-actions{flex-direction:column}html body .sbs-hub-local-actions a.sbs-hub-btn{width:100%;justify-content:space-between}}