:root { --hb-bg:#030808; --hb-panel:#081211; --hb-line:rgba(128,205,179,.24); --hb-green:#43e5a4; --hb-copy:#d5e1df; --hb-muted:#a8bfbd; --hb-serif:"Cormorant Garamond", Georgia, serif; }
.cg-hb-social-page { background:var(--hb-bg); color:var(--hb-copy); }
.cg-hb-social-page main { overflow:hidden; background:var(--hb-bg); }
.cg-hb-social-page h1,.cg-hb-social-page h2,.cg-hb-social-page h3,.cg-hb-social-page p { margin-top:0; }
.cg-hb-social-page h1,.cg-hb-social-page h2,.cg-hb-social-page h3 { color:#f5f5f1; font-family:var(--hb-serif); font-weight:500; }
.cg-hb-social-page h1,.cg-hb-social-page h2 { letter-spacing:-.03em; line-height:.94; }
.cg-hb-social-page em { color:var(--hb-green); font-style:italic; }
.cg-hb-social-page svg { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.hb-container { width:min(1240px, calc(100% - 48px)); margin-inline:auto; }
.hb-eyebrow { margin:0 0 12px; color:var(--hb-green); font-size:.71rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.hb-actions { display:flex; flex-wrap:wrap; gap:14px; }
.hb-btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 27px; border:1px solid var(--hb-green); border-radius:3px; color:#fff; font-size:.73rem; font-weight:800; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; transition:transform .18s, background .18s; }
.hb-btn:hover { transform:translateY(-2px); color:inherit; }
.hb-btn-primary { background:var(--hb-green); color:#06100d; }
.hb-btn-primary:hover { color:#06100d; }
.hb-btn-ghost { background:rgba(3,8,8,.46); }

.hb-hero { position:relative; width:min(1320px, calc(100% - 48px)); min-height:700px; margin-inline:auto; isolation:isolate; border-bottom:1px solid var(--hb-line); }
.hb-hero-bg { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#020606 0%,rgba(2,6,6,.97) 27%,rgba(2,6,6,.53) 49%,rgba(2,6,6,.05) 76%),linear-gradient(0deg,#030808 0%,transparent 27%),url('/assets/media/hoboken__social_content_creation/hoboken_social_content_creation__hero.webp') right 10px/auto 100% no-repeat; }
.hb-hero-bg::after { position:absolute; inset:0 0 0 88%; background:linear-gradient(90deg,transparent,#030808); content:''; }
.hb-hero-inner { display:grid; min-height:700px; grid-template-columns:minmax(0,525px) 1fr; align-items:end; padding:108px 0 34px; }
.hb-hero-copy { align-self:center; padding-top:48px; }
.hb-hero-copy .hb-eyebrow { margin-top:-14px; }
.hb-hero h1 { max-width:480px; margin-bottom:19px; font-size:clamp(4rem,5.1vw,5.65rem); line-height:.80; }
.hb-hero-copy > p:not(.hb-eyebrow) { max-width:470px; margin-bottom:22px; font-size:1.08rem; line-height:1.55; }
.hb-hero-benefits { display:grid; grid-column:1 / 2; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:31px; width:720px; }
.hb-hero-benefits > div { display:flex; gap:12px; padding:0 19px; border-left:1px solid var(--hb-line); color:var(--hb-muted); font-size:.74rem; line-height:1.42; }
.hb-hero-benefits > div:first-child { padding-left:0; border-left:0; }
.hb-hero-benefits svg { flex:0 0 35px; width:35px; height:35px; color:var(--hb-green); stroke-width:1.6; }
.hb-hero-benefits strong { display:block; margin-bottom:3px; color:#fff; font-size:.78rem; }

.hb-local { position:relative; width:min(1320px, calc(100% - 48px)); padding:62px 0 58px; margin:48px auto 34px; overflow:hidden; border:1px solid var(--hb-line); border-radius:14px; isolation:isolate; }
.hb-local-bg { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(3,8,8,.15),rgba(3,8,8,.6)),linear-gradient(0deg,#030808 0%,transparent 29%),url('/assets/media/hoboken__social_content_creation/hoboken_social_content_creation__city-scape.webp') right center/cover no-repeat; opacity:.95; }
.hb-local-grid { display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:70px; align-items:center; }
.hb-local h2 { margin-bottom:18px; font-size:clamp(2.65rem,3.4vw,3.6rem); }
.hb-local-copy > p:not(.hb-eyebrow) { max-width:525px; margin-bottom:18px; font-size:.98rem; line-height:1.55; }
.hb-districts { max-width:430px; justify-self:end; padding:27px 32px 24px; border:1px solid rgba(184,215,210,.22); border-radius:13px; background:rgba(4,11,13,.78); box-shadow:0 12px 35px rgba(0,0,0,.25); }
.hb-districts h3 { margin-bottom:16px; font-size:1.42rem; }
.hb-districts ul { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; padding:0; margin:0 0 20px; list-style:none; }
.hb-districts li { display:flex; align-items:center; gap:8px; color:#edf2f0; font-size:.78rem; }
.hb-districts li svg { width:16px; height:16px; color:var(--hb-green); stroke-width:2; }
.hb-districts p { padding-top:15px; margin:0; border-top:1px solid var(--hb-line); color:var(--hb-muted); font-size:.75rem; line-height:1.55; }

.hb-showcase { padding:80px 0 72px; }
.hb-section-head { max-width:690px; margin:0 auto 32px; text-align:center; }
.hb-section-head h2 { margin-bottom:10px; font-size:clamp(2.75rem,4vw,4.4rem); }
.hb-section-head > p:last-child { margin:0; color:var(--hb-copy); font-size:.96rem; line-height:1.55; }
.hb-masonry { display:grid; grid-template-columns:1.02fr .88fr .88fr 1.02fr; grid-template-rows:190px 190px; gap:13px; }
.hb-media-card { position:relative; min-height:0; overflow:hidden; border:1px solid var(--hb-line); border-radius:9px; background:#07100f; }
.hb-media-card::after { position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(2,7,7,.93)); content:''; pointer-events:none; }
.hb-media-card img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.hb-media-card:hover img { transform:scale(1.03); }
.hb-media-card h3 { position:absolute; z-index:1; right:0; bottom:0; left:0; display:flex; align-items:center; gap:8px; margin:0; padding:16px; color:#fff; font-size:1.18rem; line-height:1.05; }
.hb-media-card h3 svg { width:22px; height:22px; flex:0 0 22px; color:var(--hb-green); stroke-width:1.8; }
.hb-card-01 { grid-row:span 2; }.hb-card-02 { grid-column:2 / span 2; }.hb-card-03 { grid-column:4; }.hb-card-04 { grid-column:2; }.hb-card-05 { grid-column:3; }.hb-card-06 { grid-column:4; }

.hb-why { padding:0 0 78px; }
.hb-why-panel { padding:31px 34px 29px; border:1px solid var(--hb-line); border-radius:13px; background:radial-gradient(circle at 50% 0,rgba(25,86,67,.17),transparent 44%),#07100f; }
.hb-why-panel > h2 { margin:0 0 27px; text-align:center; font-size:clamp(2rem,2.8vw,2.9rem); }
.hb-why-items { display:grid; grid-template-columns:repeat(4,1fr); }
.hb-why-items article { padding:0 28px; border-left:1px solid var(--hb-line); text-align:center; }.hb-why-items article:first-child { border-left:0; }
.hb-why-items svg { width:43px; height:43px; margin-bottom:11px; color:var(--hb-green); stroke-width:1.7; }
.hb-why-items h3 { margin-bottom:5px; font-family:Inter,Arial,sans-serif; font-size:.96rem; font-weight:700; }.hb-why-items p { margin:0; color:var(--hb-muted); font-size:.78rem; line-height:1.45; }

.hb-process { padding:0 0 82px; }.hb-process .hb-section-head { margin-bottom:28px; }.hb-process .hb-section-head h2 { margin:0; }
.hb-process-list { display:grid; grid-template-columns:repeat(5,1fr); gap:0; padding:0; margin:0; list-style:none; }.hb-process-list li { position:relative; padding:0 16px; text-align:center; }.hb-process-list li:not(:last-child)::after { position:absolute; top:49px; right:-14px; width:29px; border-top:2px solid var(--hb-green); content:''; }.hb-process-list li:not(:last-child)::before { position:absolute; top:45px; right:-14px; width:9px; height:9px; border-top:2px solid var(--hb-green); border-right:2px solid var(--hb-green); content:''; transform:rotate(45deg); }
.hb-step-circle { display:grid; width:98px; height:98px; grid-template-rows:27px 1fr; place-items:center; margin:0 auto 13px; border:1px solid var(--hb-green); border-radius:50%; background:radial-gradient(circle,rgba(16,65,51,.24),transparent 67%); color:#fff; }.hb-step-circle b { padding-top:9px; color:var(--hb-green); font-family:Inter,Arial,sans-serif; font-size:1rem; }.hb-step-circle svg { width:31px; height:31px; margin-bottom:10px; stroke-width:1.7; }.hb-process-list h3 { margin-bottom:4px; font-family:Inter,Arial,sans-serif; font-size:.94rem; font-weight:700; }.hb-process-list p { max-width:165px; margin:0 auto; color:#d9e2e0; font-size:.75rem; line-height:1.4; }

.hb-final { padding:0 0 24px; }.hb-final-inner { position:relative; min-height:270px; display:flex; align-items:center; overflow:hidden; padding:37px 45px; border:1px solid var(--hb-line); border-radius:10px; background:#081211; }.hb-final-inner::after { position:absolute; inset:0; background:linear-gradient(90deg,#081211 0%,rgba(8,18,17,.96) 42%,rgba(8,18,17,.1) 78%); content:''; }.hb-final-copy { position:relative; z-index:1; max-width:510px; }.hb-final h2 { margin-bottom:11px; font-size:clamp(2.7rem,3.8vw,4rem); }.hb-final p { margin-bottom:20px; font-size:1rem; }.hb-final img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; }

@media (max-width:980px) { .hb-hero { min-height:680px; }.hb-hero-inner { min-height:680px; }.hb-hero-benefits { width:min(720px,100%); }.hb-local-grid { gap:34px; }.hb-districts { padding:23px; }.hb-districts ul { grid-template-columns:1fr; }.hb-masonry { grid-template-columns:repeat(2,1fr); grid-template-rows:250px 210px 210px 190px; }.hb-card-01 { grid-row:span 2; }.hb-card-02 { grid-column:2; }.hb-card-03 { grid-column:2; }.hb-card-04 { grid-column:1; grid-row:3; }.hb-card-05 { grid-column:2; grid-row:3; }.hb-card-06 { display:block; grid-column:1 / span 2; grid-row:4; }.hb-why-items article { padding:0 14px; }.hb-process-list li { padding:0 8px; } }
@media (max-width:720px) { .hb-container { width:min(100% - 32px,560px); }.hb-hero { min-height:720px; }.hb-hero-bg { background:linear-gradient(90deg,rgba(2,6,6,.96),rgba(2,6,6,.6)),linear-gradient(0deg,#030808 0%,transparent 28%),url('/assets/media/hoboken__social_content_creation/hoboken_social_content_creation__hero.webp') 69% center/cover no-repeat; }.hb-hero-bg::after { display:none; }.hb-hero-inner { display:block; min-height:720px; padding:104px 0 27px; }.hb-hero-copy { padding:0; }.hb-hero h1 { margin-bottom:19px; font-size:clamp(3.3rem,15vw,4.5rem); }.hb-hero-copy > p:not(.hb-eyebrow) { max-width:390px; margin-bottom:23px; font-size:.93rem; }.hb-btn { min-height:48px; padding:0 17px; font-size:.65rem; }.hb-hero-benefits { grid-template-columns:1fr; gap:12px; margin-top:28px; width:100%; }.hb-hero-benefits > div { padding:0 0 0 0; border-left:0; font-size:.72rem; }.hb-hero-benefits svg { width:28px; height:28px; flex-basis:28px; }.hb-local { padding:60px 0; }.hb-local-grid { grid-template-columns:1fr; }.hb-local h2 { font-size:clamp(2.8rem,13vw,3.7rem); }.hb-districts { width:100%; max-width:none; justify-self:stretch; }.hb-districts ul { grid-template-columns:1fr 1fr; }.hb-showcase { padding:60px 0; }.hb-section-head { margin-bottom:25px; }.hb-section-head h2 { font-size:clamp(2.75rem,13vw,3.7rem); }.hb-masonry { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:250px 180px 180px 170px; gap:10px; }.hb-card-01 { grid-row:span 2; }.hb-card-02 { grid-column:2; }.hb-card-03 { grid-column:2; }.hb-card-04 { grid-column:1; grid-row:3; }.hb-card-05 { grid-column:2; grid-row:3; }.hb-card-06 { display:block; grid-column:1 / span 2; grid-row:4; }.hb-media-card h3 { padding:11px; font-size:.96rem; }.hb-why { padding-bottom:60px; }.hb-why-panel { padding:26px 14px; }.hb-why-items { grid-template-columns:1fr 1fr; gap:25px 0; }.hb-why-items article { border-left:0; }.hb-why-items article:nth-child(odd) { border-right:1px solid var(--hb-line); }.hb-process { padding-bottom:60px; }.hb-process-list { grid-template-columns:1fr 1fr; gap:28px 0; }.hb-process-list li { padding:0 10px; }.hb-process-list li:not(:last-child)::after,.hb-process-list li:not(:last-child)::before { display:none; }.hb-final-inner { display:block; min-height:430px; padding:33px 25px; }.hb-final-inner::after { background:linear-gradient(90deg,#081211 0%,rgba(8,18,17,.9) 70%,rgba(8,18,17,.35)); }.hb-final h2 { font-size:clamp(2.7rem,12vw,3.7rem); }.hb-final img { object-position:66% center; opacity:.62; } }
@media (max-width:420px) { .hb-actions { gap:9px; }.hb-btn { width:100%; }.hb-districts ul { grid-template-columns:1fr; }.hb-masonry { grid-template-columns:1fr; grid-template-rows:245px repeat(5,180px); }.hb-card-01,.hb-card-02,.hb-card-03,.hb-card-04,.hb-card-05,.hb-card-06 { display:block; grid-column:1; grid-row:auto; }.hb-why-items { grid-template-columns:1fr; }.hb-why-items article,.hb-why-items article:nth-child(odd) { border:0; }.hb-process-list { grid-template-columns:1fr; }.hb-process-list p { max-width:225px; } }
@media (max-width:720px) { .hb-local h2 { font-size:clamp(2.45rem,11vw,3.25rem); }.hb-local h2 em span { display:block; }.hb-hero { width:100%; }.hb-local { width:100%; padding:52px 0; margin:0; border-right:0; border-left:0; border-radius:0; } }