/* ==========================================================================
   Born Digital Solutions — digital business card
   Mobile-first. No frameworks, no external fonts, no runtime JavaScript.
   ========================================================================== */

:root {
  --black: #06070b;
  --orange: #ff6d01;
  --orange-dark: #e45e00;
  --white: #ffffff;

  /* Text on the dark card. Brand orange reaches 6.5:1 here, so no adjusted
     tone is needed — unlike on white, where it falls under the AA floor. */
  --text: rgba(255, 255, 255, 0.94);
  --text-mid: rgba(255, 255, 255, 0.76);
  --text-soft: rgba(255, 255, 255, 0.6);
  --hairline: rgba(255, 255, 255, 0.16);
  --panel: rgba(255, 255, 255, 0.05);

  --radius: 10px;
  --radius-sm: 5px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--black);
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: var(--black);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(255, 109, 1, 0.22);
}

::selection {
  background: var(--orange);
  color: var(--black);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- The card ----------------------------------------------------------- */

.card {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 460px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--black);
}

/* The photograph occupies a band rather than the full card. The crop is nearly
   square, so covering a narrow, tall phone screen would throw away half the
   animal. The mask fades the band's own top and bottom edges, which keeps the
   blend into black independent of the card's height or the scrim above it. */
.card__photo {
  position: absolute;
  left: 0;
  right: 0;
  top: 17%;
  height: 58%;
  z-index: -2;
  background-image: url('img/platypus.jpg');
  background-repeat: no-repeat;
  background-size: auto var(--photo-zoom, 130%);
  background-position: var(--photo-focus, 50% 50%);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 17%,
    #000 82%,
    transparent 100%
  );
  mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 82%, transparent 100%);
}

/* Dark at the top so the wordmark reads, clearer through the middle where the
   animal is, then solid for the buttons and the acknowledgement. */
.card__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(6, 7, 11, 0.9) 0%,
    rgba(6, 7, 11, 0.82) 16%,
    rgba(6, 7, 11, 0.55) 27%,
    rgba(6, 7, 11, 0.05) 38%,
    rgba(6, 7, 11, 0.08) 58%,
    rgba(6, 7, 11, 0.8) 70%,
    var(--black) 80%
  );
}

.card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 22px 22px;
}

/* --- Brand block -------------------------------------------------------- */

.brand {
  text-align: center;
}

.accent {
  color: var(--orange);
}

.lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.lockup__mark {
  margin: 0;
  font-size: clamp(34px, 10.4vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
}

.lockup__rule {
  align-self: stretch;
  width: 1px;
  min-height: 46px;
  background: var(--orange);
}

.lockup__logo {
  display: block;
  height: 42px;
  width: auto;
}

.brand__name {
  margin: 14px 0 0;
  font-size: clamp(23px, 6.9vw, 29px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--white);
  text-wrap: balance;
}

/* Staff cards only. */
.brand__role {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange);
}

.brand__org {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-mid);
}

.brand__positioning {
  margin: 11px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  text-wrap: balance;
}

.services {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-mid);
}

.services__item + .services__item::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 9px;
  border-radius: 50%;
  vertical-align: 0.32em;
  background: currentColor;
}

.brand__rule {
  height: 1px;
  margin: 14px 0 0;
  border: 0;
  background: var(--orange);
}

.brand__credential {
  margin: 12px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--orange);
}

.brand__credential-detail {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--text-mid);
}

/* --- Actions ------------------------------------------------------------ */

/* Pushed to the foot of the card so the photograph keeps the space between. */
.card__actions {
  margin-top: auto;
  padding-top: 30px;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  background: var(--orange);
  color: var(--black);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 10px 26px -12px rgba(255, 109, 1, 0.7);
  transition:
    background-color 0.15s ease,
    transform 0.1s ease;
}

.cta:hover {
  background: var(--orange-dark);
}

.cta:active {
  transform: translateY(1px);
}

.icon--cta {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.actions {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 62px;
  padding: 10px 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  backdrop-filter: blur(2px);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.action:hover {
  border-color: var(--orange);
  background: rgba(255, 109, 1, 0.1);
}

.action:hover .icon {
  color: var(--orange);
}

.action__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.icon {
  display: block;
  width: 19px;
  height: 19px;
  color: var(--text-mid);
  transition: color 0.15s ease;
}

/* Value not yet confirmed: shown, clearly marked, deliberately not a link. */
.action--pending {
  border-style: dashed;
  color: var(--text-soft);
  cursor: default;
}

.action--pending .icon {
  color: var(--text-soft);
}

.action__flag {
  position: absolute;
  top: 5px;
  right: 6px;
  padding: 1px 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

/* --- Acknowledgement of Country ----------------------------------------- */

.ack {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--panel);
}

.ack__text {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  font-style: italic;
  text-align: center;
  color: var(--text-mid);
  text-wrap: pretty;
}

/* --- Focus -------------------------------------------------------------- */

a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.cta:focus-visible {
  outline-color: var(--white);
}

/* On a short screen the photo band is squeezed to about 150px, and the head
   ends up below the buttons. Bias the framing further down the image so the
   head lands in the part of the band that is actually visible. */
@media (max-height: 720px) {
  .card__photo {
    top: 14%;
    height: 60%;
    background-position: 25% 70%;
  }
}

/* --- Larger screens ----------------------------------------------------- */

@media (min-width: 600px) {
  .card {
    min-height: 0;
    margin: 40px 0;
    border-radius: var(--radius);
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9);
  }

  .card__inner {
    padding: 34px 30px 26px;
  }

  .lockup__logo {
    height: 46px;
  }

  .card__actions {
    padding-top: 44px;
  }
}

/* --- Preferences -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .card {
    min-height: 0;
    margin: 0;
  }

  .cta {
    box-shadow: none;
  }
}