/* =============================================================
   Reusable dark-navy "Ark Difference" section
   Mirrors the homepage .difference styling exactly so any page
   using this class gets the same brand identity: navy base +
   Ark/Promise watermark + muted overlay + serif white heading
   with italic gold accent + light-grey intro copy.
   Apply to any <section> that should share this treatment:
     <section class="ark-difference-section"> ... </section>
   Text-style opt-ins:
     .ark-difference-eyebrow  (uppercase gold kicker)
     .ark-difference-title    (serif white, italic gold <em>)
     .ark-difference-intro    (light-grey body, italic gold <em>)
============================================================= */
.ark-difference-section {
  --ark-difference-navy: #213D56;
  --ark-difference-gold: #e0b162;
  --ark-difference-cream: #f7f3ea;
  --ark-difference-overlay-opacity: 0.94;
  --ark-difference-serif: 'GFS Didot', 'Times New Roman', serif;
  background-color: var(--ark-difference-navy);
  background-image: url('https://demo.arkroofer.com/wp-content/uploads/2026/06/Artboard-1-scaled.png');
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  position: relative;
  overflow: hidden;
}
.ark-difference-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ark-difference-navy);
  opacity: var(--ark-difference-overlay-opacity);
  pointer-events: none;
  z-index: 0;
}
/* Opt-in text elements sit above the overlay */
.ark-difference-eyebrow,
.ark-difference-title,
.ark-difference-intro {
  position: relative;
  z-index: 1;
}

.ark-difference-eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ark-difference-gold);
  margin-bottom: 28px;
  font-weight: 700;
}
.ark-difference-title {
  font-family: var(--ark-difference-serif);
  font-size: clamp(34px, 4.6vw, 60px);
  color: var(--ark-difference-cream);
  line-height: 1.12;
  margin: 0 auto 34px;
  letter-spacing: -0.01em;
  font-weight: 400;
  max-width: 1120px;
}
.ark-difference-title em {
  font-style: italic;
  color: var(--ark-difference-gold);
}
.ark-difference-intro {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(247, 243, 234, 0.82);
  margin: 0 auto 70px;
  max-width: 760px;
  font-weight: 300;
}
.ark-difference-intro em {
  font-style: normal;
  color: var(--ark-difference-gold);
}