/* ===========================================================
   HOSI Brand OS — shared shell styles
   Mirrors the BXS Brand OS shell, HOSI-skinned (copper / slate).
   Linked by every page in /hosi-bos-portal/.
   Holds: design tokens, base, and the top strip + nav chrome.
   Page-specific layout (hero, sections, cards) stays per page.
   =========================================================== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Custom scrollbars — thin, subtle slate */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(63,85,96,0.18);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(63,85,96,0.34);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(63,85,96,0.22) transparent; }

:root {
  /* HOSI palette, derived from logo */
  /* Brand-book palette (ported from HOSI_Brand_Book) */
  --copper:        #D67D4A;
  --copper-deep:   #A85A2E;
  --copper-soft:   #FBEAD8;
  --copper-glow:   #ED9A5E;
  --copper-grad:   linear-gradient(135deg, #ED9A5E 0%, #D67D4A 52%, #A85A2E 100%);
  /* navy is the brand spine; slate tokens map onto it */
  --slate:         #233640;
  --slate-deep:    #19272F;
  --slate-soft:    #ECE6DA;
  --navy:          #19272F;
  --navy-card:     #233640;
  --cream:         #F9F4EB;
  --cream-card:    #FCF9F2;
  --sand:          #FBEAD8;
  --amber:         #E0A040;
  --amber-soft:    #FCEFD8;
  --red:           #B0344A;
  --red-soft:      #F5E0E5;
  --grey-light:    #EFEBE2;
  --grey-mid:      #98938C;
  --grey-warm:     #FCF9F2;
  --white:         #FFFFFF;
  --ink:           #19272F;
  --ink-mid:       #46535B;
  --ink-light:     #7E8890;

  /* BXS shell tokens */
  --bxs-cream:     #F9F4EB;
  --bxs-ink:       #19272F;
  --bxs-red:       #D67D4A;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 2px 10px rgba(25,39,47,0.06);
  --shadow-md: 0 8px 28px rgba(25,39,47,0.10);
  --shadow-lg: 0 18px 50px rgba(25,39,47,0.16);
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* =========================
   Top strip + nav
   ========================= */
.bxs-strip {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(63,85,96,0.10);
}
.bxs-strip-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 32px;
}
.bxs-strip-left { display: flex; align-items: center; gap: 14px; }
.bxs-client-link { display: flex; align-items: center; gap: 14px; }
.bxs-client-mark { height: 68px; width: auto; display: block; }
.bxs-client-meta { display: flex; flex-direction: column; line-height: 1.15; }
.bxs-client-name {
  font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 13px;
  color: var(--slate); letter-spacing: -0.005em;
}
.bxs-client-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-light); margin-top: 2px;
}
.bxs-strip-right { display: flex; align-items: center; gap: 18px; }
.bxs-strip-nav { display: flex; gap: 2px; align-items: center; }
.bxs-strip-nav a {
  font-family: 'Open Sans', sans-serif; font-weight: 500; font-size: 15px;
  color: var(--ink-mid);
  padding: 8px 14px; border-radius: 100px;
  transition: color 0.15s;
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
}
.bxs-strip-nav a:hover { color: var(--copper-deep); }
.bxs-strip-nav a.active { color: var(--copper-deep); font-weight: 600; }
.bxs-strip-nav a:not(.create-cta)::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--copper-grad);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.18s ease;
}
.bxs-strip-nav a:not(.create-cta):hover::after,
.bxs-strip-nav a.active:not(.create-cta)::after { transform: scaleX(1); }
.bxs-strip-nav a.create-cta {
  background: var(--copper-grad); color: #fff; font-weight: 600;
  margin-left: 22px; position: relative;
  padding: 11px 22px;
  box-shadow: 0 2px 8px rgba(199,107,59,0.30);
  transition: transform 0.18s, box-shadow 0.18s;
}
.bxs-strip-nav a.create-cta::before {
  content: ''; position: absolute; left: -14px; top: 4px; bottom: 4px;
  width: 1px; background: rgba(63,85,96,0.16);
}
.bxs-strip-nav a.create-cta:hover {
  color: #fff; transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(199,107,59,0.40);
}
.bxs-strip-nav a.create-cta.active { color: #fff; }
.bxs-strip-nav .soon-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--amber); display: inline-block;
}

@media (max-width: 980px) {
  .bxs-strip-nav { display: none; }
}