body {
  background-color: #080808;
  background-image: linear-gradient(rgba(8,8,8,.63), rgba(8,8,8,.77)), url('/assets/black-marble-gold-veins.png');
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: fixed;
}
.site-header, main, .site-footer { position: relative; z-index: 1; }
.site-footer { background: rgba(8,8,8,.78); }
#subpage-datum { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .43;
  background-image: linear-gradient(90deg, transparent calc(100% - 1px), #d6b67475 calc(100% - 1px)), linear-gradient(0deg, transparent calc(100% - 1px), #d6b67475 calc(100% - 1px));
  background-size: 170px 170px; }
#subpage-datum::before, #subpage-datum::after { content: ""; position: absolute; display: block; pointer-events: none; }
#subpage-datum::before { top: 18%; right: 7%; width: 42%; height: 2px; transform-origin: left;
  background: linear-gradient(90deg, transparent, #f1d99d 14%, #f1d99d 86%, transparent); box-shadow: 0 0 15px #e7c4819c; }
#subpage-datum::after { top: 9%; right: 20%; width: 2px; height: 31%; transform-origin: top;
  background: linear-gradient(transparent, #f1d99d 14%, #f1d99d 86%, transparent); box-shadow: 0 0 15px #e7c4819c; }
html.js-subpage[data-motion="on"] #subpage-datum { animation: subpage-grid-drift 36s linear infinite alternate; }
html.js-subpage[data-motion="on"] #subpage-datum::before { animation: subpage-draft-horizontal 8s .1s cubic-bezier(.24,.72,.22,1) infinite; }
html.js-subpage[data-motion="on"] #subpage-datum::after { animation: subpage-draft-vertical 8s .8s cubic-bezier(.24,.72,.22,1) infinite; }
@keyframes subpage-grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 32px 0, 0 32px; } }
@keyframes subpage-draft-horizontal { 0%, 6% { transform: scaleX(0); opacity: 0; } 23%, 71% { transform: scaleX(1); opacity: 1; } 88%, 100% { transform: scaleX(0); opacity: 0; } }
@keyframes subpage-draft-vertical { 0%, 13% { transform: scaleY(0); opacity: 0; } 31%, 69% { transform: scaleY(1); opacity: 1; } 86%, 100% { transform: scaleY(0); opacity: 0; } }
.page-head, .content-section, .next-step { position: relative; }
.page-head::before, .content-section::before, .next-step::before { content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, #e1c486, #bc9859 55%, transparent); pointer-events: none; transform-origin: left; }
.page-head::before { bottom: -23px; }
.content-section::before, .next-step::before { top: -1px; }
html.js-subpage[data-motion="on"] .draft-target:not(.is-drafted)::before { transform: scaleX(0); }
html.js-subpage[data-motion="on"] .draft-target.is-drafted::before { transform: scaleX(1); transition: transform 1.05s cubic-bezier(.2,.75,.2,1); }
.draft-target::after { content: ""; position: absolute; top: -6px; right: 0; width: 12px; height: 12px;
  border: 1px solid #e9cb89; background: #e9cb8970; box-shadow: 0 0 11px #edca80a1; pointer-events: none; }
.page-head::after { top: auto; bottom: -29px; }
html.js-subpage[data-motion="on"] .draft-target.is-drafted::after { animation: subpage-survey-mark 4.8s ease-in-out infinite; }
@keyframes subpage-survey-mark { 0%, 100% { opacity: .35; box-shadow: 0 0 6px #edca8070; } 50% { opacity: 1; box-shadow: 0 0 18px #edca80d9, 0 0 0 7px #edca8025; } }
.page-image::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #efdaaa 18%, #fff1ca 50%, #efdaaa 82%, transparent);
  box-shadow: 0 0 18px 3px #d8b36c8c; opacity: 0; pointer-events: none; }
html.js-subpage[data-motion="on"] .page-image::before { animation: subpage-site-scan 6.5s cubic-bezier(.35,.03,.65,.97) infinite; }
@keyframes subpage-site-scan { 0%, 8% { top: 0; opacity: 0; } 15% { opacity: .92; } 78% { top: 100%; opacity: .92; } 87%, 100% { top: 100%; opacity: 0; } }
html[data-motion="off"] #subpage-datum, html[data-motion="off"] #subpage-datum::before, html[data-motion="off"] #subpage-datum::after,
html[data-motion="off"] .draft-target::after, html[data-motion="off"] .page-image::before { animation: none !important; }
html[data-motion="off"] #subpage-datum::before, html[data-motion="off"] #subpage-datum::after { transform: none; opacity: .65; }
html[data-motion="off"] .draft-target::before { transform: none; transition: none; }
html[data-motion="off"] .page-image::before { opacity: 0; }
#subpage-motion-toggle {
  position: fixed; z-index: 30; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 38px; padding: 8px 12px;
  border: 1px solid #80683d; background: rgba(13,13,13,.92);
  color: #ddc99d; font: 11px/1.2 Arial, Helvetica, sans-serif;
  backdrop-filter: blur(12px);
}
#subpage-motion-toggle:hover, #subpage-motion-toggle:focus-visible { border-color: #dfc38a; color: #fff2d2; }
#subpage-motion-toggle .motion-glyph { width: 7px; height: 9px; border-inline: 2px solid currentColor; }
#subpage-motion-toggle[aria-pressed="true"] .motion-glyph { width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
#subpage-menu { display: none; align-items: center; gap: 12px; background: transparent; border: 0; color: #f2eee6; font: 13px/1.2 Arial, sans-serif; cursor: pointer; padding: 9px 0 9px 12px; }
#subpage-menu i { display: block; width: 24px; height: 11px; border-top: 1px solid #d8b979; border-bottom: 1px solid #d8b979; }
@media (max-width: 800px) {
  .site-header { position: sticky; top: 0; z-index: 50; margin: 0; padding: 0 var(--gutter); min-height: 73px; height: 73px; flex-direction: row; align-items: center; gap: 15px; background: rgba(8,8,9,.96); backdrop-filter: blur(16px); }
  #subpage-menu { display: inline-flex; margin-left: auto; flex-shrink: 0; }
  .js-subpage .site-nav { display: none; position: absolute; top: 73px; left: 0; right: 0; width: 100%; padding: 12px var(--gutter) 25px; background: rgba(8,8,9,.98); border-bottom: 1px solid #c4a66b70; box-shadow: 0 20px 35px #0009; flex-direction: column; align-items: stretch; gap: 0; }
  .js-subpage .site-nav.is-open { display: flex; }
  .js-subpage .site-nav a { padding: 12px 0; border-bottom: 1px solid #c4a66b3d; font-size: 13px; }
  .js-subpage .site-nav .nav-contact { margin: 15px 0 0; padding: 11px 15px; border: 1px solid #c4a66b70; text-align: center; }
}
@media (max-width: 760px) {
  body { background-image: linear-gradient(rgba(8,8,8,.72), rgba(8,8,8,.83)), url('/assets/black-marble-gold-veins.png'); }
  #subpage-datum { opacity: .3; background-size: 120px 120px; }
  #subpage-datum::before { top: 15%; right: 5%; width: 55%; }
  #subpage-datum::after { right: 14%; height: 22%; }
  #subpage-motion-toggle { right: 13px; bottom: 13px; font-size: 10px; min-height: 36px; }
}