/* Strongback Consulting — Design System, COMPONENT LAYER.
 * Page-level components, consolidated from the approved mockups so the
 * WordPress child theme and the mockups share ONE source of truth.
 * Pair with strongback-tokens.css (tokens + .sb-eyebrow / .sb-rule /
 * .sb-container / base element styles). Load tokens first, then this.
 *
 * Naming and values are copied verbatim from the mockups — do not fork them.
 */

/* ============================ SECTION SHELL ============================ */
.sb-section{ padding: var(--space-9) 0; border-top: var(--border-width) solid var(--border-subtle); }
.sb-section.tint{ background: var(--surface-subtle); }
.sb-section h2{ max-width:24ch; }
.sb-lede{ font-size: var(--text-lg); color: var(--text-muted); max-width:62ch; }

/* ============================ HERO ==================================== */
.sb-hero{ padding: var(--space-9) 0 var(--space-8); }
.sb-hero-copy{ max-width:760px; }
.sb-hero h1{ font-size: clamp(2.25rem, 4vw, var(--text-5xl)); max-width:16ch; }
.sb-hero-sub{ font-size: var(--text-lg); color: var(--text-muted); max-width:58ch; margin-top: var(--space-4); }
.sb-hero-ctas{ display:flex; gap: var(--space-4); flex-wrap:wrap; margin-top: var(--space-6); }

/* ============================ BUTTONS ================================= */
.sb-btn-primary{
  display:inline-block; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-md);
  background: var(--color-accent); color: var(--text-inverse); padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md); text-decoration:none; box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.sb-btn-primary:hover{ background: var(--color-accent-hover); text-decoration:none; transform: translateY(-1px); color: var(--text-inverse); }
.sb-btn-secondary{
  display:inline-block; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-md);
  background: var(--surface-page); color: var(--color-brand); padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md); text-decoration:none; border: var(--border-width) solid var(--border-brand);
  transition: background var(--dur-fast) var(--ease-out);
}
.sb-btn-secondary:hover{ background: var(--surface-muted); text-decoration:none; }
.sb-cta-row{ display:flex; align-items:center; gap: var(--space-5); flex-wrap:wrap; margin-top: var(--space-6); }

/* ============================ PROBLEM / STAT GRID ==================== */
.sb-grid-2{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--space-8); align-items:start; margin-top: var(--space-6); }
@media (max-width:820px){ .sb-grid-2{ grid-template-columns:1fr; } }
.sb-grid-2 p{ color: var(--text-muted); max-width:56ch; }
.sb-grid-2 strong{ color: var(--text-strong); font-weight: var(--weight-semibold); }
.sb-stat{ background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs); }
.sb-stat .num{ font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--color-accent); line-height:1; }
.sb-stat .label{ margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); max-width:30ch; }

/* ============================ PROCESS STEPS ========================== */
.sb-process{ margin-top: var(--space-6); }
.sb-step{ display:grid; grid-template-columns:64px 1fr; gap: var(--space-6); padding: var(--space-6) 0; border-top: var(--border-width) solid var(--border-subtle); }
.sb-step:last-child{ border-bottom: var(--border-width) solid var(--border-subtle); }
.sb-step-num{
  width:40px; height:40px; border-radius:50%; background: var(--surface-muted); color: var(--color-brand);
  font-family: var(--font-display); font-stretch:var(--font-display-stretch); font-weight: var(--weight-bold);
  font-size: var(--text-md); display:flex; align-items:center; justify-content:center;
}
.sb-step-title{ font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: var(--space-2); font-family:var(--font-display); font-stretch:var(--font-display-stretch); }
.sb-step-desc{ color: var(--text-muted); max-width:58ch; }
@media (max-width:600px){ .sb-step{ grid-template-columns:1fr; gap: var(--space-2); } }

/* ============================ FEATURE CARDS ========================== */
.sb-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width:820px){ .sb-cards{ grid-template-columns:1fr; } }
.sb-card{ background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs); }
.sb-card h4{ color: var(--text-strong); margin-bottom: var(--space-2); }
.sb-card p{ color: var(--text-muted); font-size: var(--text-sm); margin:0; }

/* ============================ SPOKE GRID (pillar) ==================== */
.sb-spokes{ display:grid; grid-template-columns:repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width:920px){ .sb-spokes{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .sb-spokes{ grid-template-columns:1fr; } }
.sb-spoke{
  display:flex; flex-direction:column; background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-xs); text-decoration:none;
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.sb-spoke:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--sb-blue-200); text-decoration:none; }
.sb-spoke-kicker{ font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); letter-spacing: var(--tracking-wide); text-transform:uppercase; margin-bottom: var(--space-3); }
.sb-spoke h3{ font-size: var(--text-xl); margin-bottom: var(--space-2); }
.sb-spoke p{ color: var(--text-muted); font-size: var(--text-sm); margin:0; flex:1; }
.sb-spoke .go{ margin-top: var(--space-4); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-accent); }
.sb-spoke.training{ border-top: var(--rule-accent) solid var(--sb-gold-deep); }
.sb-spoke.training .go{ color: var(--sb-gold-deep); }

/* ============================ PRESSURES (pillar) ==================== */
.sb-pressures{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width:820px){ .sb-pressures{ grid-template-columns:1fr; } }
.sb-pressure{ border-left: var(--rule-accent) solid var(--color-accent); padding-left: var(--space-5); }
.sb-pressure h4{ margin-bottom: var(--space-2); }
.sb-pressure p{ color: var(--text-muted); font-size: var(--text-sm); margin:0; }

/* ============================ BLOG POST LIST ======================== */
.sb-posts{ margin-top: var(--space-6); display:grid; grid-template-columns:1fr 1fr; gap: var(--space-4) var(--space-7); }
@media (max-width:760px){ .sb-posts{ grid-template-columns:1fr; } }
.sb-post{ display:block; padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--border-subtle); text-decoration:none; }
.sb-post:hover .t{ color: var(--color-accent); }
.sb-post .t{ font-weight: var(--weight-semibold); color: var(--text-strong); transition: color var(--dur-fast) var(--ease-out); }
.sb-post .m{ font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); margin-top: var(--space-1); }

/* ============================ EMAIL-CAPTURE MAGNET ================== */
.sb-magnet{ background: var(--surface-muted); border: var(--border-width) solid var(--sb-blue-100); border-radius: var(--radius-xl); padding: var(--space-7); display:grid; grid-template-columns:1.3fr 0.7fr; gap: var(--space-7); align-items:center; margin-top: var(--space-6); }
@media (max-width:820px){ .sb-magnet{ grid-template-columns:1fr; } }
.sb-magnet h3{ font-size: var(--text-2xl); }
.sb-magnet p{ color: var(--text-muted); margin-bottom:0; }
.sb-magnet-form{ display:flex; flex-direction:column; gap: var(--space-3); }
.sb-magnet-form input{
  font-family: var(--font-body); font-size: var(--text-md); padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-page);
}
.sb-magnet-form input:focus{ outline:none; box-shadow: var(--shadow-focus); border-color: var(--focus-ring); }
.sb-magnet-form button{
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-md);
  background: var(--color-accent); color: var(--text-inverse); padding: var(--space-3) var(--space-5);
  border:0; border-radius: var(--radius-md); cursor:pointer; transition: background var(--dur-fast) var(--ease-out);
}
.sb-magnet-form button:hover{ background: var(--color-accent-hover); }
.sb-magnet-form .fine{ font-size: var(--text-2xs); color: var(--text-subtle); }

/* ============================ INDUSTRY MINI-CARDS (pillar) ========= */
.sb-industries{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width:620px){ .sb-industries{ grid-template-columns:1fr; } }
.sb-ind{ display:block; text-decoration:none; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); transition: border-color var(--dur-fast) var(--ease-out); }
.sb-ind:hover{ border-color: var(--border-brand); text-decoration:none; }
.sb-ind .n{ font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-lg); }
.sb-ind .d{ color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* ============================ INDUSTRY ROWS (industries page) ====== */
.sb-industry{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items:start; padding: var(--space-8) 0; border-top: var(--border-width) solid var(--border-subtle); }
.sb-industry:first-of-type{ border-top:0; padding-top: var(--space-6); }
@media (max-width:820px){ .sb-industry{ grid-template-columns:1fr; gap: var(--space-5); } }
.sb-industry-head .sb-eyebrow{ display:block; }
.sb-industry h3{ margin-top: var(--space-2); max-width:16ch; }
.sb-industry-head p{ color: var(--text-subtle); font-size: var(--text-sm); max-width:38ch; }
.sb-industry-body p{ color: var(--text-muted); max-width:58ch; }
.sb-industry-body strong{ color: var(--text-strong); font-weight: var(--weight-semibold); }
.sb-industry-points{ list-style:none; margin: var(--space-5) 0 0; padding:0; display:flex; flex-direction:column; gap: var(--space-3); }
.sb-industry-points li{ display:grid; grid-template-columns: 18px 1fr; gap: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); max-width:58ch; }
.sb-industry-points li::before{ content:''; width:10px; height:10px; margin-top:5px; border-radius:2px; background: var(--color-accent); }
.sb-industry-link{ display:inline-block; margin-top: var(--space-5); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-brand); }

/* ============================ CASE STUDIES ========================= */
.sb-filters{ display:flex; flex-wrap:wrap; gap: var(--space-3); margin-top: var(--space-6); }
.sb-filter{
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium);
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-body);
  padding: var(--space-2) var(--space-5); cursor:pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.sb-filter:hover{ border-color: var(--border-brand); color: var(--color-brand); }
.sb-filter.active{ background: var(--color-brand-strong); border-color: var(--color-brand-strong); color: var(--text-inverse); }
.sb-cases{ display:grid; grid-template-columns:repeat(2,1fr); gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width:820px){ .sb-cases{ grid-template-columns:1fr; } }
.sb-case{
  display:block; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs);
  text-decoration:none; transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.sb-case:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--sb-blue-200); text-decoration:none; }
.sb-case.hidden{ display:none; }
.sb-case-meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-3); }
.sb-case-kicker{ font-family: var(--font-display); font-stretch:var(--font-display-stretch); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform:uppercase; color: var(--color-accent); }
.sb-case-ind{ font-size: var(--text-2xs); font-weight: var(--weight-semibold); padding:3px 10px; border-radius: var(--radius-pill); background: var(--sb-blue-100); color: var(--color-brand); }
.sb-case h3{ font-size: var(--text-xl); margin-bottom: var(--space-2); }
.sb-case p{ color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.sb-case .outcomes{ list-style:none; margin:0 0 var(--space-4); padding:0; display:flex; flex-direction:column; gap: var(--space-2); }
.sb-case .outcomes li{ display:grid; grid-template-columns:16px 1fr; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-body); }
.sb-case .outcomes li::before{ content:''; width:9px; height:9px; margin-top:6px; border-radius:2px; background: var(--color-accent); }
.sb-case .go{ font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-brand); }

/* ============================ INVERSE QUOTE BAND =================== */
.sb-inverse{ background: var(--surface-inverse); color: var(--text-inverse); }
.sb-inverse .sb-rule{ background: var(--color-accent); }
.sb-inverse h2{ color: var(--text-inverse); }
.sb-quote{ font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: var(--leading-snug); max-width:36ch; font-family: var(--font-display); font-stretch: var(--font-display-stretch); color: var(--text-inverse); }
.sb-quote .accent{ color: var(--sb-blue-300); }
.sb-quote-sign{ margin-top: var(--space-5); font-size: var(--text-sm); color: var(--sb-blue-200); }

/* ============================ COMPARE PANELS (signature) ========== */
.sb-compare{ margin-top: var(--space-9); display:grid; grid-template-columns:1fr 56px 1fr; align-items:stretch; gap:0; }
@media (max-width:760px){ .sb-compare{ grid-template-columns:1fr; } }
.sb-panel{ background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; }
.sb-panel.after{ border-color: var(--sb-blue-200); }
.sb-panel-head{ display:flex; align-items:center; justify-content:space-between; padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--border-subtle); }
.sb-panel.after .sb-panel-head{ background: var(--surface-muted); border-color: var(--sb-blue-100); }
.sb-panel-label{ font-family: var(--font-display); font-stretch:var(--font-display-stretch); font-weight: var(--weight-semibold); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform:uppercase; color: var(--text-subtle); }
.sb-panel.after .sb-panel-label{ color: var(--color-brand); }
.sb-tag{ font-size: var(--text-2xs); font-weight: var(--weight-semibold); padding:3px 8px; border-radius: var(--radius-pill); background: var(--sb-gray-100); color: var(--text-subtle); }
.sb-panel.after .sb-tag{ background: var(--sb-blue-100); color: var(--color-brand); }
.sb-panel-body{ padding: var(--space-5); font-family: var(--font-mono); font-size: var(--text-sm); flex:1; color: var(--text-body); }
.sb-panel-foot{ padding: var(--space-3) var(--space-5); border-top: var(--border-width) solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-subtle); }
.sb-pipe{ display:flex; align-items:center; justify-content:center; }
@media (max-width:760px){ .sb-pipe{ height:56px; transform:rotate(90deg); } }
.sb-pipe svg{ width:28px; height:28px; color: var(--color-accent); }

/* ============================ SITE HEADER (nav) ==================== */
.sb-nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.94); backdrop-filter:blur(6px); border-bottom:var(--border-width) solid var(--border-subtle); }
.sb-nav .sb-container{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.sb-logo{ display:flex; flex-direction:column; text-decoration:none; }
.sb-logo .mark{ display:flex; align-items:center; gap:10px; }
.sb-logo .glyph{ width:30px; height:30px; border-radius: var(--radius-sm); background: var(--color-brand-strong); position:relative; flex:none; }
.sb-logo .glyph::after{ content:''; position:absolute; left:7px; top:7px; width:16px; height:16px; background: var(--color-accent); border-radius:2px; }
.sb-logo-icon{ height:34px; width:auto; display:block; flex:none; }
.sb-logo .name{ font-family:var(--font-display); font-stretch:var(--font-display-stretch); font-weight:var(--weight-bold); font-size: var(--text-lg); color: var(--text-strong); letter-spacing: var(--tracking-tight); }
.sb-logo .tagline{ font-size: var(--text-2xs); color: var(--text-subtle); letter-spacing: var(--tracking-wide); text-transform:uppercase; margin-left:40px; margin-top:1px; }
.sb-navlinks{ display:flex; align-items:center; gap: var(--space-6); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.sb-navlinks a{ color: var(--text-muted); text-decoration:none; }
.sb-navlinks a:hover{ color: var(--text-strong); text-decoration:none; }
.sb-navlinks .crumb{ color: var(--text-subtle); }
.sb-navlinks .current{ color: var(--color-brand); }
.sb-btn-nav{
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  background: var(--color-accent); color: var(--text-inverse); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); text-decoration:none; transition: background var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.sb-btn-nav:hover{ background: var(--color-accent-hover); text-decoration:none; color: var(--text-inverse); }
/* --- mobile nav: hamburger + dropdown panel (≤860px) --- */
.sb-nav-toggle{ display:none; }
@media (max-width:860px){
  .sb-nav .sb-container{ gap: var(--space-3); }
  .sb-logo{ margin-right:auto; }
  .sb-nav-toggle,
  .sb-nav-toggle:hover, .sb-nav-toggle:focus, .sb-nav-toggle:active{ /* beat GP's button skin */
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:11px 10px; flex:none;
    background:transparent; border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md); cursor:pointer;
  }
  .sb-nav-toggle:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
  .sb-nav-toggle span{
    display:block; height:2px; width:100%; background: var(--text-strong); border-radius:1px;
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }
  .sb-nav.open .sb-nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .sb-nav.open .sb-nav-toggle span:nth-child(2){ opacity:0; }
  .sb-nav.open .sb-nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .sb-navlinks{
    display:none; position:absolute; top:76px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background: var(--surface-card); border-bottom: var(--border-width) solid var(--border-subtle);
    box-shadow: var(--shadow-md); padding: var(--space-2) 0;
  }
  .sb-nav.open .sb-navlinks{ display:flex; }
  .sb-navlinks a{ padding: var(--space-4) var(--space-6); border-top: var(--border-width) solid var(--border-subtle); }
  .sb-navlinks a:first-child{ border-top:0; }
  .sb-navlinks .sb-nav-menu-cta{
    display:inline-block; align-self:flex-start;
    margin: var(--space-3) var(--space-6) var(--space-3);
    padding: var(--space-3) var(--space-5); border-top:0;
    color: var(--text-inverse);
  }
}
/* The dropdown's own CTA only exists inside the mobile panel. */
.sb-nav-menu-cta{ display:none; }
@media (max-width:480px){
  .sb-logo .tagline{ display:none; }
  .sb-logo .name{ white-space:nowrap; }
  /* On small phones the bar CTA moves into the dropdown menu. */
  .sb-nav .sb-container > .sb-btn-nav{ display:none; }
}

/* ============================ SITE FOOTER ========================= */
.sb-footer{ background: var(--surface-inverse); color: var(--sb-blue-200); padding: var(--space-8) 0 var(--space-6); }
.sb-footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); }
@media (max-width:900px){ .sb-footer-grid{ grid-template-columns:1fr 1fr; gap: var(--space-6); } }
@media (max-width:560px){ .sb-footer-grid{ grid-template-columns:1fr; } }
.sb-social a{ display:inline-flex; align-items:center; gap: var(--space-2); }
.sb-social svg{ flex:none; opacity:0.85; }
.sb-footer h5{ font-family: var(--font-display); font-stretch: var(--font-display-stretch); color: var(--text-inverse); font-size: var(--text-sm); letter-spacing: var(--tracking-eyebrow); text-transform:uppercase; margin-bottom: var(--space-4); }
.sb-footer p, .sb-footer li{ font-size: var(--text-sm); color: var(--sb-blue-200); }
.sb-footer a{ color: var(--sb-blue-200); }
.sb-footer a:hover{ color: var(--text-inverse); }
.sb-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-2); }
.sb-footer-bottom{ margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--border-width) solid rgba(255,255,255,0.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--sb-blue-300); }

/* ============================ CODE BLOCK (Wazi manifest) =========== */
.sb-code{ margin-top: var(--space-6); background: var(--surface-ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow:hidden; }
.sb-code-head{ display:flex; align-items:center; gap:var(--space-2); padding: var(--space-3) var(--space-5); border-bottom:var(--border-width) solid rgba(255,255,255,0.10); }
.sb-code-dot{ width:11px; height:11px; border-radius:50%; background: var(--sb-gray-600); }
.sb-code-name{ margin-left: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--sb-gray-400); }
.sb-code pre{ margin:0; padding: var(--space-5); overflow-x:auto; font-family: var(--font-mono); font-size: var(--text-sm); line-height:1.6; color: var(--sb-blue-100); }
.sb-code .k{ color: var(--sb-blue-300); }
.sb-code .s{ color: var(--sb-knotty-pine); }
.sb-code .c{ color: var(--sb-gray-500); }

/* ============================ FLUENT FORMS SKIN ==================== */
/* Bring Fluent Forms' default UI onto the design system. Scoped to
 * .fluentform so nothing else is touched. */
.fluentform .ff-el-input--label label{
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  color: var(--text-strong); font-size: var(--text-sm);
}
.fluentform .ff-el-form-control,
.fluentform input[type=text], .fluentform input[type=email],
.fluentform select, .fluentform textarea{
  font-family: var(--font-body); font-size: var(--text-md); color: var(--text-body);
  background: var(--surface-page);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fluentform .ff-el-form-control:focus,
.fluentform input:focus, .fluentform select:focus, .fluentform textarea:focus{
  outline:none; box-shadow: var(--shadow-focus); border-color: var(--focus-ring);
}
.fluentform .ff-el-group{ margin-bottom: var(--space-5); }
.fluentform .ff-el-help-message, .fluentform .ff-el-tooltip{ color: var(--text-subtle); font-size: var(--text-xs); }
.fluentform .text-danger{ color: var(--sb-danger); font-size: var(--text-sm); }
.fluentform .ff-btn-submit{
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-md);
  background: var(--color-accent) !important; color: var(--text-inverse) !important;
  border: 0; border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fluentform .ff-btn-submit:hover{ background: var(--color-accent-hover) !important; transform: translateY(-1px); }
.fluentform .ff-message-success{
  background: var(--surface-muted); border: var(--border-width) solid var(--sb-blue-200);
  border-left: var(--rule-accent) solid var(--sb-success);
  border-radius: var(--radius-md); padding: var(--space-5);
  color: var(--text-strong); font-weight: var(--weight-medium);
}
/* keep the form at a comfortable reading width inside wide sections */
.fluentform{ max-width: 720px; }

/* Hide GeneratePress's default chrome — Strongback renders its own nav + footer
 * via wp_body_open / wp_footer (see child theme functions.php). GP's nav is also
 * disabled at the source (Customizer → Layout → Navigation = No Navigation, i.e.
 * generate_settings.nav_position_setting=''), so it never enters the DOM; the nav
 * selectors below are belt-and-suspenders if that setting is ever changed back. */
.site-header, .main-navigation, #site-navigation, .site-footer, .site-info { display:none !important; }

/* ===== training hub components ===== */
.sb-courses{ display:grid; grid-template-columns:repeat(2,1fr); gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width:760px){ .sb-courses{ grid-template-columns:1fr; } }
.sb-course{ background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-left: var(--rule-accent) solid var(--sb-gold-deep); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs); }
.sb-course h3{ font-size: var(--text-xl); margin-bottom: var(--space-1); }
.sb-course .was{ font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); display:block; margin-bottom: var(--space-3); }
.sb-course p{ color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.sb-course-meta{ display:flex; gap: var(--space-2); flex-wrap:wrap; margin-bottom: var(--space-4); }
.sb-course-meta span{ font-size: var(--text-2xs); font-weight: var(--weight-semibold); padding:3px 10px; border-radius: var(--radius-pill); background: var(--sb-gray-100); color: var(--text-muted); }
.sb-course .reg{ font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--sb-gold-deep); text-decoration:none; }
.sb-course .reg:hover{ text-decoration:underline; }

.sb-formats{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width:820px){ .sb-formats{ grid-template-columns:1fr; } }
.sb-format{ border-left: var(--rule-accent) solid var(--sb-gold-deep); padding-left: var(--space-5); }
.sb-format h4{ margin-bottom: var(--space-2); }
.sb-format p{ color: var(--text-muted); font-size: var(--text-sm); margin:0; }

/* ===== training course pages (syllabus lists) ===== */
.sb-syllabus{ display:grid; gap: var(--space-4); margin-top: var(--space-6); }
.sb-syl{ background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-left: var(--rule-accent) solid var(--sb-gold-deep); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-xs); }
.sb-syl h4{ font-size: var(--text-lg); margin-bottom: var(--space-2); }
.sb-syl .sb-course-meta{ margin-bottom: var(--space-3); }
.sb-syl p{ color: var(--text-muted); font-size: var(--text-sm); margin:0 0 var(--space-2); }
.sb-syl .prereq{ font-size: var(--text-xs); color: var(--text-subtle); margin:0; }
.sb-syl .prereq strong{ color: var(--text-muted); font-weight: var(--weight-semibold); }

/* ===== themed 404 ===== */
.sb-404{ padding: var(--space-9) 0; }
.sb-404 h1{ font-size: clamp(2rem, 4vw, var(--text-5xl)); max-width: 18ch; }
.sb-404 .sb-hero-sub{ max-width: 60ch; }
.sb-404 .sb-code{ max-width: 680px; }
.sb-404-foot{ margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); }

/* ===== STRONGblog index + archives (post loop on the design system) ===== */
.sb-blog-hero{ padding: var(--space-8) 0 var(--space-5); }
.sb-blog-hero h1{ font-size: clamp(2rem, 4vw, var(--text-5xl)); max-width: 20ch; }
.sb-blog-hero .sb-hero-sub{ max-width: 64ch; }

body.blog .site-content{ padding: var(--space-6) 0 var(--space-9); }
body.archive .site-content, body.search .site-content{ padding: var(--space-8) 0 var(--space-9); }
/* mobile gutter so the rounded post cards don't sit flush to the screen edge */
@media (max-width:768px){
  body.blog .site-content, body.archive .site-content, body.search .site-content{ padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* each post → a card */
.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article{
  background: var(--surface-card); border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-5);  /* internal padding comes from GP's .inside-article */
  transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.blog .site-main > article:hover,
.archive .site-main > article:hover,
.search .site-main > article:hover{ box-shadow: var(--shadow-md); border-color: var(--sb-blue-200); }
.site-main .inside-article > *:last-child{ margin-bottom:0; }

.site-main .entry-title{ font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: var(--text-2xl); line-height:1.15; margin-bottom: var(--space-3); }
.site-main .entry-title a{ color: var(--text-strong); text-decoration:none; }
.site-main .entry-title a:hover{ color: var(--color-accent); }

.site-main .entry-header .entry-meta{ display:flex; gap: var(--space-3); flex-wrap:wrap; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform:uppercase; color: var(--text-subtle); margin-bottom: var(--space-4); }
.site-main .entry-meta a{ color: var(--text-subtle); text-decoration:none; }
.site-main .entry-meta a:hover{ color: var(--color-brand); }
.site-main .entry-header .entry-meta .updated{ display:none; }  /* drop duplicate modified time */

.site-main .entry-summary{ color: var(--text-muted); }
.site-main .entry-summary p{ margin-bottom: var(--space-3); }
.site-main .entry-summary p:last-child{ margin-bottom:0; }
.site-main a.more-link, .site-main .more-link{ font-weight: var(--weight-semibold); color: var(--color-accent); text-decoration:none; white-space:nowrap; }
.site-main a.more-link:hover{ text-decoration:underline; }

.site-main footer.entry-meta{ margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--text-2xs); text-transform:none; letter-spacing:0; display:flex; gap: var(--space-4); flex-wrap:wrap; }
.site-main footer.entry-meta .gp-icon{ color: var(--text-subtle); margin-right: var(--space-1); }

/* pagination */
.nav-links{ display:flex; gap: var(--space-2); flex-wrap:wrap; align-items:center; margin-top: var(--space-7); }
.nav-links .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 var(--space-4); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-muted); text-decoration:none; font-weight: var(--weight-medium); }
.nav-links a.page-numbers:hover{ border-color: var(--color-brand); color: var(--color-brand); }
.nav-links .page-numbers.current{ background: var(--color-brand); color: var(--text-inverse); border-color: var(--color-brand); }
.nav-links .page-numbers.dots{ border:none; background:none; min-width:auto; }

/* sidebar widgets */
#right-sidebar .widget{ margin-bottom: var(--space-7); }
#right-sidebar .widget-title, #right-sidebar h2{ font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: var(--text-sm); text-transform:uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-strong); margin:0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: var(--rule-accent) solid var(--color-accent); display:inline-block; }
#right-sidebar .wp-block-search__input{ border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-sm); }
#right-sidebar .wp-block-search__button{ background: var(--color-accent); color: var(--text-inverse); border:none; border-radius: var(--radius-md); font-weight: var(--weight-semibold); padding: var(--space-3) var(--space-5); }
#right-sidebar .wp-block-latest-posts li{ margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--border-subtle); }
#right-sidebar .wp-block-latest-posts li:last-child{ border-bottom:0; }
#right-sidebar .wp-block-latest-posts a{ color: var(--text-muted); text-decoration:none; font-size: var(--text-sm); line-height:1.4; }
#right-sidebar .wp-block-latest-posts a:hover{ color: var(--color-accent); }