/* ============================================================
   Branding & Identity - page-specific brand-board showcase
   On top of styles.css + service-page.css
   ============================================================ */

.brand-board{
  position:relative;z-index:1;margin:clamp(40px,6vw,68px) auto 0;max-width:1040px;
  display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto auto;gap:18px;
  padding:clamp(20px,3vw,30px);border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#16110e,#0c0d0e);border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-lg);
}
.bb-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 60% at 80% 0%,rgba(244,81,30,.20),transparent 60%);}
.bb-card{position:relative;z-index:1;background:#fff;border-radius:14px;padding:22px 24px;box-shadow:0 16px 40px -16px rgba(0,0,0,.5);}
.bb-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}

/* logo lockup (spans two rows on the left) */
.bb-logo{grid-row:1 / 3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:240px;}
.bb-mark{display:flex;align-items:center;gap:14px;animation:bbpop .7s cubic-bezier(.2,.8,.2,1) both;}
.bb-glyph{width:64px;height:64px;border-radius:16px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:34px;font-weight:800;box-shadow:0 12px 28px -8px rgba(244,81,30,.6);}
.bb-word{font-size:34px;font-weight:800;letter-spacing:-.035em;color:var(--ink);}
.bb-sub{margin-top:18px;font-size:13px;color:var(--muted);}
@keyframes bbpop{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}}

/* palette */
.bb-swatches{display:flex;gap:0;border-radius:10px;overflow:hidden;height:54px;}
.bb-swatches .sw{flex:1;transform-origin:bottom;animation:swGrow .6s cubic-bezier(.2,.8,.2,1) both;}
.sw-1{background:#F4511E;animation-delay:.05s;}
.sw-2{background:#FF6A3D;animation-delay:.13s;}
.sw-3{background:#0E0F11;animation-delay:.21s;}
.sw-4{background:#F7F6F3;border:1px solid #eee;animation-delay:.29s;}
.sw-5{background:#1F8A5B;animation-delay:.37s;}
@keyframes swGrow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.bb-hex{display:flex;justify-content:space-between;margin-top:11px;font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.02em;}

/* type */
.bb-type-big{font-size:52px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1;}
.bb-type-row{margin-top:8px;font-size:14px;font-weight:600;color:var(--ink);}
.bb-type-scale{display:flex;gap:14px;margin-top:8px;font-size:12px;color:var(--muted);}

/* voice / typing */
.bb-voice{grid-column:1 / 3;}
.bb-voice-body{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;line-height:1.6;color:#16181a;min-height:44px;letter-spacing:.01em;}

/* reuse caret from styles.css; ensure dark-on-light */
.brand-board .caret{background:var(--accent);}

@media (max-width:760px){
  .brand-board{grid-template-columns:1fr;}
  .bb-logo{grid-row:auto;min-height:180px;}
  .bb-voice{grid-column:auto;}
}