@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

:root {
  /* BNI Champions brand tokens */
  --color-ink: #14110E;         /* near-black text / dark section bg */
  --color-red: #A32421;         /* brand accent */
  --color-paper: #FBF9F5;       /* card / surface background */
  --color-canvas: #E7E2DA;      /* page background */
  --color-panel: #EFEBE4;       /* secondary panel (category note) */
  --color-line: #14110E;        /* strong hairline (on light) */
  --color-line-soft: #D6CFC4;   /* soft hairline / dotted leaders */
  --color-line-dark: #2F2823;   /* hairline on dark sections */
  --color-text: #14110E;        /* headings */
  --color-text-body: #4A443E;   /* body copy */
  --color-text-muted: #6E6862;  /* secondary / eyebrow labels */
  --color-text-faint: #8A8279;  /* tertiary mono labels */
  --color-text-tint: #9A938B;   /* light accent within headlines */
  --color-on-dark: #F6F3EE;     /* heading text on dark sections */
  --color-on-dark-body: #A9A099;
  --color-on-dark-faint: #7E756D;
  --color-on-dark-muted: #8A8078;

  /* legacy variable names kept so header.css/footer.css/inputs.css/contact-form.css
     (not yet rebuilt) keep working, just remapped onto the brand palette above */
  --color-dark-blue: var(--color-ink);
  --color-light-blue: var(--color-red);
  --color-yellow: var(--color-red);
  --colour-4: var(--color-paper);
  --background-colour: var(--colour-4);
  --colour-5: var(--color-ink);
  --colour-6: var(--color-line-soft);
  --tint-blue: color-mix(in srgb, var(--color-red) 10%, transparent);
  --tint-red: color-mix(in srgb, var(--color-red) 12%, transparent);
  --tint-yellow: var(--tint-red);
  --shadow-navy: color-mix(in srgb, var(--color-ink) 8%, transparent);
  --shadow-navy-md: color-mix(in srgb, var(--color-ink) 10%, transparent);
  --shadow-navy-lg: color-mix(in srgb, var(--color-ink) 6%, transparent);
  --shadow-navy-xl: color-mix(in srgb, var(--color-ink) 12%, transparent);
  --overlay-white: rgba(255, 255, 255, 0.9);
  --overlay-white-muted: rgba(255, 255, 255, 0.85);
  --overlay-white-soft: rgba(255, 255, 255, 0.1);
  --overlay-white-faint: rgba(255, 255, 255, 0.25);

  --font-body: 'Archivo', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

::-moz-selection {
  background: var(--color-red);
  color: var(--colour-4);
}

::selection {
  background: var(--color-red);
  color: var(--colour-4);
}

a {
  color: var(--color-red);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--color-ink);
}

body {
  font-family: var(--font-body);
  color: var(--colour-5);
  background-color: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-body);
  color: var(--colour-5);
}

h1 {
  font-weight: 800;
  font-size: 2.5rem;
}

h2 {
  font-weight: 700;
  font-size: 2.2rem;
}

h3 {
  font-weight: 600;
  font-size: 1.5rem;
}

h4 {
  font-weight: 600;
  font-size: 1.2rem;
}

h5 {
  font-weight: 600;
  font-size: 1rem;
}

p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6em;
  color: var(--colour-5);
}

.p1 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--colour-5);
}

hr {
  border: none;
  border-top: 1px solid var(--colour-6);
}

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

html, body {
  margin: 0;
  scroll-behavior: smooth;
}

/* sticky footer - on a short page (register, contact, ...) main used to
   just end wherever its own content stopped, leaving the footer floating
   partway up the viewport with blank canvas below it. main grows to fill
   any leftover vertical space instead, so footer always sits flush with
   the bottom of the window on short pages; on tall pages this has no
   effect, everything scrolls exactly as before. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main {
  flex: 1 0 auto;
}

body > .header-parent,
body > footer {
  flex: none;
}
.main-banner.h150 {
  height: 150px;
}
.no-margin {
  margin: 0;
}
.margin1 {
  margin: 0.2rem 0;
}
.no-bottom-margin {
  margin-bottom: 0;
}
.bottom-margin-05rem {
  margin: 0;
  margin-bottom: 0.5rem;
}
.bottom-margin-1rem {
  margin: 0;
  margin-bottom: 1rem;
}
.bottom-margin-50px {
  margin-bottom: 50px;
}
.margin-x-1rem {
  margin: 1rem 0;
}

.margin-x-1-05rem {
  margin: 0;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.valign-top {
  vertical-align:top;
}
.strikethrough {
  text-decoration: line-through;
}

/* eyebrow / kicker label - "SINGAPORE CHAPTER", "THE DIRECTORY", etc */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kicker::before {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--color-red);
  display: block;
  flex: none;
}

.cta-button > button,
.btn-primary {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 16px 28px;
  color: var(--colour-4);
  background-color: var(--color-red);
  border-radius: 0;
  border: none;
  cursor: pointer;
  display: inline-block;
}

.cta-button > button:hover,
.btn-primary:hover {
  background-color: var(--color-ink);
  color: var(--colour-4);
}

.cta-button.cta-button--dark > button {
  background-color: var(--color-ink);
}

.cta-button.cta-button--dark > button:hover {
  background-color: var(--color-red);
}

/* underline link used for secondary CTAs - "Browse the directory" */
.link-underline {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-red);
  padding-bottom: 3px;
  display: inline-block;
}

.link-underline:hover {
  color: var(--color-red);
}

@media screen and (min-width: 769px) {}
@media screen and (min-width: 1024px) {}
@media screen and (min-width: 1200px) {}