/* The client's black and metallic card, with selectable text and direct contact links. */
.contact.contact-business { padding-top: 100px; }
.contact-business .contact-business-grid {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}
.contact-business .contact-business-intro > p { margin-top: 24px; }
.contact-business .contact-save {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 48px;
  margin-top: 28px;
  padding-block: 9px;
  border-bottom: 1px solid #90713c;
  color: #49391e;
  font-size: 15px;
  text-decoration: none;
  text-underline-offset: 5px;
}
.contact-business .contact-save:hover { color: #24201b; text-decoration: underline; }
.contact-business .contact-save:focus-visible { outline: 2px solid #745723; outline-offset: 5px; }
.contact-business .contact-save svg { flex: 0 0 auto; }
.business-card-frame {
  container-type: inline-size;
  justify-self: center;
  width: 100%;
  max-width: 660px;
  min-width: 0;
}
.business-card {
  --card-ink: #191a1b;
  --card-gold: #e8ca8d;
  --card-gold-light: #fff0bd;
  --card-gold-shade: #ba9556;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 85 / 55;
  min-height: 0;
  padding: 2.8cqw 4cqw;
  background: linear-gradient(125deg, #30312f 0%, #222321 28%, var(--card-ink) 62%, #222321 100%);
  color: var(--card-gold);
  text-align: center;
  box-shadow: 0 3px 2px -1px #92713a, 0 7px 5px -3px #27251f, 0 28px 36px -21px #503b2773;
}
.business-card::before {
  content: "";
  position: absolute;
  inset: clamp(5px, 1.4cqw, 9px);
  border: 1px solid #be9a58;
  pointer-events: none;
}
.business-card::after {
  content: "";
  position: absolute;
  inset: clamp(5px, 1.4cqw, 9px);
  background:
    linear-gradient(100deg, transparent, #fff0bd, transparent) top / 100% 1px no-repeat,
    linear-gradient(100deg, transparent, #8b6931, #e8ca8d) bottom / 100% 1px no-repeat;
  pointer-events: none;
}
.business-card-monogram {
  display: block;
  width: min(22cqw, 146px);
  height: auto;
  margin-bottom: 1.2cqw;
  filter: drop-shadow(0 3px 1.5px #080909b3);
}
.business-card-identity { max-width: 100%; }
.business-card h3 {
  max-width: 100%;
  margin: 0;
  font: 600 clamp(14px, 5.2cqw, 32px)/1.13 "Hanken Grotesk", sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--card-gold);
  text-shadow: 0 2px 1.5px #070808;
}
.business-card .business-card-aviation {
  margin: .6cqw 0 0;
  color: var(--card-gold);
  font-size: clamp(11px, 4cqw, 23px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 2px 1.5px #070808;
}
.business-card .business-card-pillars {
  margin: .3cqw 0 0;
  color: var(--card-gold);
  font-size: clamp(8px, 2.4cqw, 12px);
  line-height: 1.25;
  letter-spacing: .22em;
  text-transform: uppercase;
}
/* Gold foil is the supplied material brief, rather than a color treatment for emphasis. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .business-card h3,
  .business-card .business-card-aviation {
    background: linear-gradient(175deg, var(--card-gold-light) 12%, var(--card-gold) 45%, #c7a366 61%, #f3dda8 83%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 1.5px 1px #080909);
  }
}
.business-card-details {
  display: grid;
  justify-items: center;
  max-width: 100%;
  margin-top: 1.2cqw;
  font: normal clamp(11px, 3.3cqw, 16px)/1.3 "Hanken Grotesk", sans-serif;
  letter-spacing: .015em;
  font-variant-numeric: tabular-nums;
}
.business-card-details a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  max-width: 100%;
  padding: .3cqw 8px;
  color: #f2dbaf;
  text-decoration: none;
  text-underline-offset: 5px;
}
.business-card-details a:hover { color: #fff5de; text-decoration: underline; }
.business-card a:focus-visible { outline: 2px solid #f1dbaf; outline-offset: 3px; }
.business-card ::selection { background: var(--card-gold); color: var(--card-ink); }
.business-card-actions { display: none; }
@media (max-width: 1000px) and (min-width: 801px) {
  .contact-business .contact-grid h2 { font-size: 46px; }
}
@media (max-width: 800px) {
  .contact.contact-business { padding-top: 60px; }
  .contact-business .contact-business-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .contact-business .contact-grid h2 { font-size: clamp(40px, 7vw, 54px); line-height: 1.08; }
  .contact-business .contact-business-intro > p { margin-top: 20px; font-size: 16px; }
  .contact-business .contact-save { margin-top: 16px; }
  .business-card-frame { max-width: 620px; }
  /* Card typography scales like print. Large touch actions sit outside it. */
  .business-card-actions { display: flex; gap: 12px; margin-top: 18px; }
  .business-card-actions a {
    display: flex; align-items: center; justify-content: center;
    flex: 1; min-height: 48px; padding: 10px 12px;
    border: 1px solid #90713c; color: #49391e;
    font-size: 15px; line-height: 1.4; text-decoration: none;
  }
  .business-card-actions a:hover { background: #f4e3ba; }
}
@media (forced-colors: active) {
  .business-card { border: 1px solid CanvasText; }
  .business-card h3,
  .business-card .business-card-aviation { background: none; color: CanvasText; filter: none; }
}