/* ==========================================================================
   Brian Langford SDIRA LLC - Crypt Carbon vault theme
   Palette:
     CRYPT-CARBON  #1E2226  body background (cool deep carbon steel)
     VAULT-PAPER   #F1EFE6  primary text
     VAULT-GREENGOLD #B7A05C pale champagne brass with green cast (accent)
     CIPHER-STEEL  #2E373E  drawer steel
     PAPER-CREAM   #EFE9DA  tray faces and light plates
     RIVET-LINE    #4A545C  hairlines and bolt outlines
     BOLT-STEEL    #8E969C  engraved subheads
     TIMELOCK-RED  #B04A38  ONLY the time-lock needle and one indicator dot
     INK-DARK      #23272B  engraved text on cream plates
   ========================================================================== */

:root {
  --crypt-carbon: #1E2226;
  --vault-paper: #F1EFE6;
  --vault-greengold: #B7A05C;
  --cipher-steel: #2E373E;
  --paper-cream: #EFE9DA;
  --rivet-line: #4A545C;
  --bolt-steel: #8E969C;
  --timelock-red: #B04A38;
  --ink-dark: #23272B;
  --door-steel: #333D45;
  --door-shadow: #171A1D;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.7;
  background-color: #1E2226;
  color: #F1EFE6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0 0 0.6em;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: #B7A05C;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #F1EFE6;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Scroll reveal (noscript-safe: default visible when JS is off)
   -------------------------------------------------------------------------- */
html.js-reveal .reveal-hidden {
  opacity: 0;
  transform: translateY(26px);
}

html.js-reveal .reveal-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms ease, transform 700ms ease;
}

/* --------------------------------------------------------------------------
   NAVIGATION: Spindle Dial Bar (.spindrive)
   -------------------------------------------------------------------------- */
.spindrive {
  position: relative;
  background-color: #2E373E;
  border-bottom: 1px solid #B7A05C;
  padding: 14px 24px 18px;
}

.spindrive-brushed {
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background-color: #333D45;
  border-bottom: 1px solid #4A545C;
  background-image:
    radial-gradient(circle at 10px 4px, #4A545C 2px, #333D45 2.6px),
    radial-gradient(circle at 40px 4px, #4A545C 2px, #333D45 2.6px),
    radial-gradient(circle at 70px 4px, #4A545C 2px, #333D45 2.6px),
    radial-gradient(circle at 100px 4px, #4A545C 2px, #333D45 2.6px);
  background-size: 120px 8px;
  background-repeat: repeat-x;
}

.spindrive-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 10px;
}

.spindle-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #333D45;
  border: 1px solid #4A545C;
  border-radius: 3px;
  padding: 8px 16px 8px 12px;
  box-shadow: inset 0 0 0 1px #3C464E;
}

.spindle-brand-name {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 1.12rem;
  color: #F1EFE6;
  letter-spacing: 0.04em;
}

.spindle-dialglyph {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #B7A05C;
  position: relative;
  flex: 0 0 auto;
}

.spindle-dialglyph::before,
.spindle-dialglyph::after {
  content: "";
  position: absolute;
  background-color: #B7A05C;
}

.spindle-dialglyph::before {
  left: 50%;
  top: 3px;
  width: 2px;
  height: 9px;
  margin-left: -1px;
}

.spindle-dialglyph::after {
  left: 50%;
  top: 50%;
  width: 9px;
  height: 2px;
  margin-top: -1px;
  margin-left: 1px;
}

.spindle-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.spindle-links li:nth-child(1) .spindle-tag { margin-top: 0; }
.spindle-links li:nth-child(2) .spindle-tag { margin-top: 8px; }
.spindle-links li:nth-child(3) .spindle-tag { margin-top: 2px; }
.spindle-links li:nth-child(4) .spindle-tag { margin-top: 10px; }
.spindle-links li:nth-child(5) .spindle-tag { margin-top: 4px; }

.spindle-tag {
  display: block;
  background-color: #333D45;
  border: 1px solid #4A545C;
  border-radius: 3px;
  padding: 7px 14px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  color: #F1EFE6;
}

.spindle-tag:hover,
.spindle-tag:focus {
  color: #B7A05C;
  border-color: #B7A05C;
  text-decoration: none;
}

.spindle-tag-current {
  color: #B7A05C;
  border-color: #B7A05C;
}

.spindle-toggle {
  display: none;
  background-color: #333D45;
  border: 1px solid #B7A05C;
  color: #F1EFE6;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   HERO: Vault Door Face (.vaultface)
   -------------------------------------------------------------------------- */
.vaultface {
  position: relative;
  background-color: #1E2226;
  padding: 54px 24px 66px;
}

.vaultface-door {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  background-color: #2E373E;
  border: 8px solid #333D45;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px #3C464E,
    inset 0 0 60px #171A1D,
    0 22px 60px #121417;
  padding: 66px 56px 62px;
  overflow: hidden;
}

.vaultface-door::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid #4A545C;
  border-radius: 6px;
  pointer-events: none;
}

.vault-bolts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vault-bolt {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3C464E;
  border: 2px solid #4A545C;
  box-shadow: inset 0 0 0 2px #333D45;
}

.vault-bolt::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 2px;
  margin: -1px 0 0 -4px;
  background-color: #8E969C;
}

.vault-bolt-tl1 { top: 20px; left: 20px; }
.vault-bolt-tl2 { top: 20px; left: 20%; }
.vault-bolt-tl3 { top: 20px; left: 40%; }
.vault-bolt-tl4 { top: 20px; right: 40%; }
.vault-bolt-tl5 { top: 20px; right: 20%; }
.vault-bolt-tl6 { top: 20px; right: 20px; }
.vault-bolt-bl1 { bottom: 20px; left: 20px; }
.vault-bolt-bl2 { bottom: 20px; left: 20%; }
.vault-bolt-bl3 { bottom: 20px; left: 40%; }
.vault-bolt-bl4 { bottom: 20px; right: 40%; }
.vault-bolt-bl5 { bottom: 20px; right: 20%; }
.vault-bolt-bl6 { bottom: 20px; right: 20px; }

.vaultface-headline {
  position: relative;
  text-align: center;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 2.7rem;
  font-weight: bold;
  color: #F1EFE6;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}

.vaultface-headline-mid {
  color: #B7A05C;
}

.vaultface-subline {
  position: relative;
  text-align: center;
  color: #8E969C;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.98rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 44px;
}

.vaultface-core {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 46px;
  align-items: center;
}

.vault-dial {
  position: relative;
  width: 270px;
  height: 270px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #333D45;
  border: 6px solid #3C464E;
  box-shadow: inset 0 0 40px #171A1D, 0 10px 26px #121417;
}

.vault-dial-tickring {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 2px dashed #4A545C;
}

.vault-dial-index {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 6px;
  height: 22px;
  margin-left: -3px;
  background-color: #B7A05C;
  border-radius: 2px;
}

.vault-dial-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background-color: #B7A05C;
  border: 4px solid #8E969C;
  box-shadow: inset 0 0 0 4px #333D45;
}

.vault-dial-spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 152px;
  margin-left: -2px;
  background-color: #8E969C;
  transform-origin: 50% 50%;
  border-radius: 2px;
}

.vault-dial-spoke-a { transform: rotate(0deg); }
.vault-dial-spoke-b { transform: rotate(120deg); }
.vault-dial-spoke-c { transform: rotate(240deg); }

.vaultface-copy {
  position: relative;
}

.vaultface-plates {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.vaultplate {
  display: inline-block;
  align-self: flex-start;
  background-color: #333D45;
  border: 1px solid #4A545C;
  border-radius: 3px;
  padding: 6px 16px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8E969C;
}

.vaultface-lede {
  font-size: 1.06rem;
  color: #F1EFE6;
  margin: 0 0 26px;
}

.lockbar {
  position: relative;
  background-color: #333D45;
  border: 2px solid #4A545C;
  border-radius: 5px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lockbar-plaque {
  display: inline-block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  padding: 13px 24px;
  border-radius: 4px;
}

.lockbar-plaque-solid {
  background-color: #B7A05C;
  color: #23272B;
  border: 2px solid #B7A05C;
}

.lockbar-plaque-solid:hover,
.lockbar-plaque-solid:focus {
  background-color: #F1EFE6;
  border-color: #F1EFE6;
  color: #23272B;
  text-decoration: none;
}

.lockbar-plaque-line {
  background-color: #2E373E;
  color: #F1EFE6;
  border: 2px solid #B7A05C;
}

.lockbar-plaque-line:hover,
.lockbar-plaque-line:focus {
  background-color: #B7A05C;
  color: #23272B;
  text-decoration: none;
}

.lockbar-glyph {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: -1px;
}

/* --------------------------------------------------------------------------
   SECTION: Deposit Tray Wall (.deptray)
   -------------------------------------------------------------------------- */
.deptray {
  background-color: #1E2226;
  padding: 62px 24px 74px;
}

.deptray-head {
  max-width: 1000px;
  margin: 0 auto 46px;
  text-align: center;
}

.deptray-kicker {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B7A05C;
  margin: 0 0 12px;
}

.deptray-title {
  font-size: 2.05rem;
  color: #F1EFE6;
  margin: 0 0 14px;
}

.deptray-intro {
  color: #F1EFE6;
  max-width: 760px;
  margin: 0 auto;
}

.deptray-wall {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  background-color: #23272B;
  border: 6px solid #2E373E;
  border-radius: 8px;
  box-shadow: inset 0 0 50px #121417;
  padding: 34px 26px;
}

.tray {
  position: relative;
  margin: 0 0 24px;
  background-color: #2E373E;
  border: 4px solid #3C464E;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #4A545C, 0 12px 26px #121417;
  display: flex;
}

.tray-inner {
  background-color: #EFE9DA;
  border-radius: 3px;
  padding: 26px 30px 24px;
  color: #23272B;
  position: relative;
  width: 100%;
}

.tray-tag {
  position: absolute;
  top: -13px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  background-color: #B7A05C;
  color: #23272B;
  border: 1px solid #8E969C;
  border-radius: 3px;
  padding: 3px 10px;
  font-weight: bold;
}

.tray-tag-left { left: 14px; }
.tray-tag-right { right: 14px; }

.tray-glyph {
  position: absolute;
  right: 22px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border: 2px solid #B7A05C;
  border-radius: 5px;
  color: #B7A05C;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  line-height: 1.1;
}

.tray h3 {
  color: #23272B;
  font-size: 1.32rem;
  margin: 0 0 10px;
}

.tray p {
  color: #23272B;
  margin: 0;
  max-width: 86%;
}

.tray-link {
  display: inline-block;
  margin-top: 12px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #4A545C;
  border-bottom: 2px solid #B7A05C;
}

.tray-link:hover,
.tray-link:focus {
  color: #23272B;
  text-decoration: none;
}

.tray-t1 { width: 94%; margin-left: 0; }
.tray-t2 { width: 86%; margin-left: auto; }
.tray-t3 { width: 90%; margin-left: 0; }
.tray-t4 { width: 84%; margin-left: auto; }
.tray-t5 { width: 92%; margin-left: 0; }
.tray-t6 { width: 88%; margin-left: auto; }

/* --------------------------------------------------------------------------
   ACCENT STRIP: Time-Lock Dial (.timelock)
   -------------------------------------------------------------------------- */
.timelock {
  background-color: #2E373E;
  border-top: 1px solid #4A545C;
  border-bottom: 1px solid #4A545C;
  padding: 26px 24px;
}

.timelock-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.timelock-dial {
  position: relative;
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: #333D45;
  border: 4px solid #3C464E;
  box-shadow: inset 0 0 18px #171A1D;
}

.timelock-dial-tick {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 2px dotted #4A545C;
}

.timelock-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 30px;
  margin-left: -1.5px;
  background-color: #8E969C;
  transform-origin: 50% 100%;
  border-radius: 2px;
}

.timelock-hand-a { transform: translateY(-100%) rotate(52deg); }
.timelock-hand-b { transform: translateY(-100%) rotate(148deg); }

.timelock-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 32px;
  margin-left: -1px;
  background-color: #B04A38;
  transform: translateY(-100%) rotate(0deg);
  transform-origin: 50% 100%;
}

.timelock-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background-color: #B7A05C;
}

.timelock-dot {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background-color: #B04A38;
}

.timelock-text {
  color: #F1EFE6;
  font-size: 1.02rem;
  margin: 0;
  flex: 1 1 420px;
}

.timelock-text strong {
  color: #B7A05C;
}

/* --------------------------------------------------------------------------
   CONTENT SECTIONS (homepage, services, contact)
   -------------------------------------------------------------------------- */
.openbench {
  background-color: #1E2226;
  padding: 62px 24px 66px;
}

.openbench-inner {
  max-width: 1020px;
  margin: 0 auto;
}

.openbench h2 {
  font-size: 1.98rem;
  color: #F1EFE6;
  margin-bottom: 18px;
}

.openbench h3 {
  font-size: 1.28rem;
  color: #B7A05C;
  margin: 30px 0 10px;
}

.openbench p {
  color: #F1EFE6;
}

.openbench-lead {
  font-size: 1.08rem;
  color: #F1EFE6;
  border-left: 4px solid #B7A05C;
  padding-left: 18px;
  margin-bottom: 26px;
}

.plateband {
  background-color: #23272B;
  border-top: 1px solid #4A545C;
  border-bottom: 1px solid #4A545C;
  padding: 58px 24px 62px;
}

.plateband-inner {
  max-width: 1020px;
  margin: 0 auto;
}

.plateband h2 {
  font-size: 1.98rem;
  color: #F1EFE6;
  margin-bottom: 20px;
}

.plateband p {
  color: #F1EFE6;
}

.plate-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.plate-list li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid #3C464E;
  color: #F1EFE6;
}

.plate-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 10px;
  height: 10px;
  border: 2px solid #B7A05C;
  border-radius: 50%;
}

.plate-list li strong {
  color: #B7A05C;
}

.svc-inline {
  color: #B7A05C;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   FOOTER: Crypt Sill (.cryptfloor)
   -------------------------------------------------------------------------- */
.cryptfloor {
  background-color: #171A1D;
  padding: 0 24px;
}

.cryptfloor-sill {
  max-width: 1120px;
  margin: 0 auto;
  border-top: 3px solid #4A545C;
  padding: 40px 0 30px;
  position: relative;
}

.cryptfloor-medallion {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 30px;
  background-color: #1E2226;
  border: 2px solid #4A545C;
  border-radius: 50%;
  padding: 34px 30px;
  position: relative;
  width: 480px;
  height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cryptfloor-studs {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  pointer-events: none;
}

.cryptfloor-stud {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #333D45;
  border: 1px solid #8E969C;
}

.cryptfloor-stud-s1 { top: 0; left: 50%; margin-left: -6px; }
.cryptfloor-stud-s2 { top: 50%; right: 0; margin-top: -6px; }
.cryptfloor-stud-s3 { bottom: 0; left: 50%; margin-left: -6px; }
.cryptfloor-stud-s4 { top: 50%; left: 0; margin-top: -6px; }
.cryptfloor-stud-s5 { top: 14%; right: 14%; }
.cryptfloor-stud-s6 { bottom: 14%; left: 14%; }
.cryptfloor-stud-s7 { top: 14%; left: 14%; }
.cryptfloor-stud-s8 { bottom: 14%; right: 14%; }

.cryptfloor-brand {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  color: #F1EFE6;
  font-size: 1.2rem;
  margin: 0 0 10px;
  letter-spacing: 0.04em;
}

.cryptfloor-blurb {
  color: #F1EFE6;
  margin: 0;
  font-size: 0.96rem;
}

.cryptfloor-bolts {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.cryptfloor-bolt {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #333D45;
  border: 2px solid #4A545C;
}

.cryptfloor-chips {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.cryptfloor-chip {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  background-color: #1E2226;
  border: 1px solid #4A545C;
  border-radius: 3px;
  padding: 8px 16px;
  color: #F1EFE6;
}

.cryptfloor-chip:hover,
.cryptfloor-chip:focus {
  color: #B7A05C;
  border-color: #B7A05C;
  text-decoration: none;
}

.cryptfloor-plinth {
  max-width: 1120px;
  margin: 0 auto;
  border-top: 1px solid #4A545C;
  padding: 16px 0 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 26px;
  color: #8E969C;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.82rem;
}

.cryptfloor-plinth a {
  color: #B7A05C;
}

.cryptfloor-plinth-glyph {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid #B7A05C;
  border-radius: 50%;
  vertical-align: -1px;
  margin-right: 6px;
}

/* --------------------------------------------------------------------------
   SUB-PAGE HERO (services, contact)
   -------------------------------------------------------------------------- */
.subdoor {
  background-color: #1E2226;
  padding: 46px 24px 20px;
}

.subdoor-inner {
  max-width: 1120px;
  margin: 0 auto;
  background-color: #2E373E;
  border: 6px solid #333D45;
  border-radius: 8px;
  box-shadow: inset 0 0 40px #171A1D;
  padding: 44px 40px;
  position: relative;
}

.subdoor-inner::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid #4A545C;
  border-radius: 4px;
  pointer-events: none;
}

.subdoor-kicker {
  position: relative;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B7A05C;
  margin: 0 0 12px;
}

.subdoor h1 {
  position: relative;
  font-size: 2.4rem;
  color: #F1EFE6;
  margin: 0 0 14px;
}

.subdoor-lede {
  position: relative;
  color: #F1EFE6;
  font-size: 1.06rem;
  max-width: 780px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   SERVICE DETAIL BLOCKS (services page)
   -------------------------------------------------------------------------- */
.svcblock {
  max-width: 1020px;
  margin: 0 auto 26px;
  background-color: #23272B;
  border: 3px solid #2E373E;
  border-left: 6px solid #B7A05C;
  border-radius: 6px;
  padding: 30px 34px 26px;
  position: relative;
}

.svcblock-tag {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: #8E969C;
  margin: 0 0 8px;
}

.svcblock h2 {
  font-size: 1.55rem;
  color: #B7A05C;
  margin: 0 0 14px;
}

.svcblock p {
  color: #F1EFE6;
}

.svcblock-glyph {
  position: absolute;
  top: 26px;
  right: 28px;
  width: 44px;
  height: 44px;
  border: 2px solid #B7A05C;
  border-radius: 5px;
  color: #B7A05C;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.58rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3px;
  line-height: 1.1;
}

.processrow {
  max-width: 1020px;
  margin: 22px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.processcol {
  background-color: #2E373E;
  border: 2px solid #3C464E;
  border-radius: 5px;
  padding: 22px 20px;
  position: relative;
}

.processcol-step {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: #B7A05C;
  margin: 0 0 8px;
}

.processcol h3 {
  font-size: 1.05rem;
  color: #F1EFE6;
  margin: 0 0 8px;
}

.processcol p {
  color: #F1EFE6;
  font-size: 0.94rem;
  margin: 0;
}

.ctaplate {
  max-width: 1020px;
  margin: 34px auto 0;
  background-color: #2E373E;
  border: 3px solid #B7A05C;
  border-radius: 6px;
  padding: 34px 34px 30px;
  text-align: center;
}

.ctaplate h2 {
  color: #F1EFE6;
  font-size: 1.7rem;
  margin: 0 0 12px;
}

.ctaplate p {
  color: #F1EFE6;
  max-width: 700px;
  margin: 0 auto 22px;
}

/* --------------------------------------------------------------------------
   CONTACT PAGE
   -------------------------------------------------------------------------- */
.contactgrid {
  max-width: 1020px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
}

.contactform-box {
  background-color: #23272B;
  border: 3px solid #2E373E;
  border-radius: 6px;
  padding: 30px 30px 26px;
}

.contactform-box h2 {
  color: #F1EFE6;
  font-size: 1.5rem;
  margin: 0 0 18px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: #8E969C;
  margin-bottom: 6px;
}

.field input,
.field textarea {
  width: 100%;
  background-color: #EFE9DA;
  border: 2px solid #4A545C;
  border-radius: 4px;
  padding: 11px 13px;
  font-family: Georgia, serif;
  font-size: 1rem;
  color: #23272B;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid #B7A05C;
  border-color: #B7A05C;
}

.formbtn {
  display: inline-block;
  background-color: #B7A05C;
  color: #23272B;
  border: 2px solid #B7A05C;
  border-radius: 4px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 13px 30px;
  cursor: pointer;
}

.formbtn:hover,
.formbtn:focus {
  background-color: #F1EFE6;
  border-color: #F1EFE6;
}

.formnote {
  color: #8E969C;
  font-size: 0.86rem;
  margin: 14px 0 0;
}

.contactinfo-box {
  background-color: #2E373E;
  border: 3px solid #3C464E;
  border-radius: 6px;
  padding: 30px 30px 26px;
}

.contactinfo-box h2 {
  color: #F1EFE6;
  font-size: 1.5rem;
  margin: 0 0 18px;
}

.contactinfo-row {
  border-bottom: 1px solid #4A545C;
  padding: 12px 0;
}

.contactinfo-row:last-child {
  border-bottom: none;
}

.contactinfo-label {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B7A05C;
  margin: 0 0 4px;
}

.contactinfo-value {
  color: #F1EFE6;
  margin: 0;
}

.faqbox {
  max-width: 1020px;
  margin: 40px auto 0;
}

.faqbox h2 {
  color: #F1EFE6;
  font-size: 1.7rem;
  margin: 0 0 18px;
}

.faqitem {
  background-color: #23272B;
  border: 2px solid #2E373E;
  border-radius: 5px;
  margin-bottom: 12px;
  overflow: hidden;
}

.faqq {
  width: 100%;
  text-align: left;
  background-color: #2E373E;
  border: none;
  color: #F1EFE6;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 1.02rem;
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faqq:hover,
.faqq:focus {
  color: #B7A05C;
}

.faqq-mark {
  color: #B7A05C;
  font-size: 1.2rem;
}

.faqa {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease;
}

.faqa-open {
  max-height: 420px;
}

.faqa p {
  color: #F1EFE6;
  margin: 0;
  padding: 16px 20px;
}

/* --------------------------------------------------------------------------
   Counters / small utility
   -------------------------------------------------------------------------- */
.countband {
  background-color: #23272B;
  border-top: 1px solid #4A545C;
  border-bottom: 1px solid #4A545C;
  padding: 44px 24px;
}

.countband-inner {
  max-width: 1020px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.countcell {
  background-color: #2E373E;
  border: 2px solid #3C464E;
  border-radius: 5px;
  padding: 24px 20px;
  text-align: center;
}

.countcell-num {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 2rem;
  font-weight: bold;
  color: #B7A05C;
  margin: 0 0 6px;
}

.countcell-label {
  color: #F1EFE6;
  font-size: 0.92rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .vaultface-core {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .contactgrid {
    grid-template-columns: 1fr;
  }

  .processrow {
    grid-template-columns: repeat(2, 1fr);
  }

  .countband-inner {
    grid-template-columns: 1fr;
  }

  .vaultface-headline {
    font-size: 2.1rem;
  }

  .cryptfloor-medallion {
    width: 340px;
    height: 340px;
    padding: 26px 20px;
  }
}

@media (max-width: 720px) {
  .spindle-toggle {
    display: inline-block;
  }

  .spindle-links {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }

  .spindle-links.spindle-open {
    display: flex;
  }

  .spindle-links li:nth-child(n) .spindle-tag {
    margin-top: 0;
  }

  .spindle-tag {
    width: 100%;
    text-align: center;
  }

  .tray-t1, .tray-t2, .tray-t3, .tray-t4, .tray-t5, .tray-t6 {
    width: 100%;
    margin-left: 0;
  }

  .tray p {
    max-width: 100%;
  }

  .vaultface-door {
    padding: 44px 24px 40px;
  }

  .vaultface-headline {
    font-size: 1.7rem;
  }

  .processrow {
    grid-template-columns: 1fr;
  }

  .cryptfloor-medallion {
    width: 280px;
    height: 280px;
  }
}