/* Original Acquit geometry. Provenance and measured proportions: README.brand.md. */
@font-face {
  font-family: "Acquit Wordmark";
  src: url("assets/fonts/poppins-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
:root {
  --logo-coral: #ef5b75;
  --logo-turquoise: #00a7a0;
  --logo-blue: #2778b9;
  --coral-contour: 50% 50% 0 0 / 46% 46% 0 0;
  --turquoise-contour: 0 56% 0 56% / 0 49% 0 49%;
  --blue-contour: 0 63% 0 0 / 0 41% 0 0;
}
.wordmark.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  font-family: "Acquit Wordmark", sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.2px;
}
.brand-lockup img { width: 28px; height: auto; flex: none; }
.wordmark .brand-name { color: var(--ink); }
.wordmark .brand-dot { color: var(--logo-coral); }

/* Original cryptocurrency artwork, with readable labels at every breakpoint. */
.settled-assets {
  padding: 34px 7%;
  background: #fff;
  border-block: 1px solid var(--rule);
}
.settled-assets-inner {
  max-width: 1340px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}
.settled-assets .eyebrow { color: var(--muted); white-space: nowrap; }
.asset-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.asset-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.4;
}
.asset-list img { display: block; width: 32px; height: 32px; object-fit: contain; flex: none; }
@media (max-width: 1040px) {
  .settled-assets-inner { grid-template-columns: 1fr; gap: 22px; }
  .settled-assets .eyebrow { text-align: center; }
}
@media (max-width: 800px) {
  .settled-assets { padding: 28px 6%; }
  .asset-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .asset-list li { gap: 8px; font-size: 16px; }
  .asset-list img { width: 28px; height: 28px; }
}

/* Only the three filled, upright contours from the source mark. */
.brand-piece {
  border: 0;
  height: auto;
  transform: none;
  mask-image: none;
  box-shadow: none;
  background: var(--piece-color);
  border-radius: var(--piece-contour);
  aspect-ratio: var(--piece-ratio);
}
.brand-coral {
  --piece-color: var(--logo-coral);
  --piece-contour: var(--coral-contour);
  --piece-ratio: 119 / 130;
}
.brand-turquoise {
  --piece-color: var(--logo-turquoise);
  --piece-contour: var(--turquoise-contour);
  --piece-ratio: 141 / 162;
}
.brand-blue {
  --piece-color: var(--logo-blue);
  --piece-contour: var(--blue-contour);
  --piece-ratio: 105 / 163;
}

/* Large brand silhouettes frame the approved central headline. */
.hero { --hero-unit: clamp(.96px, .122vw, 1.88px); }
.hero-art-left,
.hero-art-right {
  top: 150px;
  width: calc(141 * var(--hero-unit));
  height: calc(317 * var(--hero-unit));
  transform: none;
}
.hero-art-left { left: max(24px, calc(50% - 640px)); }
.hero-art-right { right: max(24px, calc(50% - 640px)); }
.sculpture-coral { left: 0; right: auto; top: 0; width: calc(119 * var(--hero-unit)); }
.sculpture-teal { left: 0; right: auto; top: calc(155 * var(--hero-unit)); width: 100%; }
.sculpture-blue { left: 0; top: auto; bottom: 0; width: 100%; }

/* Service compositions use the same contours at a constant aspect ratio. */
.trade-composition {
  position: absolute;
  width: min(78%, 380px);
  aspect-ratio: 19 / 17;
  left: 50%;
  top: calc(50% - 24px);
  transform: translate(-50%, -50%);
}
.trade-ring-back { width: 50%; top: 0; left: 0; bottom: auto; right: auto; }
.trade-ring-front { width: 60%; top: 25%; left: 40%; right: auto; bottom: auto; }
.flow-left { width: 43%; left: 9%; right: auto; top: 18%; bottom: auto; }
.flow-right { width: 32%; left: auto; right: 10%; top: auto; bottom: 20%; }

/* The assembled emblem follows the original piece positions and proportions. */
.brand-emblem {
  position: absolute;
  width: min(64%, 260px);
  aspect-ratio: 284 / 331;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.service-art .brand-emblem { top: calc(50% - 22px); }
.brand-emblem .brand-piece { position: absolute; right: auto; bottom: auto; }
.brand-emblem .brand-coral { left: 1.76%; top: .91%; width: 41.9%; }
.brand-emblem .brand-turquoise { left: 1.76%; top: 48.64%; width: 49.65%; }
.brand-emblem .brand-blue { left: 60.56%; top: 48.34%; width: 36.97%; }
.mini-shape.brand-piece { height: 32px; width: auto; }
.closing::before { height: 683px; border-radius: var(--blue-contour); }

@media (max-width: 1150px) {
  .hero-art-left { left: 20px; }
  .hero-art-right { right: 20px; }
}
@media (max-width: 800px) {
  .wordmark.brand-lockup { font-size: 29px; gap: 9px; }
  .brand-lockup img { width: 24px; }
  /* Keep the artwork in flow below the copy, including when text wraps. */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    height: auto;
    max-height: none;
    min-height: 900px;
    padding-bottom: 128px;
    column-gap: 24px;
    row-gap: 40px;
    --hero-unit: 1px;
  }
  .hero-content { grid-column: 1 / -1; grid-row: 1; }
  .hero-art-left, .hero-art-right {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: 300px;
    grid-row: 2;
    width: 200px;
  }
  .hero-art-left { grid-column: 1; justify-self: end; }
  .hero-art-right { grid-column: 2; justify-self: start; }
  .sculpture-coral { width: 119px; top: 0; left: 0; }
  .sculpture-teal { width: 120px; top: auto; bottom: 0; left: 72px; }
  .sculpture-blue { width: 155px; top: auto; bottom: 0; left: 22px; }
}
@media (max-width: 960px) {
  .service-art .brand-emblem { width: min(64%, 175px); }
  .trade-composition { width: min(80%, 230px); top: calc(50% - 23px); }
  .trade-ring-back, .trade-ring-front { max-width: none; }
  .flow-left { width: 34%; max-width: 160px; left: calc(50% - min(36%, 150px)); top: 12%; }
  .flow-right { width: 25%; max-width: 120px; right: calc(50% - min(36%, 150px)); bottom: 22%; }
  .company-art .brand-emblem { width: min(60%, 225px); }
}
@media (max-width: 560px) {
  .hero { min-height: 820px; padding-bottom: 82px; column-gap: 14px; row-gap: 36px; }
  .hero-art-left, .hero-art-right { width: 145px; height: 230px; }
  .sculpture-coral { width: 91px; }
  .sculpture-teal { width: 101px; left: 35px; }
  .sculpture-blue { width: 116px; left: 5px; }
  .closing::before { height: 450px; }
}
@media (max-width: 430px) {
  .site-header .button-small > span { display: none; }
  .site-header .button-small { padding: 0 10px; }
  .header-actions { gap: 6px; }
}
@media (max-width: 375px) {
  .site-header { padding-left: 14px; padding-right: 14px; }
  .site-header .button-small { padding: 0 7px; letter-spacing: -.02em; }
  .header-actions { gap: 2px; }
  .site-header .wordmark.brand-lockup { font-size: 23px; letter-spacing: -1px; gap: 6px; }
  .site-header .brand-lockup img { width: 20px; }
  .hero { column-gap: 10px; }
  .hero-art-left, .hero-art-right { width: 132px; }
  .sculpture-teal { left: 28px; }
}