/*
Theme Name: Socialbilitty Hollywood Operating System
Theme URI: https://socialbilitty.com/
Author: Socialbilitty Studios, LLC
Description: Proprietary Socialbilitty corporate WordPress theme.
Version: 3.2.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: socialbilitty-hos
License: Proprietary
*/

:root{
  --sb-blue:#1769e0;
  --sb-blue-bright:#1174f5;
  --sb-black:#030507;
  --sb-panel:#07101a;
  --sb-line:#1d2a3a;
  --sb-text:#ffffff;
  --sb-muted:#d7dde6;
  --sb-max:1536px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--sb-black);color:#fff;
  font-family:Inter,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}

/* HEADER */
.sb-os-header{
  background:#030507;
  border-bottom:1px solid var(--sb-blue);
  position:relative;z-index:1000;
}
.sb-os-top{
  width:min(100%,var(--sb-max));margin:auto;
  min-height:104px;padding:16px 38px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.sb-os-wordmark{
  position:relative;display:inline-flex;align-items:flex-end;
  font-weight:950;font-style:italic;
  font-size:clamp(2.4rem,3.55vw,4.35rem);
  line-height:.78;letter-spacing:-.055em;white-space:nowrap;
}
.sb-os-wordmark .social{
  color:#06080b;
  -webkit-text-stroke:2px #fff;
  text-shadow:0 0 1px #fff;
}
.sb-os-wordmark .bilitty{
  color:#1e62cf;
  -webkit-text-stroke:1.6px #fff;
  text-shadow:0 2px 0 #0b2b68;
}
.sb-os-wordmark small{
  position:absolute;left:5px;bottom:-23px;
  font-size:.275em;letter-spacing:.012em;font-style:normal;
  color:#176de7;-webkit-text-stroke:0;text-shadow:none;
  font-weight:900;
}
.sb-os-tools{
  display:flex;align-items:center;gap:26px;
  font-size:1.05rem;font-weight:900;
}
.sb-social{
  display:grid;place-items:center;width:29px;height:29px;
  border:2px solid #f3f6fb;border-radius:7px;
  color:#fff;font-size:.72rem;font-weight:950;
}
.sb-social.yt{border-radius:6px}
.sb-social.in{border-radius:3px}
.sb-os-tools .trade{
  border:1px solid #1672f2;
  padding:13px 24px;
  font-size:.88rem;letter-spacing:.01em;
}
.sb-menu-toggle{
  display:none;background:transparent;color:#fff;
  border:1px solid #314155;border-radius:8px;padding:8px 11px;
}
.sb-os-nav{
  width:min(100%,var(--sb-max));margin:auto;
  min-height:55px;padding:0 66px;
  border-top:1px solid #182231;
  display:flex;align-items:center;gap:34px;
}
.sb-os-nav>ul{
  flex:1;display:flex;align-items:center;justify-content:space-between;
  list-style:none;margin:0;padding:0;
}
.sb-os-nav li{position:relative}
.sb-os-nav a{
  color:#fff;font-weight:850;font-size:.93rem;
  letter-spacing:.01em;
}
.sb-os-nav .sub-menu{
  display:none;position:absolute;top:100%;left:0;z-index:40;
  min-width:220px;background:#080c12;border:1px solid #263243;
  padding:10px;list-style:none;
}
.sb-os-nav li:hover>.sub-menu{display:block}
.sb-search{
  flex:0 0 auto;font-size:1.95rem;line-height:1;color:#fff;
}

/* FIRST SCREEN / HERO
   Deliberately sized to occupy the major part of the first viewport,
   while keeping all copy and CTAs visible above the fold. */
.sb-os-hero{
  width:min(100%,var(--sb-max));margin:auto;
  min-height:clamp(480px,54vh,620px);
  display:grid;grid-template-columns:42% 58%;
  background:#030507;border-bottom:1px solid #17283e;
  overflow:hidden;
}
.sb-os-hero-copy{
  padding:42px 28px 38px 64px;
  align-self:center;z-index:2;
}
.sb-os-kicker{
  text-transform:uppercase;color:var(--sb-blue-bright);
  font-weight:900;font-size:.94rem;
  margin-bottom:12px;letter-spacing:.01em;
}
.sb-os-hero h1{
  margin:0;
  font-size:clamp(4.05rem,5.65vw,6.55rem);
  line-height:.84;letter-spacing:-.045em;
  font-weight:950;
}
.sb-os-hero h1 span{display:block}
.sb-os-hero h1 .blue{color:#1766d9}
.sb-os-hero-copy>p{
  max-width:560px;margin:18px 0 0;
  color:#e5e8ed;
  font-size:clamp(1rem,1.12vw,1.16rem);
  line-height:1.47;
}
.sb-actions{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;
}
.sb-os-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 27px;
  border:1px solid #1472ef;
  color:#fff;font-weight:900;font-size:.9rem;
}
.sb-os-btn.primary{background:#1767dc}
.sb-os-hero-photo{
  position:relative;overflow:hidden;background:#05070b;
}
.sb-os-hero-photo:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,#030507 0%,rgba(3,5,7,.72) 11%,rgba(3,5,7,.1) 31%,transparent 52%);
  pointer-events:none;
}
.sb-os-hero-photo img{
  width:100%;height:100%;object-fit:cover;
  object-position:58% 30%;
  transform:scale(1.035);
}

/* BENEFITS */
.sb-os-benefits{
  width:min(100%,var(--sb-max));margin:auto;
  min-height:112px;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--sb-line);
  background:linear-gradient(180deg,#07101a,#050a10);
}
.sb-os-benefits>div{
  display:flex;align-items:center;gap:20px;
  padding:17px 42px;border-right:1px solid #233044;
}
.sb-os-benefits>div:last-child{border-right:0}
.sb-os-benefits .ico{
  flex:0 0 auto;font-size:2.9rem;color:#176bea;
  line-height:1;font-weight:500;
}
.sb-os-benefits p{margin:0}
.sb-os-benefits strong{font-size:1rem;line-height:1.04}
.sb-os-benefits small{
  display:block;margin-top:7px;color:#d2d7df;
  font-size:.86rem;line-height:1.35;
}

/* RECENT INSIGHTS */
.sb-os-insights{
  width:min(100%,var(--sb-max));margin:auto;
  padding:12px 38px 26px;
  background:#030507;
}
.sb-os-sectionhead{
  display:flex;align-items:center;justify-content:space-between;
}
.sb-os-sectionhead h2{font-size:1.03rem;margin:0}
.sb-os-sectionhead a{
  color:#1475f2;font-size:.79rem;font-weight:900;
}
.sb-os-cardgrid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:22px;margin-top:12px;
}
.sb-os-cardgrid article{min-width:0}
.sb-os-cardgrid article img{
  width:100%;aspect-ratio:2.45/1;
  object-fit:cover;object-position:center;
  border:0;
}
.sb-os-cardgrid h3{
  margin:7px 0 0;font-size:.96rem;line-height:1.15;
}
.sb-os-cardgrid p{
  margin:3px 0 0;color:#d8dce2;font-size:.82rem;
}

/* INTERIOR PAGES */
.sb-page-hero{
  min-height:360px;position:relative;display:flex;align-items:flex-end;
  overflow:hidden;background:#060a10;border-bottom:1px solid #1b2a3d;
}
.sb-page-hero img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.38;
}
.sb-page-hero:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,#060a10,rgba(6,10,16,.1));
}
.sb-page-title{
  position:relative;z-index:2;
  width:min(calc(100% - 64px),1280px);margin:auto;
  padding:70px 0 48px;
}
.sb-page-title h1{
  margin:0;font-size:clamp(3rem,6vw,6rem);
  line-height:.92;letter-spacing:-.05em;
}
.sb-content{
  width:min(calc(100% - 40px),900px);
  margin:auto;padding:64px 0 90px;
  color:#e6eaf0;line-height:1.7;
}
.sb-content a{color:#5ea2ff}
.sb-content h2,.sb-content h3{color:#fff}
.sb-content p,.sb-content li{color:#ced5df}

/* POSTS / INDEX */
.sb-post-grid{
  width:min(calc(100% - 64px),1280px);margin:auto;
  padding:48px 0 80px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.sb-post{
  background:#090e15;border:1px solid #1e2a39;
}
.sb-post img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sb-post-body{padding:20px}
.sb-post-body small{color:#5ea2ff}
.sb-post-body h3{margin:8px 0;color:#fff}
.sb-post-body p{color:#aab4c1}

/* FOOTER */
.sb-footer{
  width:min(100%,var(--sb-max));margin:auto;
  background:#030507;color:#cbd4df;
  padding:30px 38px 22px;border-top:1px solid #172334;
}
.sb-footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
}
.sb-footer h4{color:#fff}
.sb-footer ul{list-style:none;margin:0;padding:0}
.sb-footer li{margin:7px 0}
.sb-footer a{color:#aab6c6}
.sb-footer-copy{
  margin-top:26px;padding-top:17px;border-top:1px solid #162131;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:#7d8ca1;font-size:.82rem;
}

/* RESPONSIVE */
@media(max-width:1100px){
  .sb-os-top{padding-inline:24px}
  .sb-os-nav{padding-inline:32px}
  .sb-os-hero{grid-template-columns:46% 54%}
  .sb-os-hero-copy{padding-left:40px}
  .sb-os-benefits>div{padding-inline:25px}
}
@media(max-width:900px){
  .sb-os-tools{display:none}
  .sb-menu-toggle{display:block}
  .sb-os-top{min-height:86px}
  .sb-os-wordmark{font-size:2.7rem}
  .sb-os-nav{
    display:none;min-height:auto;padding:18px 24px;
    position:absolute;left:0;right:0;background:#05080d;
  }
  .sb-os-nav.is-open{display:block}
  .sb-os-nav>ul{display:block}
  .sb-os-nav li{padding:9px 0}
  .sb-os-nav .sub-menu{
    display:block;position:static;border:0;padding-left:14px;background:transparent
  }
  .sb-search{display:none}
  .sb-os-hero{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .sb-os-hero-copy{padding:46px 28px 38px}
  .sb-os-hero h1{font-size:clamp(3.8rem,11vw,5.8rem)}
  .sb-os-hero-photo{height:390px}
  .sb-os-hero-photo:before{
    background:linear-gradient(0deg,#030507 0%,rgba(3,5,7,.25) 35%,transparent 70%)
  }
  .sb-os-benefits{grid-template-columns:1fr 1fr}
  .sb-os-cardgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .sb-os-top{min-height:77px;padding:12px 15px}
  .sb-os-wordmark{font-size:2.08rem}
  .sb-os-wordmark small{bottom:-16px}
  .sb-os-hero-copy{padding:38px 20px 30px}
  .sb-os-kicker{font-size:.72rem}
  .sb-os-hero h1{font-size:3.75rem}
  .sb-os-hero-copy>p{font-size:.98rem}
  .sb-actions{display:grid;grid-template-columns:1fr}
  .sb-os-btn{width:100%}
  .sb-os-hero-photo{height:300px}
  .sb-os-benefits{grid-template-columns:1fr}
  .sb-os-benefits>div{border-right:0;border-bottom:1px solid #233044}
  .sb-os-insights{padding-inline:18px}
  .sb-os-cardgrid{grid-template-columns:1fr}
  .sb-post-grid{grid-template-columns:1fr;width:min(calc(100% - 28px),1280px)}
  .sb-footer-grid{grid-template-columns:1fr}
}


/* =========================================================
   v3.2 — ONE MASTER LOGO ASSET
   Header and footer both render WordPress's exact Custom Logo.
   The artwork itself is never redrawn or recolored.
   The white edge exists only to keep original black artwork
   visible against Socialbilitty's dark background.
   ========================================================= */

.sb-master-logo{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.sb-master-logo .custom-logo-link{
  display:inline-flex;
  align-items:center;
  line-height:0;
}
.sb-master-logo .custom-logo{
  width:auto;
  height:auto;
  object-fit:contain;
  /* White perimeter visibility treatment; no logo redesign. */
  filter:
    drop-shadow(1px 0 0 rgba(255,255,255,.98))
    drop-shadow(-1px 0 0 rgba(255,255,255,.98))
    drop-shadow(0 1px 0 rgba(255,255,255,.98))
    drop-shadow(0 -1px 0 rgba(255,255,255,.98));
}

/* Header and footer use IDENTICAL artwork. Only display size differs. */
.sb-header-logo .custom-logo{
  max-height:68px;
  max-width:min(570px,46vw);
}
.sb-footer-logo .custom-logo{
  max-height:58px;
  max-width:min(500px,88vw);
}

/* Fallback appears only if no Custom Logo has been assigned in WordPress. */
.sb-logo-fallback{
  color:#fff;
  font-weight:950;
  font-style:italic;
  letter-spacing:-.045em;
  font-size:2.6rem;
  line-height:.9;
}
.sb-logo-fallback strong{color:#1769e0}
.sb-logo-fallback small{
  display:block;
  margin-top:7px;
  color:#1769e0;
  font-style:normal;
  font-size:.34em;
  letter-spacing:.04em;
}

.sb-footer-brand-copy{
  max-width:520px;
  color:#91a0b5;
  margin-top:18px;
}

@media(max-width:900px){
  .sb-header-logo .custom-logo{max-height:56px;max-width:72vw}
}
@media(max-width:600px){
  .sb-header-logo .custom-logo{max-height:47px;max-width:74vw}
  .sb-logo-fallback{font-size:1.9rem}
}