/* Logo bronze, shared by every page. Scroll moves --gold-shift. */

:root {
  --gold: #8f6840;
  --gold-2: #c4a36a;
  --gold-deep: #6e4c28;
  --gold-shift: 0%;
  --bar-a: #c4a36a;
  --bar-b: #8f6840;
  --bar-c: #6e4c28;
}

html[data-theme="dark"] {
  --gold: #c4a36a;
  --gold-2: #e4cfa6;
  --gold-deep: #a68450;
  --bar-a: #e4cfa6;
  --bar-b: #d2b07a;
  --bar-c: #b8894e;
}

.stats-bar,
.about-badge,
.btn-primary,
.nav-cta,
.form-submit,
.sticky-call,
#scrollTop,
.svc-icon,
.info-card-icon,
.strength-num,
.contact-detail-icon,
.hero-btn:hover {
  background-color: var(--gold);
  background-image: linear-gradient(
    105deg,
    var(--bar-a) 0%,
    var(--bar-b) 36%,
    var(--bar-c) 68%,
    var(--bar-a) 100%
  );
  background-size: 280% 100%;
  background-position: var(--gold-shift, 0%) 50%;
  background-repeat: no-repeat;
}

.hero-slide::after,
.inner-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    105deg,
    rgba(196, 163, 106, 0.34) 0%,
    rgba(143, 104, 64, 0) 38%,
    rgba(110, 76, 40, 0.28) 70%,
    rgba(246, 231, 198, 0) 100%
  );
  background-size: 280% 100%;
  background-position: var(--gold-shift, 0%) 50%;
}

.hero-slide .container,
.inner-hero .container {
  position: relative;
  z-index: 1;
}

.inner-hero { position: relative; }

html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: #c8c4be;
  opacity: 0;
}
html.theme-fade::before { animation: theme-fade-in 800ms ease forwards; }
html.theme-fade-out::before { animation: theme-fade-out 1100ms ease forwards; }
@keyframes theme-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes theme-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}