/* DON Roofing "real gold" layer (November 5, 2026): a metallic gold finish on the
   brand's gold elements, replacing the flat #CBA243 fill. Matches the logo's gold. */
:root{
  --gold-metal:linear-gradient(135deg,#8c6a20 0%,#c99c3e 18%,#f3dc95 38%,#d6ad52 52%,#a9802c 72%,#e6c675 90%,#b48a32 100%);
  --gold-metal-soft:linear-gradient(135deg,#b48a32 0%,#dcb55e 30%,#f6e4a6 48%,#d4aa4f 64%,#b8902f 100%);
  --gold-line:linear-gradient(90deg,rgba(203,162,67,0) 0%,#cfa64a 18%,#f3dc95 50%,#cfa64a 82%,rgba(203,162,67,0) 100%);
  --gold-ink:#1a1306;
}

/* Gold buttons: polished metal with a top highlight; the shine slides on hover. */
.dr .btn-gold,.dr .hdr .cta{background:var(--gold-metal);background-size:220% 220%;background-position:0% 50%;color:var(--gold-ink)!important;border:1px solid #b08a34;box-shadow:inset 0 1px 0 rgba(255,246,214,.65),inset 0 -1px 0 rgba(90,64,14,.35),0 6px 16px -8px rgba(140,104,30,.7);text-shadow:0 1px 0 rgba(255,240,200,.35);transition:background-position .6s cubic-bezier(.16,1,.3,1),box-shadow .3s,transform .12s}
.dr .btn-gold:hover,.dr .hdr .cta:hover{background:var(--gold-metal);background-size:220% 220%;background-position:100% 50%;color:var(--gold-ink)!important;box-shadow:inset 0 1px 0 rgba(255,246,214,.75),inset 0 -1px 0 rgba(90,64,14,.35),0 10px 22px -8px rgba(160,120,36,.85)}

/* The gold stats band: brushed gold, with faint horizontal grain. */
.stats{background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 2px,rgba(255,255,255,.035) 2px 3px),var(--gold-metal-soft);box-shadow:inset 0 1px 0 rgba(255,244,205,.6),inset 0 -1px 0 rgba(110,80,20,.35)}
.stats .v,.stats .l{color:var(--gold-ink)}

/* Gold words in headings and big gold figures: metallic text. */
.h-d em,.hero h1 em,.process h2 span,.badge .v{background:var(--gold-metal);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#cfa64a}
/* Hero word keeps its one-time light sweep, layered over the metal. */
.hero h1 em{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,250,228,.95) 50%,rgba(255,255,255,0) 60%) 100% 0/250% 100% no-repeat,var(--gold-metal);-webkit-background-clip:text;background-clip:text}
@keyframes dr-sheen{from{background-position:100% 0,0 0}to{background-position:-60% 0,0 0}}

/* Stars in metallic gold. */
.dr .st{background:linear-gradient(180deg,#f6e3a1 0%,#d9b158 45%,#b08530 75%,#d6ad52 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#cfa64a}

/* Gold discs: process steps, social icons. */
.steps .n,.social a{background:var(--gold-metal);color:var(--gold-ink);box-shadow:inset 0 1px 0 rgba(255,246,214,.7),inset 0 -2px 3px rgba(90,64,14,.35),0 4px 10px -4px rgba(120,90,25,.6)}
.steps .n{text-shadow:0 1px 0 rgba(255,240,200,.4)}
.social a:hover{background:var(--gold-metal-soft);color:var(--gold-ink)}

/* Gold rules: timeline, card tops, header line and active tab. */
.steps::before{background:linear-gradient(180deg,#e9c873,#b8902f 50%,#e3c06a)}
.card{border-top:0!important;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold-metal)}
.hdr{border-bottom:0;box-shadow:none;position:relative}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-line);opacity:.7}
.nav a.dr-active::after{background:var(--gold-metal)}
.res img,.grid img{box-shadow:0 0 0 1px rgba(203,162,67,.0)}

@media (prefers-reduced-motion:reduce){
  .dr .btn-gold,.dr .hdr .cta{transition:none}
  .hero h1 em{background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}

/* Stat icons are black glyphs on a baked-in flat gold square: drop the square
   so the glyph sits directly on the brushed gold. */
.stats .stat img{filter:grayscale(1) contrast(6) brightness(1.25);mix-blend-mode:multiply}