/* Value-Add Construction — Trade Bold direction, Jamaican flag palette.
   Linked AFTER components.css.
   Green #009B3A (accent / CTA), Gold #FED100 (highlight), Black (dark sections).
   Display: Poppins. Body: Inter. Logo pending from Warren. */
:root {
  --color-accent: #4E9A2F;          /* logo green, primary CTA */
  --color-accent-hover: #3E7E25;
  --color-accent-contrast: #ffffff;

  --color-bg: #FFFFFF;
  --color-surface: #F3F7F3;
  --color-border: #E0E7E0;
  --color-text: #16181a;
  --color-text-muted: #4f5a52;

  --color-dark-bg: #0B0B0B;          /* Jamaican black */
  --color-dark-text: #F5F5F2;
  --color-dark-muted: #B7BAB3;

  --color-gold: #EFA81E;             /* logo gold, highlight */

  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-hero: clamp(2.5rem, 7vw, 4.5rem);
}

h1, h2, h3, h4 { color: #0B0B0B; }
h1, h2, h3 { font-weight: 700; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }
.eyebrow { color: var(--color-accent); }

/* Gold highlight accents */
.badge-gold { background: var(--color-gold); color: #0B0B0B; font-weight: 700; border-radius: 6px; padding: 3px 10px; }
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero h1 em.gold { color: #0B0B0B; box-shadow: inset 0 -0.35em 0 var(--color-gold); }

/* Logo: transparent-background mark, sized up a touch. No dark chip behind it. */
/* Beat the shared `.nav__brand img` (36px) rule with a more specific selector. */
.nav__brand .brand-logo { height: 84px; border-radius: 0; }
@media (max-width: 720px) { .nav__brand .brand-logo { height: 60px; } }

/* Brand tile (placeholder until the logo lands) */
.brandtile { width: 38px; height: 38px; border-radius: 9px; background: var(--color-accent);
  color: #fff; display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 700; font-size: 16px; }
.brandtile b { color: var(--color-gold); }

/* Topbar: black call strip */
.topbar { background: var(--color-dark-bg); color: var(--color-dark-text); font-size: var(--fs-small); }
.topbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 0; }
.topbar__badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.4rem; }
.topbar a { color: var(--color-gold); }

/* Topbar collapses to just the call link on small screens */
@media (max-width: 720px) {
  .topbar__inner { justify-content: center; }
  .topbar__badges { display: none; }
}

/* Dark section = Jamaican black with gold accents */
.section--dark .eyebrow { color: var(--color-gold); }

/* Scheduling steps use a gold number chip */
.stepnum { width: 40px; height: 40px; border-radius: 50%; background: var(--color-gold); color: #0B0B0B;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }

/* ===== Flare: Jamaican accents (green / gold / black) ===== */
/* Highlight-underline key words in headings */
.u-gold, .u-green { background-repeat: no-repeat; background-position: 0 0.92em; background-size: 100% 0.26em; padding: 0 .04em; }
.u-gold  { background-image: linear-gradient(var(--color-gold), var(--color-gold)); }
.u-green { background-image: linear-gradient(rgba(78,154,47,.5), rgba(78,154,47,.5)); }

/* Tricolor accent bar, a nod to the flag */
.flagbar { display: flex; gap: 5px; margin-top: 14px; }
.flagbar.center { justify-content: center; }
.flagbar i { width: 26px; height: 5px; border-radius: 3px; display: block; }
.flagbar i:nth-child(1) { background: var(--color-accent); }
.flagbar i:nth-child(2) { background: var(--color-gold); }
.flagbar i:nth-child(3) { background: #0B0B0B; }

/* Themed cards */
#services .card { border-top: 3px solid var(--color-accent); }
#services .card:hover { border-top-color: var(--color-gold); }
#reviews .card { border-left: 3px solid var(--color-gold); }

/* Gold accent on ghost-button hover */
.btn--ghost:hover { border-color: var(--color-gold); }

/* Service-area chips get a Jamaican edge */
#areas .card { border-bottom: 3px solid var(--color-accent); }
#areas .card:hover { border-bottom-color: var(--color-gold); }

/* Green check-list (service pages) */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px 30px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.checks li { position: relative; padding-left: 32px; line-height: 1.5; }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent); }
.checks li::after { content: ""; position: absolute; left: 7px; top: 6px; width: 6px; height: 10px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); }

/* Service hub cards link block */
.svc-card { display: block; height: 100%; }
.svc-card .card { height: 100%; }

/* Alternating tinted section (work galleries, community) */
.section--alt { background: var(--color-surface); }