/* Fume contact card: the approved palette, Light board L2 and Focus System v1.3. */
body { margin: 0; background: var(--ui-ground-warm); color: var(--ui-text); font-family: var(--ui-type-family); }
body.qr-open { overflow: hidden; }
.card-page { min-height: 100svh; display: grid; place-items: center; padding: var(--ui-space-2xl); box-sizing: border-box; }
.business-card, .card-shell { width: min(100%, 820px); background: var(--ui-ground); border-radius: var(--ui-radius-card); box-shadow: var(--ui-depth-raised); overflow: hidden; }
.card-banner { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-height: 240px; padding: var(--ui-space-2xl); box-sizing: border-box; overflow: hidden; background: var(--ui-web-light-ground); }
.card-banner-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.card-banner-light svg { display: block; width: 100%; height: 100%; }
.fume-light-ground-paper { fill: var(--ui-web-light-ground); }
.fume-light-ground-cream { fill: var(--ui-web-light-ground-cream); }
.fume-light-soft { fill: var(--ui-web-light-soft); }
.fume-light-warm { fill: var(--ui-web-light-warm); }
.fume-light-amber { fill: var(--ui-web-light-core); }
.fume-light-core { stroke: var(--ui-web-light-core); }
.brand-logo { display: block; width: 150px; max-width: 45%; height: auto; }
.banner-line { margin: var(--ui-space-xl) 0 0; color: var(--ui-web-title-on-warm); font-family: var(--ui-type-display-family); font-size: var(--ui-type-display); font-weight: var(--ui-type-weight-regular); line-height: 1.04; text-wrap: balance; } /* gate-allow:canon-not-in-ui: Fume's marketing signature line */
.card-content { display: grid; grid-template-columns: minmax(0, 1fr) 264px; grid-template-areas: "identity qr" "contact qr"; column-gap: var(--ui-space-2xl); row-gap: var(--ui-space-xl); padding: var(--ui-space-2xl); }
.identity { grid-area: identity; min-width: 0; }
.section-label { margin: 0 0 var(--ui-space-sm); color: var(--ui-text-tertiary); font-size: var(--ui-type-label); font-weight: var(--ui-type-weight-medium); letter-spacing: .12em; }
h1, h2 { margin: 0; font-family: var(--ui-type-display-family); font-weight: var(--ui-type-weight-regular); line-height: 1.04; } /* gate-allow:canon-not-in-ui: marketing card headings */
h1 { font-size: var(--ui-type-display); overflow-wrap: anywhere; }
h2 { font-size: var(--ui-type-display-small); }
.role { margin: var(--ui-space-md) 0 0; color: var(--ui-text); font-size: var(--ui-type-body-large); font-weight: var(--ui-type-weight-medium); }
.focus { margin: var(--ui-space-sm) 0 0; max-width: 36ch; color: var(--ui-text-secondary); font-size: var(--ui-type-body); line-height: 1.5; }
.contact-panel { grid-area: contact; align-self: end; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-sm); }
.share-status { min-height: 1.25em; margin: var(--ui-space-sm) 0 0; color: var(--ui-text-tertiary); font-size: var(--ui-type-control); }
.share-status:empty { display: none; }
.qr-section { grid-area: qr; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--ui-space-lg); background: var(--ui-ground-warm); border-radius: var(--ui-radius-card); text-align: center; }
.qr-section .section-label { margin-bottom: var(--ui-space-sm); }
.qr-trigger { display: block; border: 0; padding: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qr-focus { position: relative; display: grid; place-items: center; width: 220px; height: 220px; max-width: 100%; aspect-ratio: 1; }
.qr-focus img { display: block; width: 70%; height: 70%; object-fit: contain; image-rendering: pixelated; }
.qr-focus-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.qr-focus .fume-focus-paper { fill: var(--ui-text); }
.qr-caption { margin: var(--ui-space-sm) 0 0; color: var(--ui-text-tertiary); font-size: var(--ui-type-control); }
.qr-trigger:focus-visible, .qr-close:focus-visible, .linkedin-icon:focus-visible, .company-link:focus-visible, .contact-link:focus-visible { outline: var(--ui-size-ring) solid var(--ui-focus-ring); outline-offset: var(--ui-size-ring-offset); }
.qr-trigger:active .qr-focus { transform: scale(var(--ui-motion-press-scale)); }
.contact-details { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-space-xs); margin-top: var(--ui-space-xl); font-style: normal; }
.contact-link { display: inline-flex; align-items: center; gap: var(--ui-space-md); min-height: var(--ui-size-hit); color: var(--ui-text-secondary); font-size: var(--ui-type-body-large); font-weight: var(--ui-type-weight-medium); text-decoration: none; overflow-wrap: anywhere; }
.contact-icon { display: block; flex: none; width: var(--ui-size-icon); height: var(--ui-size-icon); }
.social-links { display: flex; align-items: center; gap: var(--ui-space-lg); min-height: var(--ui-size-hit); }
.linkedin-icon { display: flex; align-items: center; justify-content: flex-start; width: var(--ui-size-hit); height: var(--ui-size-hit); color: var(--ui-web-title-on-warm); border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.linkedin-icon:active { transform: scale(var(--ui-motion-press-scale)); }
.company-link { display: inline-flex; align-items: center; gap: var(--ui-space-sm); min-height: var(--ui-size-hit); color: var(--ui-text-secondary); font-size: var(--ui-type-body); font-weight: var(--ui-type-weight-medium); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.company-link:active { transform: scale(var(--ui-motion-press-scale)); }
.qr-dialog { width: min(calc(100vw - 24px), 458px); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: var(--ui-radius-card); overflow: auto; background: var(--ui-ground); color: var(--ui-text); box-shadow: var(--ui-depth-raised); }
.qr-dialog::backdrop { background: var(--ui-glass-scrim); backdrop-filter: var(--ui-glass-filter); }
.qr-dialog-inner { padding: var(--ui-inset-panel); text-align: center; }
.qr-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--ui-space-lg); }
.qr-dialog-head img { width: 120px; height: auto; }
.qr-close { width: var(--ui-size-hit); height: var(--ui-size-hit); border: 0; border-radius: 50%; background: var(--ui-ground-warm); color: var(--ui-text); font-size: var(--ui-type-title-large); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qr-close:active { transform: scale(var(--ui-motion-press-scale)); }
.qr-dialog .section-label { margin-bottom: var(--ui-space-sm); }
.qr-dialog-copy { max-width: 28ch; margin: var(--ui-space-md) auto var(--ui-space-xl); color: var(--ui-text-secondary); font-size: var(--ui-type-body); line-height: 1.5; }
.qr-dialog-code { display: grid; place-items: center; }
.qr-dialog-code .qr-focus { width: min(72vw, 320px); height: auto; }
.qr-dialog-url { margin: var(--ui-space-lg) 0; color: var(--ui-text-tertiary); font-size: var(--ui-type-control); overflow-wrap: anywhere; }
.qr-dialog .share-status { margin-bottom: 0; }
.notice, .foot { color: var(--ui-text-tertiary); }
.foot { margin: var(--ui-space-lg) 0 0; }
.foot a { color: var(--ui-text); }
.card-shell { max-width: 520px; padding: var(--ui-space-2xl); box-sizing: border-box; }
.card-shell .eyebrow { margin: var(--ui-space-2xl) 0 var(--ui-space-sm); font-size: var(--ui-type-label); letter-spacing: .12em; }
.card-shell .role { margin-bottom: var(--ui-space-2xl); }
.team-links { display: grid; gap: var(--ui-space-sm); }
.team-link { display: flex; justify-content: space-between; gap: var(--ui-space-lg); align-items: baseline; color: var(--ui-text); text-decoration: none; padding: var(--ui-space-md) 0; }
.team-link strong { font-weight: var(--ui-type-weight-medium); }
.team-link span { color: var(--ui-text-secondary); }
@media (hover: hover) {
  .qr-trigger:hover .qr-focus { transform: translateY(-2px); }
  .contact-link:hover { color: var(--ui-web-title-on-warm); }
  .linkedin-icon:hover { background: var(--ui-ground-warm); }
  .company-link:hover { color: var(--ui-web-title-on-warm); }
  .team-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 680px) {
  .card-content { grid-template-columns: 1fr; grid-template-areas: "identity" "qr" "contact"; }
  .qr-section { padding: var(--ui-space-lg); }
}
@media (max-width: 480px) {
  .card-page { display: block; height: 100svh; min-height: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overflow: auto; }
  .business-card { display: flex; flex-direction: column; height: 100%; min-height: 0; border-radius: 0; }
  .card-shell { min-height: 100svh; border-radius: 0; }
  .card-banner { flex: none; min-height: 128px; padding: var(--ui-space-md) var(--ui-space-lg); }
  .brand-logo { width: 112px; }
  .banner-line { margin-top: var(--ui-space-sm); font-size: var(--ui-type-title); line-height: 1; }
  .card-content { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-between; min-height: 0; padding: var(--ui-space-md) var(--ui-space-lg); gap: var(--ui-space-sm); }
  .section-label { margin-bottom: var(--ui-space-xs); }
  h1 { font-size: var(--ui-type-display-small); }
  .role { margin-top: var(--ui-space-xs); font-size: var(--ui-type-body); }
  .focus { margin-top: var(--ui-space-xs); max-width: none; font-size: var(--ui-type-control); line-height: 1.25; }
  .contact-details { gap: 0; margin-top: var(--ui-space-sm); }
  .contact-link { min-height: var(--ui-size-hit); font-size: var(--ui-type-body); }
  .qr-section { flex: none; min-height: 0; padding: var(--ui-space-sm); }
  .qr-section .section-label { margin-bottom: var(--ui-space-xs); }
  .qr-focus { width: clamp(160px, 27svh, 230px); height: auto; }
  .qr-caption { margin-top: var(--ui-space-xs); font-size: var(--ui-type-label); }
  .contact-panel { flex: none; }
  .actions .ui-btn { flex: 1 1 auto; }
  .card-shell { padding: var(--ui-space-lg); }
  .team-link { flex-direction: column; gap: var(--ui-space-sm); }
}
@media (max-width: 480px) and (max-height: 700px) {
  .card-banner { min-height: 112px; }
  .card-content { padding-block: var(--ui-space-sm); gap: var(--ui-space-xs); }
  .qr-focus { width: 160px; }
  .qr-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qr-trigger:active .qr-focus, .linkedin-icon:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .qr-trigger:hover .qr-focus { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .qr-dialog::backdrop { backdrop-filter: none; background: var(--ui-glass-bg-solid); }
}