/* =========================================================
   COHN LEGAL — SHARED RESOURCE CENTER TEMPLATE
   FINAL ISOLATED VERSION

   SAFETY:
   - No page-id selectors.
   - No old clg-ccb-* selectors.
   - No global html/body styling.
   - All visual rules are scoped to .clg-rcenter-page.
   - The7 wrapper resets run only on pages containing .clg-rcenter-page.

   Add this block ONCE at the very end of the child theme style.css.

   Every new page should begin with:
   <div class="clg-rcenter-page"
        style="--clg-rcenter-hero-image:url('/wp-content/uploads/.../hero.webp');">
   ========================================================= */

/* ---------- THE7 / WPBAKERY PAGE RESET, ONLY WHEN THIS TEMPLATE EXISTS ---------- */

body:has(.clg-rcenter-page) .entry-title,
body:has(.clg-rcenter-page) h1.entry-title,
body:has(.clg-rcenter-page) .page-title,
body:has(.clg-rcenter-page) .page-title-head,
body:has(.clg-rcenter-page) .fancy-header,
body:has(.clg-rcenter-page) .page-header,
body:has(.clg-rcenter-page) .entry-header {
  display: none !important;
}

body:has(.clg-rcenter-page) #main,
body:has(.clg-rcenter-page) #main #content,
body:has(.clg-rcenter-page) #main .content,
body:has(.clg-rcenter-page) #main .entry-content,
body:has(.clg-rcenter-page) #main .post-content,
body:has(.clg-rcenter-page) #main .page-content,
body:has(.clg-rcenter-page) #main .wf-wrap,
body:has(.clg-rcenter-page) #main .wf-container-main {
  width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- PAGE ---------- */

.clg-rcenter-page {
  --clg-rcenter-ink: #07111f;
  --clg-rcenter-text: #111827;
  --clg-rcenter-muted: #52606f;
  --clg-rcenter-teal: #45d9e6;
  --clg-rcenter-teal-dark: #12a9b5;
  --clg-rcenter-cream: #f3ead8;
  --clg-rcenter-soft: #f7fafc;
  --clg-rcenter-border: #d7e2ef;

  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  color: var(--clg-rcenter-ink);
  font-family: inherit;
  overflow-x: hidden;
}

.clg-rcenter-page *,
.clg-rcenter-page *::before,
.clg-rcenter-page *::after {
  box-sizing: border-box;
}

/* ---------- HERO ---------- */

.clg-rcenter-hero {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-height: 650px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.99) 0%,
      rgba(255,255,255,0.96) 29%,
      rgba(255,255,255,0.78) 47%,
      rgba(255,255,255,0.32) 66%,
      rgba(255,255,255,0.02) 100%
    ),
    var(--clg-rcenter-hero-image) center right / cover no-repeat !important;
}

.clg-rcenter-hero::before {
  content: "©";
  position: absolute;
  left: -90px;
  top: 10px;
  font-size: 330px;
  line-height: 1;
  font-weight: 900;
  color: rgba(7,17,31,0.035);
  pointer-events: none;
  z-index: 1;
}

.clg-rcenter-hero::after {
  content: "™ © ®";
  position: absolute;
  right: 10%;
  top: 14%;
  font-size: clamp(78px, 10vw, 170px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.08em;
  color: rgba(255,255,255,0.14);
  pointer-events: none;
  z-index: 1;
}

.clg-rcenter-hero-inner {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 64px clamp(42px, 6vw, 110px) 54px !important;
}

.clg-rcenter-hero-content {
  width: 570px !important;
  max-width: 570px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.clg-rcenter-eyebrow {
  color: var(--clg-rcenter-teal) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  margin: 0 0 18px !important;
}

.clg-rcenter-hero h1 {
  color: var(--clg-rcenter-ink) !important;
  font-size: clamp(48px, 5vw, 78px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
  margin: 0 0 24px !important;
  font-weight: 900 !important;
}

.clg-rcenter-subtitle {
  color: var(--clg-rcenter-text) !important;
  max-width: 570px !important;
  font-size: clamp(20px, 1.8vw, 27px) !important;
  line-height: 1.42 !important;
  margin: 0 0 24px !important;
  font-weight: 400 !important;
}

/* ---------- HERO ANCHOR MENU ---------- */

.clg-rcenter-anchor-list {
  width: 100% !important;
  max-width: 600px !important;
  max-height: 152px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 8px !important;
  margin: 0 0 12px !important;
  scrollbar-width: thin;
  scrollbar-color: var(--clg-rcenter-teal) rgba(7,17,31,.08);
}

.clg-rcenter-anchor-list br,
.clg-rcenter-anchor-item br {
  display: none !important;
}

.clg-rcenter-anchor-list::-webkit-scrollbar {
  width: 4px;
}

.clg-rcenter-anchor-list::-webkit-scrollbar-track {
  background: rgba(7,17,31,.08);
  border-radius: 99px;
}

.clg-rcenter-anchor-list::-webkit-scrollbar-thumb {
  background: var(--clg-rcenter-teal);
  border-radius: 99px;
}

.clg-rcenter-anchor-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 18px !important;
  margin: 0 0 8px !important;
  border-radius: 999px !important;
  background: rgba(210,210,210,.92) !important;
  color: var(--clg-rcenter-ink) !important;
  text-decoration: none !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: all .22s ease !important;
}

.clg-rcenter-anchor-item:hover {
  background: #ffffff !important;
  transform: translateX(4px);
}

.clg-rcenter-anchor-item span {
  position: static !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  line-height: 1 !important;
}

.clg-rcenter-anchor-icon {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--clg-rcenter-ink) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.clg-rcenter-anchor-num {
  flex: 0 0 28px !important;
  width: 28px !important;
  color: var(--clg-rcenter-ink) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.clg-rcenter-anchor-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--clg-rcenter-ink) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.clg-rcenter-anchor-arrow {
  flex: 0 0 20px !important;
  width: 20px !important;
  color: var(--clg-rcenter-ink) !important;
  font-size: 18px !important;
  text-align: right !important;
}

.clg-rcenter-scroll-note {
  max-width: 600px !important;
  margin: 4px 0 18px !important;
  text-align: center !important;
  color: rgba(7,17,31,.55) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* ---------- CTA ---------- */

.clg-rcenter-cta-wrap {
  width: 100%;
  max-width: 650px;
}

.clg-rcenter-cta-buttons {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 650px !important;
}

.clg-rcenter-main-btn,
.clg-rcenter-secondary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 56px !important;
  padding: 0 28px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transition: all .22s ease !important;
}

.clg-rcenter-main-btn {
  min-width: 300px !important;
  background: var(--clg-rcenter-teal) !important;
  color: var(--clg-rcenter-ink) !important;
  font-size: 20px !important;
}

.clg-rcenter-secondary-btn {
  min-width: 230px !important;
  border: 2px solid var(--clg-rcenter-ink) !important;
  background: rgba(255,255,255,.72) !important;
  color: var(--clg-rcenter-ink) !important;
  font-size: 18px !important;
}

.clg-rcenter-main-btn:hover,
.clg-rcenter-secondary-btn:hover {
  background: var(--clg-rcenter-ink) !important;
  color: #fff !important;
}

.clg-rcenter-small-note {
  color: var(--clg-rcenter-ink) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin-top: 10px !important;
  max-width: 650px !important;
}

/* ---------- CONTAINERS ---------- */

.clg-rcenter-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* ---------- INTRO ---------- */

.clg-rcenter-intro {
  background: #fff !important;
  padding: 70px 0 34px !important;
}

.clg-rcenter-intro .clg-rcenter-container {
  max-width: 1380px !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.clg-rcenter-intro-card {
  background: var(--clg-rcenter-cream) !important;
  border-radius: 18px !important;
  padding: 52px 64px !important;
  box-shadow: 0 14px 38px rgba(7,17,31,.10) !important;
}

.clg-rcenter-intro h2 {
  color: var(--clg-rcenter-ink) !important;
  max-width: 980px !important;
  margin: 0 auto 26px !important;
  text-align: center !important;
  font-size: clamp(38px, 4vw, 60px) !important;
  line-height: 1.03 !important;
  letter-spacing: -.055em !important;
  font-weight: 900 !important;
}

.clg-rcenter-intro p {
  color: var(--clg-rcenter-text) !important;
  max-width: 1180px !important;
  margin: 0 auto 18px !important;
  font-size: 20px !important;
  line-height: 1.65 !important;
}

/* ---------- MAIN ---------- */

.clg-rcenter-main {
  background: #fff !important;
  padding: 34px 0 90px !important;
}

.clg-rcenter-main .clg-rcenter-container {
  max-width: 1380px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.clg-rcenter-content {
  display: grid !important;
  gap: 34px !important;
  width: 100% !important;
}

.clg-rcenter-section-card {
  scroll-margin-top: 120px !important;
  background: #fff !important;
  border-radius: 18px !important;
  padding: 58px 64px !important;
  box-shadow: 0 14px 38px rgba(7,17,31,.10) !important;
  overflow: hidden !important;
}

.clg-rcenter-section-card h2 {
  color: var(--clg-rcenter-ink) !important;
  font-size: clamp(34px, 3.7vw, 54px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
  margin: 0 0 30px !important;
  font-weight: 900 !important;
  padding-bottom: 26px !important;
  border-bottom: 1px solid rgba(7,17,31,.10) !important;
}

.clg-rcenter-section-card h3 {
  color: var(--clg-rcenter-ink) !important;
  font-size: 26px !important;
  line-height: 1.25 !important;
  margin: 34px 0 12px !important;
  font-weight: 850 !important;
}

.clg-rcenter-section-card p,
.clg-rcenter-section-card li {
  color: var(--clg-rcenter-text) !important;
  font-size: 20px !important;
  line-height: 1.7 !important;
}

.clg-rcenter-section-card p {
  margin: 0 0 18px !important;
}

/* ---------- SMALL CARD BUTTON ---------- */

.clg-rcenter-card-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  padding: 0 24px !important;
  margin-top: 22px !important;
  border-radius: 12px !important;
  background: var(--clg-rcenter-teal) !important;
  color: var(--clg-rcenter-ink) !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  transition: all .22s ease !important;
}

.clg-rcenter-card-btn:hover {
  background: var(--clg-rcenter-ink) !important;
  color: #fff !important;
}

/* ---------- FAQ ---------- */

.clg-rcenter-faq-section {
  padding: 64px 54px !important;
  border-radius: 18px !important;
  background: var(--clg-rcenter-soft) !important;
  box-shadow: 0 14px 38px rgba(7,17,31,.08) !important;
}

.clg-rcenter-section-label {
  display: table !important;
  margin: 0 auto 14px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: rgba(69,217,230,.14) !important;
  color: #0a7f8a !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.clg-rcenter-faq-section h2 {
  color: var(--clg-rcenter-ink) !important;
  margin-bottom: 34px !important;
  text-align: center !important;
}

.clg-rcenter-faq-list {
  max-width: 980px !important;
  margin: 0 auto !important;
}

.clg-rcenter-faq-list details {
  margin-bottom: 14px !important;
  border: 1px solid var(--clg-rcenter-border) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 5px 16px rgba(7,17,31,.035) !important;
  overflow: hidden !important;
}

.clg-rcenter-faq-list summary {
  cursor: pointer !important;
  padding: 24px 28px !important;
  color: var(--clg-rcenter-ink) !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  list-style: none !important;
}

.clg-rcenter-faq-list summary::-webkit-details-marker {
  display: none !important;
}

.clg-rcenter-faq-list summary::after {
  content: "+" !important;
  float: right;
  color: var(--clg-rcenter-teal-dark) !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.clg-rcenter-faq-list details[open] summary::after {
  content: "–" !important;
}

.clg-rcenter-faq-list details p {
  margin: 0 !important;
  padding: 0 28px 26px !important;
  color: var(--clg-rcenter-muted) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}

/* ---------- BOTTOM CTA ---------- */

.clg-rcenter-bottom-cta {
  padding: 58px 64px !important;
  text-align: center !important;
  background: linear-gradient(135deg, #fbfeff 0%, #eef9fb 100%) !important;
  color: var(--clg-rcenter-ink) !important;
  border: 1px solid rgba(69,217,230,.22) !important;
  border-left: 4px solid var(--clg-rcenter-teal) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 38px rgba(7,17,31,.06) !important;
}

.clg-rcenter-bottom-cta h2,
.clg-rcenter-bottom-cta strong {
  color: var(--clg-rcenter-ink) !important;
}

.clg-rcenter-bottom-cta h2 {
  font-size: clamp(34px, 4vw, 56px) !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  margin: 0 0 16px !important;
  font-weight: 900 !important;
}

.clg-rcenter-bottom-cta p {
  color: var(--clg-rcenter-muted) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  margin: 0 auto 28px !important;
  max-width: 900px !important;
}

.clg-rcenter-bottom-cta .clg-rcenter-cta-buttons {
  justify-content: center !important;
  max-width: none !important;
  margin: 34px auto 0 !important;
}

.clg-rcenter-bottom-cta .clg-rcenter-secondary-btn {
  background: rgba(255,255,255,.76) !important;
  color: var(--clg-rcenter-ink) !important;
  border: 2px solid rgba(7,17,31,.55) !important;
}

.clg-rcenter-bottom-cta .clg-rcenter-secondary-btn:hover {
  background: var(--clg-rcenter-ink) !important;
  color: #fff !important;
  border-color: var(--clg-rcenter-ink) !important;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1020px) {
  .clg-rcenter-hero {
    min-height: auto !important;
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.94) 56%,
        rgba(255,255,255,.66) 100%
      ),
      var(--clg-rcenter-hero-image) center right / cover no-repeat !important;
  }

  .clg-rcenter-hero-content {
    width: 100% !important;
    max-width: 570px !important;
  }
}

@media (max-width: 768px) {
  .clg-rcenter-hero-inner {
    padding: 36px 20px 42px !important;
  }

  .clg-rcenter-hero-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .clg-rcenter-hero h1 {
    font-size: 44px !important;
  }

  .clg-rcenter-subtitle {
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  .clg-rcenter-anchor-list {
    max-width: 100% !important;
    max-height: 150px !important;
  }

  .clg-rcenter-anchor-item {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 14px !important;
    gap: 9px !important;
  }

  .clg-rcenter-cta-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .clg-rcenter-main-btn,
  .clg-rcenter-secondary-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .clg-rcenter-main .clg-rcenter-container,
  .clg-rcenter-intro .clg-rcenter-container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .clg-rcenter-section-card,
  .clg-rcenter-intro-card,
  .clg-rcenter-bottom-cta {
    padding: 32px 24px !important;
    border-radius: 14px !important;
  }

  .clg-rcenter-section-card h2 {
    font-size: 34px !important;
  }

  .clg-rcenter-section-card p,
  .clg-rcenter-section-card li,
  .clg-rcenter-intro p {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  .clg-rcenter-faq-section {
    padding: 36px 22px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 480px) {
  .clg-rcenter-hero-inner {
    padding: 34px 18px 40px !important;
  }

  .clg-rcenter-hero h1 {
    font-size: 40px !important;
  }

  .clg-rcenter-section-card h2 {
    font-size: 30px !important;
  }
}