/* ==========================================================================
   Rivet & Pine Carpentry — theme
   Warm, dark, photo-led. A workshop rather than an office.
   ========================================================================== */

:root {
  --d-bg:         #FDFBF7;
  --d-surface:    #F2ECE1;
  --d-ink:        #241F1A;
  --d-ink-soft:   #4A4139;
  --d-muted:      #6F655A;
  --d-rule:       #E1D7C6;
  --d-accent:     #A34C24;   /* burnt copper — 5.6:1 on paper, 4.9:1 on the
                                cream surface, 5.8:1 under white button text */
  --d-accent-ink: #FFFFFF;
  --d-dark:       #241F1A;

  /* The same copper is far too dark to read on the near-black hero, so the
     dark sections get a lifted version of it — 6.1:1 on --d-dark. */
  --d-accent-light: #D98B57;

  --d-font-display: "Bitter", Georgia, "Times New Roman", serif;
  --d-font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --d-radius: 3px;   /* squared off — it's a joinery shop */
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.015em; }

.d-eyebrow { color: var(--d-accent); }
/* Anywhere the ground goes dark, the copper has to lift with it. */
.rp-hero .d-eyebrow,
.d-section--dark .d-eyebrow,
.d-footer .d-eyebrow { color: var(--d-accent-light); }

/* Dark hero, full bleed, with the workshop tone. */
.rp-hero {
  background: var(--d-dark);
  color: rgba(255,255,255,.82);
  position: relative;
  overflow: hidden;
}
.rp-hero h1 { color: #fff; max-width: 16ch; }
.rp-hero .d-lead { color: rgba(255,255,255,.8); }
.rp-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 940px) {
  .rp-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; }
}

/* A copper hairline that runs the width of the hero, like a plumb line. */
.rp-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: var(--d-accent);
}

/* Phone number treated as the primary element, because for a trade it is. */
.rp-phone {
  display: inline-flex; align-items: baseline; gap: .6rem;
  font-family: var(--d-font-display); font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  color: #fff; text-decoration: none; letter-spacing: -.01em;
}
.rp-phone span {
  font-family: var(--d-font-body); font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--d-accent-light);
}
.rp-phone:hover { color: var(--d-accent-light); }

/* .rp-phone sets display:inline-flex, which would otherwise beat
   `.d-nav__phone { display: none }` and leave the number wrapping across two
   lines into the logo on a phone. Re-assert the hide, then restore it. */
.d-nav__phone.rp-phone { display: none; }
@media (min-width: 900px) {
  .d-nav__phone.rp-phone { display: inline-flex; color: #fff; font-size: 1.15rem; }
}

/* Service cards get a top copper rule instead of a full border. */
.rp-service {
  background: var(--d-bg);
  border: 1px solid var(--d-rule);
  border-top: 3px solid var(--d-accent);
  border-radius: 0;
  padding: 1.75rem;
}
.rp-service h3 { margin-bottom: .5rem; }

/* Trust bar under the hero */
.rp-badges {
  display: flex; flex-wrap: wrap; gap: .75rem 2.25rem;
  font-size: .9375rem; font-weight: 600; color: var(--d-ink);
}
.rp-badges span { display: inline-flex; align-items: center; gap: .5rem; }
.rp-badges svg { width: 1.15rem; height: 1.15rem; color: var(--d-accent); flex: none; }