/* Sixth Street Roofing (DEMO) — Trade Bold direction, brick-red + charcoal palette.
   Linked AFTER components.css. Display: Poppins. Body: Inter. */
:root {
  --color-accent: #A8322B;          /* brick red, primary CTA */
  --color-accent-hover: #8C2922;
  --color-accent-contrast: #ffffff;

  --color-bg: #FFFFFF;
  --color-surface: #F6F4F2;
  --color-border: #E6DFDA;
  --color-text: #1A1513;
  --color-text-muted: #5A524C;

  --color-dark-bg: #211F1D;          /* charcoal */
  --color-dark-text: #F5F1EE;
  --color-dark-muted: #B7B0A9;

  --color-gold: #C8763A;             /* copper accent / 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: #1A1513; }
h1, h2, h3 { font-weight: 700; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }
.eyebrow { color: var(--color-accent); }

.badge-gold { background: var(--color-gold); color: #211F1D; font-weight: 700; border-radius: 6px; padding: 3px 10px; }
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero h1 em.gold { color: #1A1513; box-shadow: inset 0 -0.32em 0 var(--color-gold); }

/* Brand wordmark in the nav */
.nav__brand { gap: 12px; }
.brandtile { width: 42px; height: 42px; border-radius: 10px; background: var(--color-accent);
  color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.brandtile b { color: var(--color-gold); }
.brandword { display: flex; flex-direction: column; line-height: 1; }
.brandword b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: #1A1513; }
.brandword small { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 3px; }

/* Topbar: charcoal 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); }
@media (max-width: 720px) { .topbar__inner { justify-content: center; } .topbar__badges { display: none; } }

.section--dark { background: var(--color-dark-bg); color: var(--color-dark-text); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-dark-text); }
.section--dark .eyebrow { color: var(--color-gold); }
.section--alt { background: var(--color-surface); }

.stepnum { width: 40px; height: 40px; border-radius: 50%; background: var(--color-gold); color: #211F1D;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }

/* Highlight-underline key words */
.u-gold { background-repeat: no-repeat; background-position: 0 0.92em; background-size: 100% 0.26em; padding: 0 .04em;
  background-image: linear-gradient(var(--color-gold), var(--color-gold)); }

/* Accent bar */
.accentbar { display: flex; gap: 5px; margin-top: 14px; }
.accentbar.center { justify-content: center; }
.accentbar i { width: 26px; height: 5px; border-radius: 3px; display: block; }
.accentbar i:nth-child(1) { background: var(--color-accent); }
.accentbar i:nth-child(2) { background: var(--color-gold); }
.accentbar i:nth-child(3) { background: #211F1D; }

#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); }
.btn--ghost:hover { border-color: var(--color-gold); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery figure { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: var(--color-surface); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

.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); }