/* Official BooYou Marketing color system, based on the business card. */
:root {
  --brand-deep-blue-green: #06374B;
  --brand-warm-white: #FFF9F9;
  --brand-deepest: #042D3E;
  --brand-mid: #10485A;
  --brand-light: #E9F0F1;
  --brand-soft-white: #F5F1F1;

  --navy: var(--brand-deep-blue-green);
  --navy-deep: var(--brand-deepest);
  --teal: var(--brand-mid);
  --teal-soft: var(--brand-light);
  --warm: var(--brand-warm-white);
  --warm-deep: var(--brand-soft-white);
  --white: var(--brand-warm-white);
  --ink: var(--brand-deep-blue-green);
  --muted: #49636C;
  --line: #C7D5D7;
  --line-strong: #A8C1C5;
  --accent: var(--brand-warm-white);
  --accent-soft: #DCEBEC;
}

/* Dark foundations retain the existing section rhythm while using official tones. */
.hero,
.method,
.company-footer {
  background: var(--brand-deep-blue-green);
}

.contact {
  background: var(--brand-deepest);
}

/* Hero and final CTA: replace former gold accents with warm-white tonal contrast. */
.hero h1 em,
.hero h1 span,
.contact h2 em,
.feature-case .case-top b,
.case-result strong {
  color: var(--brand-warm-white);
}

.hero h1 em,
.hero-copy,
.hero-founder-note,
.method-top > p:last-child,
.method-row p,
.contact-content > p,
.contact-easy {
  color: var(--accent-soft) !important;
}

.hero-frame:before {
  border-color: var(--brand-warm-white);
}

.contact:after {
  border-color: rgba(255, 249, 249, .58);
}

/* Consultation CTAs use warm white with deep blue-green text. */
.header-cta,
.button-primary {
  background: var(--brand-warm-white);
  color: var(--brand-deep-blue-green);
}

.button-primary:hover {
  background: var(--brand-soft-white);
}

.button-primary b {
  background: var(--brand-deep-blue-green);
  color: var(--brand-warm-white);
}

.button-text span,
.floating-cta:hover {
  color: var(--brand-warm-white);
}

.floating-cta {
  background: var(--brand-mid);
  box-shadow: 7px 7px 0 var(--brand-warm-white);
}

.floating-cta:hover {
  box-shadow: 10px 10px 0 var(--brand-warm-white);
}

/* Light sections, borders, and muted text stay within the blue-green family. */
.problem-card:hover {
  box-shadow: 0 10px 22px rgba(6, 55, 75, .08);
}

.service-grid,
#services .service-card,
.process-list,
.process-list li,
.trial-content,
.assurance-list,
.assurance-list > div {
  border-color: var(--line-strong);
}

.trial-content p,
.process-list p,
.case-extra > p,
.assurance-list p,
.renewal-points p {
  color: var(--muted);
}

.renewal-points article {
  border-color: var(--line-strong);
  background: rgba(255, 249, 249, .62);
}

.trust-bar-inner > div {
  border-color: var(--line-strong);
}

.footer-links .footer-policy,
.footer-bottom p,
.company-details i {
  color: var(--accent-soft);
  border-color: rgba(220, 235, 236, .65);
}

@media (max-width: 760px) {
  .floating-cta {
    box-shadow: 3px 3px 0 var(--brand-warm-white);
  }

  #services .service-card,
  #services .service-card:nth-child(n),
  .process-list li,
  .process-list li:nth-child(n) {
    border-color: var(--line-strong);
  }
}