/* ==========================================================================
   Vix digital card
   The identity block is a printed calling card: ink stock, foil-stamped rule,
   registration marks at the corners, and one plate that carries the code.
   The businesses below it sit on paper and follow the phone's appearance.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --ink:       #0B0D11;
  --ink-2:     #141821;
  --ink-line:  rgba(255, 255, 255, .10);
  --ink-text:  #F2F3F5;
  --ink-muted: #98A0AE;

  --brass:      #C7A253;          /* overridden inline by the accent colour set in admin */
  --brass-soft: #E6D0A0;
  --brass-soft: color-mix(in srgb, var(--brass) 58%, #FFF6E2);

  --paper:    #EBECEF;
  --surface:  #FFFFFF;
  --text:     #12151B;
  --muted:    #5C6373;
  --hairline: rgba(16, 20, 28, .12);
  --shadow:   0 22px 50px -34px rgba(9, 12, 18, .55);

  --radius:  20px;
  --tap:     56px;
  --accent:  #C7A253;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #07090C;
    --surface:  #12161D;
    --text:     #ECEEF2;
    --muted:    #98A0AE;
    --hairline: rgba(255, 255, 255, .11);
    --shadow:   0 22px 50px -34px rgba(0, 0, 0, .8);
  }
}

:root[data-theme="dark"] {
  --paper:    #07090C;
  --surface:  #12161D;
  --text:     #ECEEF2;
  --muted:    #98A0AE;
  --hairline: rgba(255, 255, 255, .11);
  --shadow:   0 22px 50px -34px rgba(0, 0, 0, .8);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
.icon { flex: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 6px;
}

.sheet {
  max-width: 460px;
  margin: 0 auto;
  padding: 16px 16px calc(40px + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   Card front
   -------------------------------------------------------------------------- */

.front {
  position: relative;
  padding: 26px 20px 22px;
  border-radius: 26px;
  background:
    radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--brass) 16%, transparent) 0%, transparent 70%),
    radial-gradient(120% 80% at 50% -10%, #1B2130 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 62%);
  border: 1px solid var(--ink-line);
  box-shadow: var(--shadow);
  color: var(--ink-text);
  text-align: center;
  overflow: hidden;
  animation: rise .6s cubic-bezier(.2, .7, .3, 1) both;
}

/* Registration marks — this card is made to be printed. */
.mark {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 0 solid rgba(199, 162, 83, .45);
  pointer-events: none;
}
.mark-tl { top: 13px;    left: 13px;  border-top-width: 1px; border-left-width: 1px; }
.mark-tr { top: 13px;    right: 13px; border-top-width: 1px; border-right-width: 1px; }
.mark-bl { bottom: 13px; left: 13px;  border-bottom-width: 1px; border-left-width: 1px; }
.mark-br { bottom: 13px; right: 13px; border-bottom-width: 1px; border-right-width: 1px; }

.appearance {
  position: absolute;
  top: 16px;
  right: 40px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--ink-muted);
  border: 1px solid var(--ink-line);
}
.appearance:hover { color: var(--brass-soft); }
.in-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .in-dark  { display: block; }
  :root:not([data-theme="light"]) .in-light { display: none; }
}
:root[data-theme="dark"] .in-dark  { display: block; }
:root[data-theme="dark"] .in-light { display: none; }

/* A mounted print, not an avatar bubble. */
.portrait {
  width: 78px;
  height: 92px;
  margin: 4px auto 14px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, #232A38, #171C26);
  box-shadow:
    0 0 0 1px var(--ink-line),
    0 0 0 7px color-mix(in srgb, var(--brass) 12%, transparent),
    0 18px 40px -22px rgba(0, 0, 0, .9);
  display: grid;
  place-items: center;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.monogram {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.9rem;
  letter-spacing: .04em;
  color: var(--brass-soft);
}

.eyebrow, .plate-caption, .languages, .section-label, .role, .chips li, .tile span, .link-copy span, .scan-hint {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
}

.name {
  margin: 0;
  text-wrap: balance;
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 7.4vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -.005em;
}
.name em {
  font-style: italic;
  color: var(--brass);
}

.headline {
  margin: 10px auto 0;
  max-width: 30ch;
  font-size: .98rem;
  font-weight: 500;
  color: rgba(242, 243, 245, .78);
}

.languages {
  margin: 9px 0 0;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* The plate — the one thing this whole system exists for. */
.plate {
  display: block;
  width: 158px;
  margin: 18px auto 16px;
  padding: 9px 9px 7px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(199, 162, 83, .35), 0 14px 30px -18px rgba(0, 0, 0, .9);
  animation: stamp .7s .18s cubic-bezier(.2, .8, .3, 1) both;
  transition: transform .18s ease;
}
.plate:active { transform: scale(.97); }
.plate-code { display: block; }
.plate-code svg { display: block; width: 100%; height: auto; }
.plate-caption {
  display: block;
  margin-top: 6px;
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B7280;
}

/* Buttons ------------------------------------------------------------------ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 15px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  transition: transform .16s ease, filter .16s ease;
}
.btn:active { transform: scale(.985); }

.btn-primary {
  background: linear-gradient(180deg, var(--brass-soft), var(--brass));
  color: #1B1509;
  box-shadow: 0 12px 26px -16px rgba(199, 162, 83, .9);
}

.btn-ghost {
  margin-top: 10px;
  color: var(--ink-text);
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, .04);
}
.btn-ghost:hover { border-color: rgba(199, 162, 83, .45); }

.quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 58px;
  border-radius: 14px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, .045);
  color: var(--ink-text);
  transition: background .16s ease, border-color .16s ease;
}
.tile span {
  font-size: .56rem;
  letter-spacing: .06em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tile:active { background: rgba(255, 255, 255, .09); }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  color: var(--muted);
  transition: color .16s ease, border-color .16s ease;
}
.socials a:hover { color: var(--accent-text); border-color: var(--accent-text); }
.socials-front {
  justify-content: center;
  margin-top: 16px;
}
.socials-front a {
  border-color: var(--ink-line);
  color: var(--ink-muted);
}
.socials-front a:hover { color: var(--brass); border-color: rgba(199, 162, 83, .5); }

/* --------------------------------------------------------------------------
   Brand colours
   Each business carries two: the bright one from its logo or site, and the deep
   one. Gradients blend them. Text takes the deep one on paper and the bright one
   in the dark, so a brand stays itself without going unreadable.
   -------------------------------------------------------------------------- */

.venture, .brand-tile, .picker-item, .also-item, .front-business {
  --accent-2: var(--accent);
  --accent-text: var(--accent-2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .venture,
  :root:not([data-theme="light"]) .brand-tile,
  :root:not([data-theme="light"]) .also-item {
    --accent-text: var(--accent);
  }
}
:root[data-theme="dark"] .venture,
:root[data-theme="dark"] .brand-tile,
:root[data-theme="dark"] .also-item {
  --accent-text: var(--accent);
}

/* --------------------------------------------------------------------------
   Businesses
   -------------------------------------------------------------------------- */

.ventures { margin-top: 30px; }

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 2px 14px;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.venture {
  position: relative;
  margin-bottom: 14px;
  padding: 16px 16px 16px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.venture::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}

.venture-head {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
}

/* Logos render exactly as supplied: contained, never cropped or recoloured. */
.logo {
  display: grid;
  place-items: center;
  height: 68px;
  padding: 8px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
}
.logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.wordmark {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: .82rem;
  line-height: 1.2;
  text-align: center;
  color: #1A1E27;
}

.venture-id h3 {
  margin: 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 600;
  font-size: 1.24rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.role {
  margin: 6px 0 0;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.tagline {
  margin: 4px 0 0;
  font-size: .86rem;
  color: var(--muted);
}

.venture-desc {
  margin: 14px 0 0;
  font-size: .94rem;
  color: var(--text);
  opacity: .88;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.venture-actions { margin-top: 16px; }

.btn-venture {
  justify-content: space-between;
  min-height: 52px;
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent-text) 55%, transparent);
  background: transparent;
  font-size: .95rem;
}
.btn-venture:hover {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
  color: #FFFFFF;
}

.venture-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 13px;
  border: 1px solid var(--hairline);
  font-size: .84rem;
  font-weight: 500;
  color: var(--text);
  transition: border-color .16s ease, color .16s ease;
}
.pill:hover { border-color: var(--accent-text); color: var(--accent-text); }
.pill .icon { color: var(--muted); }
.pill:hover .icon { color: var(--accent-text); }

.venture-actions .socials { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot {
  margin-top: 26px;
  text-align: center;
}
.link-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  color: var(--muted);
}
.link-copy span {
  font-size: .74rem;
  letter-spacing: .04em;
}
.link-copy:hover { color: var(--brass); border-color: var(--brass); }
.foot p {
  margin: 12px auto 0;
  max-width: 28ch;
  font-size: .78rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Full-screen scan sheet — always white, for the most reliable scan
   -------------------------------------------------------------------------- */

.scan {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #FFFFFF;
  animation: fade .2s ease both;
}
.scan[hidden] { display: none; }
.scan-inner { text-align: center; width: 100%; max-width: 420px; }
.scan-name {
  margin: 0 0 18px;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.3rem;
  color: #0B0D11;
}
.scan-code {
  width: min(78vw, 340px);
  margin: 0 auto;
}
.scan-code svg { display: block; width: 100%; height: auto; }
.scan-hint {
  margin: 18px 0 0;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6B7280;
}
.scan-tools {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.scan-tools a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(16, 20, 28, .18);
  color: #12151B;
  font-size: .84rem;
}
.scan-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #12151B;
  border: 1px solid rgba(16, 20, 28, .14);
}
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 60;
  transform: translate(-50%, 20px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #F2F3F5;
  font-size: .84rem;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes stamp {
  0%   { opacity: 0; transform: scale(1.07); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (min-width: 520px) {
  .sheet { padding-top: 32px; }
}

/* --------------------------------------------------------------------------
   Picker — choosing which business to hand over
   -------------------------------------------------------------------------- */

.picker .scan-inner { max-width: 380px; }
.picker-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.picker-item {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(16, 20, 28, .14);
  background: #FFFFFF;
  color: #12151B;
  text-align: left;
  transition: border-color .16s ease, transform .16s ease;
}
.picker-item:active { transform: scale(.99); }
.picker-item:hover { border-color: var(--accent); }
.picker-logo {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid rgba(16, 20, 28, .08);
}
.picker-logo img { max-height: 40px; max-width: 82%; object-fit: contain; object-position: left center; }
.picker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.picker-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.picker-logo .wordmark { font-size: .66rem; }
.picker-text strong { display: block; font-size: .98rem; }
.picker-text small { display: block; margin-top: 2px; font-size: .76rem; color: #6B7280; }
.picker-item .icon { color: var(--accent-2); }
.picker-all { border-style: dashed; }

.scan-back {
  display: block;
  margin: 16px auto 0;
  padding: 8px 14px;
  font-size: .8rem;
  color: #6B7280;
}
.scan-tools button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(16, 20, 28, .18);
  color: #12151B;
  font-size: .84rem;
}

.pill-own { border-style: dashed; }

/* --------------------------------------------------------------------------
   Single-business card front
   -------------------------------------------------------------------------- */

.business-lockup {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 244px;
  height: 78px;
  margin: 2px auto 14px;
  padding: 10px 14px;
  overflow: hidden;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
/* The supplied file, contained — never cropped, never spilling past its plate. */
.business-lockup img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.name-business { font-size: clamp(1.45rem, 6vw, 1.85rem); }
.eyebrow-under { margin: 10px 0 0; color: var(--brass); }

.person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 14px auto 0;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, .04);
  text-align: left;
}
.person-portrait {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, #232A38, #171C26);
}
.person-portrait img { width: 100%; height: 100%; object-fit: cover; }
.monogram-sm { font-size: 1rem; }
.person-text strong { display: block; font-size: .9rem; font-weight: 600; }
.person-text .role { margin: 0; font-size: .58rem; color: var(--brass); }

.also { margin-top: 26px; }
.also-row { display: flex; flex-wrap: wrap; gap: 8px; }
.also-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 13px;
  border: 1px solid var(--hairline);
  font-size: .88rem;
  font-weight: 500;
}
.also-item:hover { border-color: var(--accent-text); color: var(--accent-text); }
.also-item .icon { color: var(--muted); }
.also-note { margin: 12px 0 0; font-size: .82rem; }
.also-note a { color: var(--muted); }
.also-note a:hover { color: var(--brass); }


/* --------------------------------------------------------------------------
   Supplied logos
   A white plate sits under every mark so a transparent logo stays legible in
   dark mode. The file itself is never scaled up, cropped or recoloured.
   -------------------------------------------------------------------------- */

.venture-banner {
  display: flex;
  align-items: center;
  min-height: 54px;
  margin: -4px 0 14px;
  padding: 8px 12px;
  overflow: hidden;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
}
.venture-banner img {
  max-height: 36px;
  height: auto;
  width: auto;
  max-width: 88%;
  object-fit: contain;
  object-position: left center;
}
.venture-branded .venture-head { display: block; }
.venture-branded .venture-id h3 { margin-bottom: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Trade marks
   One hairline drawing per business, taken from its own work: a focus frame,
   connected nodes, moving air. Same slot every time, so the structure stays
   simple and only the content of the mark changes.
   -------------------------------------------------------------------------- */

.motif-mark {
  display: block;
  margin: 0 0 8px;
  color: var(--accent-text);
  line-height: 0;
}
.motif-mark .motif { display: block; }

.motif-inline {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
  color: var(--accent);
  line-height: 0;
}

/* The same drawing, large and faint, behind the lockup on a business's own card. */
.motif-wash {
  position: absolute;
  top: 26px;
  left: -34px;
  color: var(--accent);
  opacity: .14;
  line-height: 0;
  pointer-events: none;
}

.picker-text .motif-mark { margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   Contact details, read straight off the card
   -------------------------------------------------------------------------- */

.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px 16px;
  margin: 16px 0 0;
  padding: 13px 15px;
  border-radius: 16px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, .035);
  text-align: left;
}
.details div { display: grid; gap: 2px; }
.details dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}
.details dd {
  margin: 0;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-text);
  overflow-wrap: anywhere;
}
.details dd a { text-decoration: none; }
.details dd a:hover { color: var(--brass-soft); }

/* --------------------------------------------------------------------------
   Wallet passes
   -------------------------------------------------------------------------- */

.wallets {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.wallet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 15px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, .04);
  color: var(--ink-text);
  font-weight: 600;
  font-size: .94rem;
}
.wallet:hover { border-color: rgba(199, 162, 83, .45); }
.wallet .icon { color: var(--brass); }
@media (min-width: 400px) {
  .wallets { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .wallet { font-size: .84rem; padding: 0 12px; }
}


/* --------------------------------------------------------------------------
   Business chooser
   The front page is a personal card and a doorway. Each business lives on its
   own page, so nothing here competes with the name at the top.
   -------------------------------------------------------------------------- */

.chooser { margin-top: 24px; }

/* Each tile wears its own brand: the logo on white, the company's two colours
   washing the card, its colour on the border. Short enough that all three fit
   the screen together. */
.brand-tile {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr 28px;
  align-items: center;
  gap: 13px;
  margin-bottom: 10px;
  padding: 12px 12px 12px 15px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--hairline));
  background:
    linear-gradient(112deg,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%,
      color-mix(in srgb, var(--accent-2) 13%, transparent) 55%,
      transparent 88%),
    var(--surface);
  box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--accent-2) 70%, rgba(9, 12, 18, .7));
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease;
}
.brand-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 38px -24px color-mix(in srgb, var(--accent-2) 80%, rgba(9, 12, 18, .7));
}
.brand-tile:active { transform: scale(.99); }

.brand-rule {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}

.brand-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 6px 8px;
  border-radius: 11px;
  background: #FFFFFF;
  box-shadow: 0 2px 10px -4px rgba(9, 12, 18, .35);
}
.brand-plate img {
  max-height: 38px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.brand-plate .wordmark { font-size: .66rem; }

.brand-body { min-width: 0; }
.brand-body .motif-mark { margin-bottom: 5px; }
.brand-body .motif-mark svg { width: 34px; height: 12px; }
.brand-body strong {
  display: block;
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 600;
  font-size: 1.04rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.brand-body small {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--muted);
}
.brand-role { display: none; }

.brand-go {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-text);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.brand-tile:hover .brand-go {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
  color: #FFFFFF;
}

@media (max-width: 340px) {
  .brand-tile { grid-template-columns: 76px 1fr; }
  .brand-go { display: none; }
}

/* --------------------------------------------------------------------------
   Supplied logos
   A white plate sits under every mark so a transparent logo stays legible in
   dark mode. The file itself is never scaled up, cropped or recoloured.
   -------------------------------------------------------------------------- */

.venture-banner {
  display: flex;
  align-items: center;
  min-height: 54px;
  margin: -4px 0 14px;
  padding: 8px 12px;
  overflow: hidden;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
}
.venture-banner img {
  max-height: 36px;
  height: auto;
  width: auto;
  max-width: 88%;
  object-fit: contain;
  object-position: left center;
}
.venture-branded .venture-head { display: block; }
.venture-branded .venture-id h3 { margin-bottom: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Trade marks
   One hairline drawing per business, taken from its own work: a focus frame,
   connected nodes, moving air. Same slot every time, so the structure stays
   simple and only the content of the mark changes.
   -------------------------------------------------------------------------- */

.motif-mark {
  display: block;
  margin: 0 0 8px;
  color: var(--accent-text);
  line-height: 0;
}
.motif-mark .motif { display: block; }

.motif-inline {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
  color: var(--accent);
  line-height: 0;
}

/* The same drawing, large and faint, behind the lockup on a business's own card. */
.motif-wash {
  position: absolute;
  top: 26px;
  left: -34px;
  color: var(--accent);
  opacity: .14;
  line-height: 0;
  pointer-events: none;
}

.picker-text .motif-mark { margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   Contact details, read straight off the card
   -------------------------------------------------------------------------- */

.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px 16px;
  margin: 16px 0 0;
  padding: 13px 15px;
  border-radius: 16px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, .035);
  text-align: left;
}
.details div { display: grid; gap: 2px; }
.details dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}
.details dd {
  margin: 0;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-text);
  overflow-wrap: anywhere;
}
.details dd a { text-decoration: none; }
.details dd a:hover { color: var(--brass-soft); }

/* --------------------------------------------------------------------------
   Wallet passes
   -------------------------------------------------------------------------- */

.wallets {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.wallet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 15px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, .04);
  color: var(--ink-text);
  font-weight: 600;
  font-size: .94rem;
}
.wallet:hover { border-color: rgba(199, 162, 83, .45); }
.wallet .icon { color: var(--brass); }
@media (min-width: 400px) {
  .wallets { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .wallet { font-size: .84rem; padding: 0 12px; }
}


/* --------------------------------------------------------------------------
   Business chooser
   The front page is a personal card and a doorway. Each business lives on its
   own page, so nothing here competes with the name at the top.
   -------------------------------------------------------------------------- */

.chooser { margin-top: 32px; }

.brand-tile {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr 34px;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 18px 16px 18px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), border-color .18s ease, box-shadow .18s ease;
}
.brand-tile {
  background:
    linear-gradient(115deg,
      color-mix(in srgb, var(--accent) 9%, transparent) 0%,
      color-mix(in srgb, var(--accent-2) 5%, transparent) 42%,
      transparent 72%),
    var(--surface);
}
.brand-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 26px 48px -30px color-mix(in srgb, var(--accent-2) 60%, rgba(9, 12, 18, .6));
}
.brand-tile:active { transform: scale(.99); }

/* A ruled edge in the business's own colour, like ink on the edge of a card. */
.brand-rule {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}

.brand-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(16, 20, 28, .08);
}
.brand-plate img { max-height: 46px; max-width: 100%; object-fit: contain; }
.brand-plate .wordmark { font-size: .74rem; }

.brand-body { min-width: 0; }
.brand-body .motif-mark { margin-bottom: 7px; }
.brand-body strong {
  display: block;
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.brand-body small {
  display: block;
  margin-top: 3px;
  font-size: .84rem;
  color: var(--muted);
}
.brand-role {
  display: block;
  margin-top: 7px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.brand-go {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--accent-text);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.brand-tile:hover .brand-go {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
  color: #FFFFFF;
}

@media (max-width: 359px) {
  .brand-tile { grid-template-columns: 84px 1fr; }
  .brand-go { display: none; }
}

/* --------------------------------------------------------------------------
   A business's own page: its colour sets the temperature of the header
   -------------------------------------------------------------------------- */

.front-business {
  background:
    radial-gradient(70% 45% at 22% 0%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 70%),
    radial-gradient(70% 45% at 82% 6%, color-mix(in srgb, var(--accent-2) 34%, transparent) 0%, transparent 72%),
    radial-gradient(120% 80% at 50% -10%, #1B2130 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 62%);
}
.front-business .business-lockup {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .12),
    0 20px 44px -26px color-mix(in srgb, var(--accent) 70%, rgba(0, 0, 0, .9));
}
.front-business .name-business { text-wrap: balance; }

/* The back-to-everything link deserves to be findable, not hidden at the end. */
.back-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, .04);
  color: var(--ink-muted);
  font-size: .78rem;
}
.back-home:hover { color: var(--brass); border-color: rgba(199, 162, 83, .45); }
.back-home .icon { transform: rotate(180deg); }