/* BBB design system v1 — 2026-10-16. Loads last. See BBB_DESIGN_SYSTEM.md */
:root{--ink:#051D25;--deep:#0A2C37;--signal:#F77F00;--paper:#E6ECEE;--graphite:#3E4A52;--chalk:#F2F4F3;--fog:#B9C4C8;
--disp:'Bricolage Grotesque',system-ui,sans-serif;--body:'Public Sans',system-ui,sans-serif}
body{font-family:var(--body)!important;color:var(--fog);background:var(--ink)}
h1,h2,h3,h4,.section-title,.bbbm-box h2{font-family:var(--disp)!important;text-transform:none!important;letter-spacing:-.025em!important;color:var(--chalk)}
h1{font-weight:800!important}
h2,h3,h4{font-weight:700!important}
p,li{color:var(--fog)}
/* buttons: sentence case, ink on orange for contrast */
.btn,.btn-primary,.bbbm-ok,button.btn{font-family:var(--body)!important;text-transform:none!important;letter-spacing:0!important;font-size:17px!important;color:var(--ink)!important;background:var(--signal);border-color:var(--signal);border-radius:2px!important}
.btn:hover,.btn-primary:hover,.bbbm-ok:hover{background:var(--chalk)!important;color:var(--ink)!important;border-color:var(--chalk)!important}
.btn-line{background:transparent!important;color:var(--signal)!important}
.btn-line:hover{color:var(--ink)!important}
.btn-ghost{text-transform:none!important;letter-spacing:0!important;font-size:17px!important}
.kicker{text-transform:none!important;letter-spacing:0!important;font-size:15px!important}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

/* header lockup: BBB mark + Gem City mark */
.lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.lockup img{width:52px!important;height:52px!important;max-width:none!important;border-radius:50%;background:#fff;object-fit:contain;display:block}
.lockup img.gcc{padding:9px 5px}
.lockup .with{font:600 13px/1 var(--body);color:var(--fog);letter-spacing:0}
.nav .links a,.gcc-links a{font-family:var(--body)!important;text-transform:none!important;letter-spacing:0!important;font-size:16px!important;font-weight:600!important}
@media(max-width:600px){.lockup img{width:42px!important;height:42px!important}.lockup img.gcc{padding:7px 4px}.lockup .with{display:none}.nav .links a,.gcc-links a{font-size:14px!important}.nav .links,.gcc-links{gap:12px!important}}

/* ---------- signature: sketch-to-board reveal ---------- */
.sk{padding:72px 16px;max-width:1160px;margin:0 auto;display:grid;gap:40px;align-items:center}
@media(min-width:900px){.sk{grid-template-columns:minmax(0,520px) 1fr;padding:112px 5%;gap:64px}}
.sk-stage{position:relative;aspect-ratio:1/1;background:var(--paper);border-radius:2px;overflow:hidden;
background-image:linear-gradient(rgba(62,74,82,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(62,74,82,.12) 1px,transparent 1px);background-size:24px 24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.sk-stage svg{position:absolute;inset:0;width:100%;height:100%}
.sk-stage path,.sk-stage circle,.sk-stage rect,.sk-stage line{fill:none;stroke:var(--graphite);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.sk-stage .soft{stroke-width:1.4;opacity:.7}
.sk-stage .hot{stroke:var(--signal);stroke-width:2.6}
.sk-board{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0)}
.sk-tag{position:absolute;left:12px;bottom:12px;background:rgba(5,29,37,.82);color:var(--chalk);font:600 13px/1.3 var(--body);padding:6px 10px;border-radius:2px;opacity:0;transition:opacity .4s}
.sk.go .sk-stage path,.sk.go .sk-stage circle,.sk.go .sk-stage rect,.sk.go .sk-stage line{animation:skdraw 1.6s cubic-bezier(.6,.05,.3,1) forwards;animation-delay:calc(var(--i,0) * 90ms)}
.sk.go .sk-board{animation:skwipe .9s cubic-bezier(.7,0,.2,1) 2.1s forwards}
.sk.go .sk-tag{opacity:1;transition-delay:3s}
.sk.show-sketch .sk-board{animation:none;clip-path:inset(0 100% 0 0)}
.sk.show-sketch .sk-stage path,.sk.show-sketch .sk-stage circle,.sk.show-sketch .sk-stage rect,.sk.show-sketch .sk-stage line{animation:none;stroke-dashoffset:0}
.sk.show-board .sk-board{animation:none;clip-path:inset(0 0 0 0)}
.sk.show-board .sk-tag{opacity:1;transition-delay:0s}
@keyframes skdraw{to{stroke-dashoffset:0}}
@keyframes skwipe{to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.sk .sk-board{clip-path:inset(0 0 0 0)!important;animation:none!important}.sk .sk-tag{opacity:1}.sk.show-sketch .sk-board{clip-path:inset(0 100% 0 0)!important}.sk .sk-stage *{animation:none!important;stroke-dashoffset:0!important}}
.sk-copy h2{font-size:clamp(30px,5vw,44px);line-height:1.08;margin-bottom:16px}
.sk-copy>p{font-size:19px;max-width:52ch;margin-bottom:28px}
.sk-steps{list-style:none;margin:0 0 28px;padding:0;counter-reset:s}
.sk-steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:16px 0;border-top:1px solid rgba(185,196,200,.18)}
.sk-steps li::before{content:counter(s);grid-row:span 2;width:36px;height:36px;border-radius:50%;border:2px solid var(--signal);color:var(--signal);font:700 16px/32px var(--disp);text-align:center}
.sk-steps b{font:700 19px/1.3 var(--disp);color:var(--chalk)}
.sk-steps span{font-size:17px}
.sk-ctl{display:flex;flex-wrap:wrap;gap:8px}
.sk-ctl button{font:600 15px/1 var(--body);background:transparent;color:var(--chalk);border:1px solid rgba(185,196,200,.4);border-radius:2px;padding:12px 14px;min-height:44px;cursor:pointer}
.sk-ctl button[aria-pressed=true]{border-color:var(--signal);color:var(--signal)}

/* real-work strip */
.work{padding:72px 16px;max-width:1160px;margin:0 auto}
@media(min-width:900px){.work{padding:96px 5%}}
.work h2{font-size:clamp(28px,4vw,35px);margin-bottom:8px}
.work>p{margin-bottom:28px;max-width:60ch}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:900px){.work-grid{grid-template-columns:repeat(4,1fr);gap:16px}}
.work-grid figure{margin:0}
.work-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:2px}
.work-grid figcaption{font-size:14px;margin-top:8px;color:var(--fog)}
.sk>*,.work-grid>*{min-width:0}
.sk img,.work img{max-width:100%}
.sk{grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.sk{grid-template-columns:minmax(0,520px) minmax(0,1fr)}}
h1,h2,h3{line-height:1.1}
.work-grid img{height:auto;aspect-ratio:1/1}
.sk.go .sk-tag{transition-delay:3.1s}
.gcc-hero{align-items:flex-start!important;text-align:left!important;padding-left:16px!important;padding-right:16px!important}
.gcc-hero p{margin-left:0!important;margin-right:0!important}
.gcc-hero .btn-group{justify-content:flex-start!important}
@media(min-width:900px){.gcc-hero{padding-left:8%!important}}
.gcc-final .section-title{text-align:center}
button{font-family:inherit}