/* ================================================================
   VECTOR JUNK REMOVAL - SPRINT 3 GEO PAGES EXACT STYLES (nj_hub.html)
================================================================ */

/* --- DESIGN TOKENS --- */
:root {
  --c-orange:    #DE643B;
  --c-orange-h:  #FF6531;
  --c-orange-a:  #C34216;
  --c-violet:    #2D1D38;
  --c-violet-h:  #3D2A52;
  --c-yellow:    #F3F3BD;
  --c-lavender:  #E6CFE3;
  --c-beige:     #F7F2E8;
  --c-offwhite:  #F5F3ED;
  --c-cream:     #FAFAFA;
  --c-body:      #312836;
  --c-muted:     #676A6C;
  --c-border:    #E6E6E6;
  --c-green:     #27AE60;
  --c-error:     #E74C3C;
  --f-head: 'Red Hat Display', sans-serif;
  --f-body: 'Instrument Sans', sans-serif;
  --shadow-sm: 0 2px 12px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.12);
  --radius:   8px;
  --trans:    .15s ease;
}

/* Base resets within geo scope */
.geo-hub-page *, .borough-page *, .nj-city-page *, .neighborhood-page * { box-sizing: border-box; }

/* UTILITIES */
.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.sec { padding: 80px 0; }
.sec--sm { padding: 56px 0; }
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.grid-3  { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4  { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.eyebrow {
  font-family: var(--f-head); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-orange); display: block; margin-bottom: 10px;
}
.sec-title {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--c-violet); line-height: 1.1;
  letter-spacing: -.02em; margin-bottom: 14px;
}
.sec-sub {
  font-size: 1.05rem; color: var(--c-muted); max-width: 600px; line-height: 1.65;
}

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--f-head); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; border-radius: 4px; border: 2px solid transparent;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.btn--primary  { background: var(--c-orange); color: #fff; padding: 14px 28px; font-size: .8rem; height: 48px; }
.btn--primary:hover { background: var(--c-orange-h); text-decoration: none; color:#fff; }
.btn--primary:active { background: var(--c-orange-a); }
.btn--white    { background: #fff; color: var(--c-violet); padding: 14px 28px; height: 48px; font-size: .8rem; border-color: #fff; }
.btn--white:hover { background: #F5F5F5; text-decoration: none; }
.btn--dark     { background: var(--c-violet); color: #fff; padding: 12px 22px; height: 44px; font-size: .78rem; border-color: var(--c-violet); }
.btn--dark:hover { background: var(--c-violet-h); text-decoration: none; }
.btn--outline-yellow { background: transparent; border-color: var(--c-yellow); color: var(--c-yellow); padding: 14px 28px; height: 48px; font-size: .8rem; }
.btn--outline-yellow:hover { background: rgba(243,243,189,.1); text-decoration: none; color: var(--c-yellow); }

/* BREADCRUMB */
.breadcrumb {
  background: var(--c-offwhite); border-bottom: 1px solid var(--c-border);
  padding: 10px 0;
}
.breadcrumb__list {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--f-head); font-size: .8rem; list-style: none; margin: 0; padding: 0;
}
.breadcrumb__sep { color: #CCC; margin: 0 4px; }
.breadcrumb__link { color: var(--c-orange); text-decoration: none; }
.breadcrumb__link:hover { text-decoration: underline; }
.breadcrumb__cur { color: var(--c-violet); font-weight: 700; }

/* §01 HERO */
.hero {
  background: var(--c-violet);
  padding: 80px 0 72px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(222,100,59,.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
  max-width: 1280px; margin: 0 auto; padding: 0 40px;
  position: relative; z-index: 1;
}
.hero__eyebrow {
  font-family: var(--f-head); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-orange); margin-bottom: 16px; display: block;
}
.hero__h1 {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  color: var(--c-yellow); line-height: 1.0;
  letter-spacing: -.03em; margin-bottom: 18px;
}
.hero__sub {
  font-size: 1.1rem; color: var(--c-lavender);
  line-height: 1.65; margin-bottom: 28px; max-width: 480px;
}
.hero__trust {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; list-style: none; margin-left: 0; padding-left: 0;
}
.hero__trust-item {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-head); font-size: .82rem; font-weight: 600;
  color: var(--c-yellow); letter-spacing: .01em;
}
.hero__trust-item svg { flex-shrink: 0; }
.hero__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__right { display: flex; flex-direction: column; gap: 20px; }
.hero__photo {
  position: relative; border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(243,243,189,.15);
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  font-family: var(--f-head); font-size: .8rem; font-weight: 600;
  color: rgba(230,207,227,.5); text-align: center; padding: 20px;
}
.hero__photo-badge {
  position: absolute; bottom: 16px; left: 16px;
  background: #fff; border-radius: 6px;
  padding: 9px 14px; display: flex; align-items: center; gap: 8px;
  font-family: var(--f-head); font-size: .78rem; font-weight: 700;
  color: var(--c-violet); box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.hero__form {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(243,243,189,.2);
  border-radius: 10px; padding: 22px;
}
.hero__form-title {
  font-family: var(--f-head); font-weight: 700; font-size: .9rem;
  color: var(--c-yellow); margin-bottom: 14px;
}
.hero__input-row { display: flex; gap: 8px; }
.hero__input {
  flex: 1; height: 48px; padding: 0 14px;
  border: 1px solid rgba(243,243,189,.3); border-radius: 4px;
  background: rgba(255,255,255,.08); color: var(--c-yellow);
  font-family: var(--f-body); font-size: 1rem; outline: none;
}
.hero__input::placeholder { color: rgba(230,207,227,.45); font-size: .9rem; }

/* §02 TRUST BAR */
.trust-bar { background: var(--c-cream); padding: 40px 0; }
.trust-bar__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.trust-card {
  padding: 28px 24px; text-align: center;
  border-right: 1px solid rgba(0,0,0,.06);
  transition: transform .2s ease;
}
.trust-card:last-child { border-right: none; }
.trust-card:hover { transform: translateY(-3px); }
.trust-card--yellow  { background: var(--c-yellow); }
.trust-card--beige   { background: var(--c-beige); }
.trust-card--orange  { background: var(--c-orange); }
.trust-card--lav     { background: var(--c-lavender); }
.trust-card--offwhite{ background: var(--c-offwhite); }
.trust-card--dark    { background: var(--c-violet); }
.trust-card__num {
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1;
  margin-bottom: 4px;
}
.trust-card__lbl { font-size: .85rem; font-weight: 500; line-height: 1.4; }
.trust-card--yellow .trust-card__num, .trust-card--yellow .trust-card__lbl { color: var(--c-violet); }
.trust-card--beige .trust-card__num,  .trust-card--beige .trust-card__lbl  { color: var(--c-violet); }
.trust-card--orange .trust-card__num, .trust-card--orange .trust-card__lbl { color: #fff; }
.trust-card--lav .trust-card__num,    .trust-card--lav .trust-card__lbl    { color: var(--c-violet); }
.trust-card--offwhite .trust-card__num, .trust-card--offwhite .trust-card__lbl { color: var(--c-violet); }
.trust-card--dark .trust-card__num   { color: var(--c-yellow); }
.trust-card--dark .trust-card__lbl   { color: var(--c-lavender); }

/* §03 CITY NAVIGATION / AREAS GRID */
.city-nav { background: #fff; }
.city-nav__head { text-align: center; margin-bottom: 40px; }
.city-nav__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  margin-bottom: 16px;
}
.city-card {
  border-radius: var(--radius); padding: 28px 20px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none; border: 1px solid transparent;
}
.city-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); text-decoration: none; }
.city-card--yellow  { background: var(--c-yellow); }
.city-card--orange  { background: var(--c-orange); }
.city-card--lav     { background: var(--c-lavender); }
.city-card--dark    { background: var(--c-violet); }
.city-card--cream   { background: var(--c-offwhite); border-color: var(--c-border); }
.city-card__icon {
  width: 48px; height: 48px; background: var(--c-orange);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.city-card--orange .city-card__icon { background: rgba(255,255,255,.2); }
.city-card--dark   .city-card__icon { background: rgba(222,100,59,.6); }
.city-card__name { font-family: var(--f-head); font-weight: 800; font-size: 1.05rem; line-height: 1.1; }
.city-card__sub { font-size: .8rem; font-weight: 400; line-height: 1.4; }
.city-card__link { font-family: var(--f-head); font-size: .8rem; font-weight: 600; margin-top: auto; }
.city-card--yellow .city-card__name, .city-card--yellow .city-card__sub, .city-card--yellow .city-card__link { color: var(--c-violet); }
.city-card--orange .city-card__name, .city-card--orange .city-card__sub, .city-card--orange .city-card__link { color: #fff; }
.city-card--lav .city-card__name,    .city-card--lav .city-card__sub,    .city-card--lav .city-card__link    { color: var(--c-violet); }
.city-card--dark .city-card__name   { color: var(--c-yellow); }
.city-card--dark .city-card__sub,    .city-card--dark .city-card__link   { color: var(--c-lavender); }
.city-card--cream .city-card__name,  .city-card--cream .city-card__sub,  .city-card--cream .city-card__link  { color: var(--c-violet); }

/* §04 SERVICES GRID */
.services { background: var(--c-cream); }
.services__head { text-align: center; margin-bottom: 48px; }
.services__head .sec-sub { margin: 0 auto; }
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.svc-card {
  border-radius: var(--radius); padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s ease, box-shadow .2s ease; text-decoration: none;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.svc-card--yellow { background: var(--c-yellow); }
.svc-card--orange { background: var(--c-orange); }
.svc-card--lav    { background: var(--c-lavender); }
.svc-card--dark   { background: var(--c-violet); }
.svc-card--cream  { background: var(--c-offwhite); border: 1px solid var(--c-border); }
.svc-card--white  { background: #fff; border: 1px solid var(--c-border); }
.svc-card__icon {
  width: 52px; height: 52px; background: var(--c-orange);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.svc-card--orange .svc-card__icon { background: rgba(255,255,255,.2); }
.svc-card--dark   .svc-card__icon { background: rgba(222,100,59,.55); }
.svc-card__title { font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.svc-card__desc { font-size: .875rem; line-height: 1.6; flex: 1; }
.svc-card__link {
  font-family: var(--f-head); font-size: .875rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
}
.svc-card--yellow .svc-card__title, .svc-card--yellow .svc-card__desc, .svc-card--yellow .svc-card__link { color: var(--c-violet); }
.svc-card--orange .svc-card__title, .svc-card--orange .svc-card__desc, .svc-card--orange .svc-card__link { color: #fff; }
.svc-card--lav .svc-card__title,    .svc-card--lav .svc-card__desc,    .svc-card--lav .svc-card__link    { color: var(--c-violet); }
.svc-card--dark .svc-card__title   { color: var(--c-yellow); }
.svc-card--dark .svc-card__desc,    .svc-card--dark .svc-card__link    { color: var(--c-lavender); }
.svc-card--cream .svc-card__title,  .svc-card--cream .svc-card__desc  { color: var(--c-body); }
.svc-card--cream .svc-card__link   { color: var(--c-orange); }
.svc-card--white .svc-card__title,  .svc-card--white .svc-card__desc  { color: var(--c-body); }
.svc-card--white .svc-card__link   { color: var(--c-orange); }

/* §06 HOW IT WORKS */
.how { background: var(--c-orange); padding: 80px 0; }
.how__head { text-align: center; margin-bottom: 48px; }
.how__title {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: #fff; margin-bottom: 10px; letter-spacing: -.02em;
}
.how__sub { font-size: 1.05rem; color: rgba(255,255,255,.75); }
.how__steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 40px; }
.step-card {
  border-radius: var(--radius); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.step-card--cream  { background: var(--c-offwhite); }
.step-card--yellow { background: var(--c-yellow); }
.step-card--lav    { background: var(--c-lavender); }
.step-num {
  font-family: var(--f-head); font-weight: 900; font-size: 2.4rem; color: var(--c-orange); line-height: 1;
}
.step-card--yellow .step-num, .step-card--lav .step-num { color: var(--c-violet); opacity: .3; }
.step-title { font-family: var(--f-head); font-weight: 800; font-size: 1.05rem; color: var(--c-violet); line-height: 1.2; }
.step-desc { font-size: .875rem; color: var(--c-muted); line-height: 1.65; }
.how__cta { text-align: center; }

/* §07 MAP SECTION */
.areas-map { background: #fff; }
.areas-map__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.map-placeholder {
  border-radius: var(--radius); overflow: hidden;
  background: #F0EFF5; border: 2px dashed var(--c-border);
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px; font-family: var(--f-head); font-size: .85rem; font-weight: 600;
  color: var(--c-muted); text-align: center; padding: 24px;
}
.areas-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.areas-col__head {
  font-family: var(--f-head); font-weight: 800; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--c-violet);
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--c-orange);
}
.areas-list { display: flex; flex-direction: column; gap: 5px; list-style: none; margin: 0; padding: 0; }
.areas-list a {
  font-size: .85rem; color: var(--c-body); font-family: var(--f-head); font-weight: 500;
  padding: 4px 0; display: flex; align-items: center; gap: 5px; text-decoration: none;
}
.areas-list a::before { content: '›'; color: var(--c-orange); font-weight: 700; }
.areas-list a:hover { color: var(--c-orange); }

/* §08 REVIEWS */
.reviews { background: var(--c-cream); }
.reviews__head { text-align: center; margin-bottom: 36px; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.review-card {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 24px; transition: box-shadow .2s ease;
}
.review-card:hover { box-shadow: var(--shadow-md); }
.review-card--featured { grid-column: span 2; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; }
.review-stars { color: #FFB800; font-size: .95rem; letter-spacing: 2px; margin-bottom: 8px; }
.review-text { font-size: .9rem; color: var(--c-body); line-height: 1.7; }
.review-meta-name { font-family: var(--f-head); font-weight: 600; font-size: .95rem; color: var(--c-violet); }
.review-meta-loc  { font-size: .78rem; color: var(--c-muted); margin-top: 2px; }
.review-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #FAFAFA; border: 1px solid #EEE; border-radius: 5px;
  padding: 7px 12px; font-size: .72rem; font-weight: 600; color: #888;
  white-space: nowrap; align-self: flex-start;
}

/* §09 FAQ */
.faq { background: var(--c-beige); }
.faq__head { text-align: center; margin-bottom: 40px; }
.faq__wrap { max-width: 760px; margin: 0 auto; }
.faq-item {
  background: #fff; border-bottom: 1px solid #EEEEEE; transition: border-left .15s;
}
.faq-item:first-child { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.faq-item:last-child  { border-bottom: none; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.faq-item--open { border-left: 3px solid var(--c-orange); }
.faq-item--open .faq-q { color: var(--c-orange); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: none; border: none; text-align: left;
  font-family: var(--f-head); font-weight: 600; font-size: .975rem; color: var(--c-violet);
  cursor: pointer; transition: color var(--trans);
}
.faq-q:hover { color: var(--c-orange); }
.faq-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: #F3F3F3; border: 1.5px solid #DDD;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--c-muted); line-height: 1;
  transition: transform .25s ease, background var(--trans), border-color var(--trans); user-select: none;
}
.faq-item--open .faq-icon {
  transform: rotate(45deg); background: var(--c-orange); border-color: var(--c-orange); color: #fff;
}
.faq-body { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.faq-item--open .faq-body { max-height: 300px; }
.faq-ans { padding: 0 24px 20px; font-size: .9rem; color: var(--c-muted); line-height: 1.75; }

/* §10 FINAL CTA */
.final-cta { background: var(--c-orange); padding: 80px 0; }
.final-cta__inner { text-align: center; max-width: 640px; margin: 0 auto; }
.final-cta__title {
  font-family: var(--f-head); font-weight: 800; font-size: clamp(1.8rem, 4vw, 3rem);
  color: #fff; letter-spacing: -.02em; margin-bottom: 12px;
}
.final-cta__sub { font-size: 1.05rem; color: rgba(255,255,255,.85); margin-bottom: 32px; }
.final-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .city-nav__grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  .hero__inner     { grid-template-columns: 1fr; gap: 32px; }
  .hero__right     { display: none; }
  .trust-bar__grid { grid-template-columns: 1fr 1fr; }
  .trust-card:nth-child(2) { border-right: none; }
  .city-nav__grid  { grid-template-columns: 1fr 1fr; }
  .svc-grid        { grid-template-columns: 1fr 1fr; }
  .areas-map__layout { grid-template-columns: 1fr; }
  .map-placeholder   { display: none; }
  .areas-cols      { grid-template-columns: 1fr 1fr; }
  .review-grid     { grid-template-columns: 1fr; }
  .review-card--featured { grid-column: span 1; grid-template-columns: 1fr; }
  .how__steps      { grid-template-columns: 1fr; gap: 12px; }
  .grid-2          { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .container       { padding: 0 20px; }
  .hero            { padding: 48px 0 40px; }
  .hero__inner     { padding: 0 20px; }
  .sec             { padding: 56px 0; }
  .city-nav__grid  { grid-template-columns: 1fr 1fr; }
  .svc-grid        { grid-template-columns: 1fr; }
  .areas-cols      { grid-template-columns: 1fr; }
  .trust-bar__grid { grid-template-columns: 1fr 1fr; }
}