/* Champagne / platinum edition. Decorative layer only. */
:root {
  --champagne-ink: #78694D; /* Readable numbering, unlike pale decorative gold. */
  --metal-edge: linear-gradient(100deg, #D9D7D0 0%, #CDBF9D 34%, #E7E0CE 54%, #F5F4F0 65%, #C7CDCA 82%, #D9D7D0 100%);
  --metal-light: linear-gradient(100deg, transparent, #D9DEDC 20%, #F5F4F0 43%, #E7E0CE 61%, #CDBF9D 78%, transparent);
}
/* One warm structural edge beside the retained emerald edge. */
.hero-facet__edge--2 {
  background: linear-gradient(to bottom, transparent 2%, #D9D7D0 16%, #C6AD79 32%, #C6AD79 53%, #E3D3AE 63%, #C7CDCA 80%, transparent 98%);
  opacity: .95;
}
.hero-facet__beam { background: var(--metal-light); }
.hero-facet__glint {
  width: 4px; height: 4px; border-radius: 0;
  background: var(--metal-light); box-shadow: none;
}
/* Selected grid segments, not a coloured background wash. */
.grid-engineer::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(205,191,157,.48), rgba(217,215,208,.55), transparent) right 128px top 128px / 384px 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(205,191,157,.40), rgba(217,215,208,.5), transparent) right 256px top 64px / 1px 320px no-repeat;
  pointer-events: none;
}
/* Warm readable numbering and silvered hairlines. */
.facet-line:not(.facet-line--accent) { background: var(--metal-edge); }
.section-head .mono-num, .principle__num, .price-row__num { color: var(--champagne-ink); }
.hero__facts .fact-sep { color: #B6A47F; }
.hero__facts a { text-decoration-color: var(--silver-gold); text-underline-offset: 4px; }
/* Surface feedback is champagne; current navigation and actions stay emerald. */
.site-nav__link:not(.is-active)::after,
.card::before {
  background: linear-gradient(90deg, #C7CDCA, #C6AD79 32%, #D5BC87 55%, #E7D9BB 72%, #C7CDCA);
}
.site-nav__link:hover:not(.is-active) { color: var(--ink); }
.site-nav__link:focus-visible::after { opacity: 1; transform: scaleX(1); }
.card::before { height: 2px; }
/* Small permanent inlay only on case studies. */
.card--case::after {
  content: ''; position: absolute; top: 0; right: 22px;
  width: 80px; height: 1px; background: var(--metal-edge);
  pointer-events: none; transition: opacity .25s ease;
}
.card--case:hover::after, .card--case:focus-within::after { opacity: 0; }
.card:focus-within::before { opacity: 1; }
.metric--flag::after { width: min(100%, 160px); height: 1px; background: var(--metal-edge); }
.js .metric--flag .metric__glint { background: var(--metal-light); }
/* Secondary actions: quiet warm border, no travelling reflection. */
.btn--secondary:hover,
.btn--secondary:focus-visible {
  color: var(--ink);
  border-color: #C6AD79;
  background: var(--silk);
}
.btn--secondary::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--metal-edge);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.btn--secondary:hover::after,
.btn--secondary:focus-visible::after { opacity: 1; }
/* Single champagne reflection travelling directly on the outer top edge.
   top:-1px compensates for the button's transparent 1px border. */
.btn--primary::after {
  content: '';
  top: -1px;
  left: -36%;
  width: 34%;
  height: 2.5px;
  opacity: 0;
  pointer-events: none;
  transition: none;
  background: linear-gradient(90deg, transparent, rgba(205,191,157,.45) 20%, #E6D4AE 42%, #FFF9E9 56%, #DCE2DF 72%, transparent);
  -webkit-mask-image: none;
  mask-image: none;
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after { left: -36%; opacity: 0; }
@keyframes champagne-pass {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateX(410%); opacity: 0; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::after { animation: champagne-pass .78s cubic-bezier(.2,.45,.45,1) both; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:focus-visible::after { animation: champagne-pass .78s cubic-bezier(.2,.45,.45,1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover::after,
  .btn--primary:focus-visible::after {
    animation: none; transform: none; left: 28%; opacity: .8;
  }
}
@media (max-width: 639px) {
  .hero-facet__edge--2 { opacity: .45; }
  .grid-engineer::after { opacity: .5; }
  .card--case::after { width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-facet__glint { animation: none; opacity: .7; }
}