/* Gold reveal with a pleter trim (Douglas, 11 Nov 2026, DOU-747).
   Gold is the original liquid gold from site.css (--metal). The one embroidery motif is pleter, the
   Croatian interlace braid, drawn as vector in assets/brand/pleter.svg (mask) and pleter-gold.svg
   (image). It appears as a fine trim: drawn in from the centre on interaction (buttons, selected
   chips, tabs and service choices), and as a quiet line on gold headline words, the header scroll
   thread, the nav underline and the footer. Reduced motion keeps the trim and stops the movement. */
:root {
  --pleter-mask: url('../brand/pleter.svg');
  --pleter-gold: url('../brand/pleter-gold.svg');
}

/* Buttons: liquid gold sweeps in (site.css), then the braid draws outward along the hem */
.btn::after {
  inset: auto 24% 7px; height: 8px; opacity: 1; mix-blend-mode: normal;
  background: var(--gold-900);
  -webkit-mask: var(--pleter-mask) 50% 50% / 19px 8px repeat-x;
  mask: var(--pleter-mask) 50% 50% / 19px 8px repeat-x;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path .7s var(--ease) .3s;
}
.btn:hover::after, .btn:focus-visible::after { clip-path: inset(0 0 0 0); }
.btn--small::after { inset: auto 22% 5px; height: 6px; -webkit-mask-size: 14px 6px; mask-size: 14px 6px; }

/* Selected chips, tabs and service choices: gold fill, braid at the hem */
.chip::after, .tab::after, .service-pick span::after {
  content: ""; position: absolute; z-index: 0; inset: auto 20% 4px; height: 6px; pointer-events: none;
  background: var(--gold-900);
  -webkit-mask: var(--pleter-mask) 50% 50% / 14px 6px repeat-x;
  mask: var(--pleter-mask) 50% 50% / 14px 6px repeat-x;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path .6s var(--ease) .2s;
}
.chip.is-on::after, .tab[aria-selected="true"]::after, .service-pick input:checked + span::after { clip-path: inset(0 0 0 0); }
.service-pick span { position: relative; }

/* Gold headline words: liquid gold lettering with a braid beneath (each wrapped line gets its own) */
.gilt {
  background: var(--metal-text) 0 0 / 200% 100%, var(--pleter-gold) 50% 100% / .6em .25em repeat-x;
  -webkit-background-clip: text, border-box; background-clip: text, border-box;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-bottom: .3em; color: transparent;
}

/* Header scroll thread and nav underline become a fine gold braid */
.hdr__progress {
  height: 7px; bottom: -3px; background: var(--metal); background-size: 200% 100%;
  -webkit-mask: var(--pleter-mask) 0 50% / 17px 7px repeat-x;
  mask: var(--pleter-mask) 0 50% / 17px 7px repeat-x;
}
.nav__link::before, .nav__toggle::before {
  height: 6px; bottom: 23px; background: var(--gold-500); transform-origin: 50% 50%;
  -webkit-mask: var(--pleter-mask) 50% 50% / 14px 6px repeat-x;
  mask: var(--pleter-mask) 50% 50% / 14px 6px repeat-x;
}

/* Footer: one braid line instead of the repeated chevron border */
.ftr::before, .page-index .ftr::before, .ftr--utility::before {
  height: 9px;
  -webkit-mask: var(--pleter-mask) 50% 50% / 21px 9px repeat-x;
  mask: var(--pleter-mask) 50% 50% / 21px 9px repeat-x;
}

@media (max-width: 900px) {
  .nav__link::before, .nav__toggle::before { bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn::after, .chip::after, .tab::after, .service-pick span::after { transition: none; }
}
@media (forced-colors: active) {
  .gilt { color: CanvasText; background: none; padding-bottom: 0; }
  .btn::after, .chip::after, .tab::after, .service-pick span::after, .hdr__progress, .ftr::before { display: none; }
}