/* ──────────────────────────────────────────────────────────────────────────
   meeting.donbarger.com — booking landing page
   Palette and type per the IMB 2022 brand guide (Sarum Blue anchor,
   Lively Jade action accent, Azo Sans headings / Proforma body).
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Azo Sans";
  src: url("assets/fonts/AzoSans-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Azo Sans";
  src: url("assets/fonts/AzoSans-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Azo Sans";
  src: url("assets/fonts/AzoSans-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proforma";
  src: url("assets/fonts/Proforma-Book.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --imb-sarum-blue:   #1b365d;
  --imb-ocean-teal:   #487a7b;
  --imb-lively-jade:  #009681;
  --imb-slate-gray:   #707372;
  --imb-silver-gray:  #b2b4b2;

  --font-heading: "Azo Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Proforma", Georgia, "Times New Roman", serif;
  --font-ui:      "Azo Sans", system-ui, sans-serif;

  --bg:          #f4f6f8;
  --bg-accent:   #e7ecf1;
  --card:        #ffffff;
  --ink:         var(--imb-sarum-blue);
  --ink-muted:   var(--imb-slate-gray);
  --rule:        #dfe5ec;
  --accent:      var(--imb-lively-jade);
  --cta-bg:      var(--imb-sarum-blue);
  --cta-bg-hover:#16416f;
  --cta-ink:     #ffffff;
  --shadow:      0 1px 2px rgba(27,54,93,.06), 0 12px 34px rgba(27,54,93,.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #101b2b;
    --bg-accent:   #16243a;
    --card:        #16253c;
    --ink:         #eef3f8;
    --ink-muted:   #a8b6c6;
    --rule:        #26384f;
    --cta-bg:      var(--imb-lively-jade);
    --cta-bg-hover:#00ab93;
    --cta-ink:     #06231f;
    --shadow:      0 1px 2px rgba(0,0,0,.30), 0 18px 44px rgba(0,0,0,.42);
  }
}
:root[data-theme="dark"] {
  --bg:          #101b2b;
  --bg-accent:   #16243a;
  --card:        #16253c;
  --ink:         #eef3f8;
  --ink-muted:   #a8b6c6;
  --rule:        #26384f;
  --cta-bg:      var(--imb-lively-jade);
  --cta-bg-hover:#00ab93;
  --cta-ink:     #06231f;
  --shadow:      0 1px 2px rgba(0,0,0,.30), 0 18px 44px rgba(0,0,0,.42);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  padding: 40px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  background-image:
    radial-gradient(60rem 30rem at 50% -12rem, var(--bg-accent), transparent 70%);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

.card {
  width: 100%;
  max-width: 34rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 44px 32px 28px;
  text-align: center;
}

/* Innovation logo — navy on light. Knocked out to white on dark, per the
   brand rule against putting a box or pill behind it. */
.logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 30px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo { filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] .logo { filter: brightness(0) invert(1); }

.eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.9rem, 6.2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink);
}

.lede {
  margin: 0 auto 30px;
  max-width: 28rem;
  font-size: 1.06rem;
  color: var(--ink-muted);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1.02rem;
  text-decoration: none;
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.cta:hover  { background: var(--cta-bg-hover); transform: translateY(-1px); }
.cta:active { transform: translateY(0); }
.cta:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.cta-arrow {
  width: 18px; height: 18px;
  transition: transform .16s ease;
}
.cta:hover .cta-arrow { transform: translateX(3px); }

.note {
  margin: 22px auto 0;
  max-width: 26rem;
  font-size: .9rem;
  color: var(--ink-muted);
}

.foot {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--ink-muted);
}
.foot a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--silver-gray, #b2b4b2);
}
.foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot .dot { margin: 0 8px; color: var(--imb-silver-gray); }

@media (max-width: 26rem) {
  .card { padding: 34px 22px 24px; border-radius: 15px; }
  .cta  { width: 100%; }
  /* Stack the footer rather than letting "Microsoft Bookings" orphan a word. */
  .foot a, .foot span:not(.dot) { display: block; }
  .foot .dot { display: none; }
  .foot a { display: inline-block; margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .cta-arrow { transition: none; }
  .cta:hover { transform: none; }
}