/* =========================
   THEME TOKENS
========================= */
:root {
  --primary-color: #1b2e4b;   /* royal blue */
  --primary-dark:  #142038;
  --accent-blue:   #2f4d78;
  --text-dark:     #1b2d36;
  --text-muted:    #5a6b7b;
  --card-bg:       rgba(255, 255, 255, 0.05);
  --border-color:  #d3dce6;
}

/* =========================
   RESET / BASE
========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background: var(--primary-color);
  color: white;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Utility: screen-reader only */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}

/* =========================
   HEADER / NAV
========================= */
.site-header.absolute-header {
  position: absolute; inset: 0 auto auto 0;
  width: 100%;
  background: transparent;
  padding: 0.5em 0;
  z-index: 2;
}

.nav-container {
  display: flex; align-items: center; gap: 4em;
  padding: 1em 3em;
}

.logo {
  font-size: 1.5em; font-weight: 700;
  color: white; text-decoration: none; white-space: nowrap;
}

.main-nav {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}

.nav-links { display: flex; align-items: center; gap: 2rem; }

.main-nav a {
  text-decoration: none; color: white; font-weight: 600;
  padding: 0 0.5rem;
}

.contact-wrapper { margin-left: auto; }

.contact-btn {
  padding: 0.5em 1em; border: 2px solid white; color: white;
  background: transparent; border-radius: 4px; transition: all 0.3s ease;
}
.contact-btn:hover { background: white; color: var(--primary-color); }
.contact-btn:focus { outline: 3px solid white; outline-offset: 3px; }

/* Active link subtle glow */
.nav-links a.active { color: white; animation: glowPulse 2s ease-in-out infinite alternate; }
@keyframes glowPulse {
  from { text-shadow: 0 0 8px rgba(255,255,255,.6), 0 0 12px rgba(255,255,255,.4); }
  to   { text-shadow: 0 0 12px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.7); }
}

/* =========================
   DROPDOWN (Expertise)
========================= */
.dropdown-arrow { font-size: .8em; margin-left: .3em; }
.nav-item { position: relative; }

.nav-item .dropdown-panel { display: none; }

.nav-item.active .dropdown-panel { display: flex; }
.site-header { line-height: 1.2; }
.dropdown-panel {
  display: flex;
  flex-direction: row; /* horizontal alignment */
  flex-wrap: nowrap;   /* stay on one row */
  gap: 1.5em;

  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 900px;

  color: white;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid white;
  backdrop-filter: blur(10px);
  padding: 1.5em;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  z-index: 999;
  overflow-x: auto;

}


.panel {
  background: var(--primary-color);
  color: white;
  padding: 1.2em;
  border-radius: 8px;
  min-width: 200px;
  max-width: 220px;

  /* keep cards side-by-side in dropdown */
  flex: 0 0 200px; /* fixed basis so they don't stretch */
  white-space: normal; /* allow line breaks inside */

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  border: 2px solid white;
  text-align: left;

  transition: transform .3s ease, box-shadow .3s ease;
}

.panel:hover { transform: translateY(-4px); box-shadow: 0 0 12px rgba(255,255,255,.3); }

.panel i {
  font-size: 1.8em; margin-bottom: .5em; color: white;
  text-shadow: 0 0 8px rgba(255,255,255,.6), 0 0 12px rgba(255,255,255,.4);
  transition: transform .3s ease, text-shadow .3s ease;
}
.panel:hover i { transform: scale(1.1); text-shadow: 0 0 10px rgba(255,255,255,.8), 0 0 20px rgba(255,255,255,.6); }

.panel h4 { font-size: 1em; font-weight: 700; margin: .3em 0; color: white; }
.panel p  { font-size: .95em; color: #e0e0e0; }
.panel a  { text-decoration: none; display: inline-block; }

/* Optional selected state for a panel */
.panel-selected { background-color: var(--accent-blue); border-radius: 6px; }

/* =========================
   HERO (Video + Solid)
========================= */
.hero-video-wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;
  margin-top: 0;
  line-height: 0;                 /* prevent 1px baseline gap */
  background: var(--primary-color);
}

.background-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
  line-height: 0;
}

.video-overlay {
  position: relative; z-index: 1;
  height: 100%;
  background: rgba(27,46,75,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 2em; text-align: center; color: white;
  line-height: normal;            /* reset */
}

.hero-content { max-width: 800px; margin: 0 auto; }
.hero-content h1 { font-size: 3.5em; font-weight: 700; margin-bottom: .3em; }
.hero-subhead   { font-size: 1.4em; color: #d4ddee; margin-bottom: 1.2em; font-weight: 700; }
.hero-message   { font-size: 1.15em; color: #e6ebf5; margin-bottom: 2em; }

.highlight-word {
  font-weight: 700; color: white;
  text-shadow: 0 0 8px rgba(255,255,255,.6), 0 0 15px rgba(255,255,255,.4);
}

/* Diagonal separator under hero */
.video-separator {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 100px;
  background: white;
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0% 100%);
  z-index: 3;
  margin-bottom: -1px;           /* pulls up to kill any faint line */
}

/* Optional solid hero (non-video pages) */
.hero-solid-wrapper {
  background: var(--primary-color); color: white;
  padding: 8em 2em 4em; text-align: center; position: relative;
}
.hero-solid-wrapper .hero-content { max-width: 800px; margin: 0 auto; }
.hero-solid-wrapper h1 { font-size: 3.2em; font-weight: 700; margin-bottom: .3em; }
.hero-solid-wrapper .hero-subhead { font-size: 1.4em; color: #d4ddee; margin-bottom: 1.2em; font-weight: 700; }
.hero-solid-wrapper .hero-message { font-size: 1.15em; color: #e6ebf5; margin-bottom: 2em; }

/* =========================
   BUTTONS
========================= */
.btn, .btn-outline {
  display: inline-block;
  padding: .9em 1.6em;
  border: 2px solid white;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  margin: .5em;
  transition: all .3s ease;
  color: white;
}
.btn:hover, .btn-outline:hover {
  background: white; color: var(--primary-color);
  box-shadow: 0 6px 20px rgba(255,255,255,.2);
}

/* Learn more (light themed) */
.learn-more {
  display: inline-block;
  padding: .6em 1.4em;
  font-weight: 700;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: 6px;
  text-decoration: none;
  margin-top: 2em;
  transition: all .3s ease;
}
.learn-more:hover { background: var(--primary-color); color: white; }

/* =========================
   LAYOUT / SECTIONS
========================= */
section { margin-top: 4em; }
section h2 { font-size: 2em; margin-bottom: .5em; color: inherit; }

/* HOW WE DELIVER (light) */
.how-we-deliver {
  position: relative; z-index: 2;
  padding: 2em 1em 4em;
  background: white; color: var(--primary-color);
  text-align: center;
  margin-top: -1px; /* overlap hero to remove any hairline */
}
.how-we-deliver h2 {
  color: var(--primary-color);
  font-size: 2.6em; margin-bottom: 1.5em; font-weight: 700;
}
/* Transparent version with blue boarder */
/* HOW WE DELIVER cards - transparent w/ royal blue border */
.how-we-deliver .card {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: none;
}

.how-we-deliver .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 12px rgba(27,46,75,0.3); /* subtle blue glow */
}

.how-we-deliver .card-highlight {
  color: var(--primary-color);
  text-shadow: none; /* remove old glow if desired */
}

.deliver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2em;
  max-width: 1200px;
  margin: 2em auto;
}

.card {
  background: linear-gradient(135deg, #e7ecf3, #dbe3ed);
  color: var(--primary-color);
  padding: 2em;
  border-radius: 16px;
  border: 1px solid #c4d0de;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: transform .3s ease, box-shadow .3s ease;
  text-align: left;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }

.card-highlight {
  font-weight: 800; color: var(--primary-color);
  text-shadow: 0 0 6px rgba(43,74,130,.3), 0 0 12px rgba(43,74,130,.2);
  letter-spacing: .5px; text-align: center; margin: 0 auto .5em;
}

/* WHY CRM / CLIENTS / TESTIMONIALS (dark) */
.why-crm, .clients, .testimonials {
  background: var(--primary-color);
  color: white; text-align: center; padding: 3em 1em;
}
.why-crm p { max-width: 700px; margin: 0 auto; font-size: 1.15em; }

/* Optional light theme variant for why-crm */
.why-crm.light-theme {
  background: white; color: var(--primary-color);
  text-align: center; padding: 3em 1em; margin-top: 0 !important;
}
.why-crm.light-theme h2 { color: var(--primary-color); }
.why-crm.light-theme p  { color: var(--text-dark); }

/* =========================
   CLIENT LOGOS
========================= */
.clients { background: var(--primary-dark); }
.clients h2 { font-size: 2rem; margin-bottom: 2rem; }

/* Single, clean version (flex) */
.logo-grid {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem;
  margin-top: 1rem;
}
.logo-item {
  background: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  min-width: 200px;
  color: var(--primary-color);
  text-align: center;
}
.client-logo {
  width: 100%; max-width: 180px; height: auto; display: block;
  margin: 0 auto .5rem;
}
.client-tagline { font-size: .9rem; color: var(--primary-color); margin: 0; }

/* Old School Coffee smaller logo variant */
.coffee-logo {
  width: 50%; max-width: 90px; height: auto;
  border: 2px solid var(--primary-color); border-radius: 6px; padding: 4px;
  background: var(--primary-color);
  display: block; margin: 0 auto .5rem;
}

/* =========================
   TEAM SECTION (newer version)
========================= */
.team-section { padding: 4rem 2rem; text-align: center; }
.team-section h2 { font-size: 2.4em; font-weight: 700; }
.team-section p  { color: #d4ddee; font-size: 1.1em; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.team-card { transition: transform .3s ease, box-shadow .3s ease; }
.team-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(255,255,255,.15); }

.team-card .card {
  background: var(--primary-color); color: white; text-align: center;
  border: 2px solid white; border-radius: 12px; padding: 1.5rem;
}

.team-card .avatar {
  background: rgba(255,255,255,.1);
  border: 2px solid white; border-radius: 50%;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  font-size: 2rem; margin: 0 auto;
}

.team-card h3 { margin-top: 1rem; font-size: 1.25em; }
.team-card p  { font-size: .95em; color: #d4ddee; }

/* =========================
   FOOTER
========================= */
.site-footer {
  background: var(--primary-color);
  color: white; text-align: center; font-size: .95em; padding: 1em;
}

/* =========================
   FILTER BUTTONS (work.html)
========================= */
#filters .btn {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  padding: .5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background .3s ease, color .3s ease;
}
#filters .btn:hover, #filters .btn.is-active {
  background: var(--primary-color); color: white; border-color: var(--primary-color);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  .nav-container { flex-direction: column; align-items: flex-start; padding: 1em 1.25em; gap: 1rem; }
  .dropdown-panel { min-width: min(90vw, 900px); left: 0; right: auto; }
  .hero-content h1 { font-size: 2.4em; }
  .hero-subhead { font-size: 1.1em; }
  .hero-message { font-size: 1em; }
}
/* HAMBURGE STUFF */
/* Hamburger button (hidden on desktop) */
.hamburger {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: .5rem;
  margin-left: auto;
  z-index: 1001;
}
.hamburger-box { display: inline-block; width: 28px; height: 20px; position: relative; }
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 28px; height: 2px; background: white; position: absolute; left: 0; transition: transform .3s ease, opacity .3s ease;
}
.hamburger-inner { top: 9px; }
.hamburger-inner::before { content: ""; top: -8px; }
.hamburger-inner::after  { content: ""; top: 8px; }

/* X state */
.hamburger.is-active .hamburger-inner { transform: rotate(45deg); }
.hamburger.is-active .hamburger-inner::before { transform: rotate(90deg) translateX(-8px); opacity: 0; }
.hamburger.is-active .hamburger-inner::after  { transform: rotate(-90deg) translateX(-8px); }

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0 0 0 auto;              /* right-side drawer */
  width: min(85vw, 360px);
  transform: translateX(100%);
  background: rgba(20, 32, 56, 0.96);
  backdrop-filter: blur(8px);
  color: white;
  z-index: 1000;
  transition: transform .3s ease;
}
.mobile-drawer.is-open { transform: translateX(0); }

.mobile-drawer-inner {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.25rem 1.25rem 2rem;
}

.drawer-close {
  align-self: flex-end;
  background: transparent; border: 0; color: white;
  font-size: 2rem; line-height: 1; cursor: pointer;
  padding: .25rem;
}

/* Mobile nav items */
.mobile-link {
  display: block;
  color: white; text-decoration: none; font-weight: 600;
  padding: .75rem .25rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-cta { margin-top: .75rem; }

/* Mobile Expertise block */
.mobile-exp summary {
  list-style: none; cursor: pointer; font-weight: 700;
  padding: .75rem .25rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-exp summary::-webkit-details-marker { display: none; }
.mobile-panels { display: grid; grid-template-columns: 1fr; gap: .75rem; padding: .75rem 0 0; }
.mobile-panel {
  display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: center;
  text-decoration: none; color: white; padding: .5rem; border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
  background: rgba(255,255,255,.06);
}
.mobile-panel i { font-size: 1.1rem; }

/* Body scroll lock when drawer open */
.body-locked {
  overflow: hidden;
  height: 100%;
}

/* Hide desktop nav on mobile; show hamburger */
@media (max-width: 768px) {
  .nav-links, .contact-wrapper { display: none; }
  .hamburger { display: inline-block; }
}
/* LOGO */
/* reuse your existing glowPulse keyframes */
.glow-logo {
  animation: glowPulse 2s ease-in-out infinite alternate;
}

/* optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .glow-logo {
    animation: none;
    text-shadow: 0 0 10px rgba(255,255,255,.6); /* static subtle glow */
  }
}
/* Desktop Expertise: selected panel matches Work card styling */
.dropdown-panel .panel.current-page {
  background: linear-gradient(135deg, #e7ecf3, #dbe3ed); /* same as .card */
  border: 1px solid #c4d0de;                              /* same as .card */
  color: var(--primary-color);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);                 /* optional: same vibe */
}

/* Ensure inner text + icon colors flip to primary blue */
.dropdown-panel .panel.current-page h4,
.dropdown-panel .panel.current-page p,
.dropdown-panel .panel.current-page i,
.dropdown-panel .panel.current-page a {
  color: var(--primary-color) !important;
}

/* Mobile Expertise: selected link matches Work card styling */
.mobile-panel.current-page {
  background: linear-gradient(135deg, #e7ecf3, #dbe3ed);
  border: 1px solid #c4d0de;
  color: var(--primary-color);
}

.mobile-panel.current-page i {
  color: var(--primary-color) !important;
}

/* Diagonal separator under solid hero */
.solid-separator {
  width: 100%;
  height: 80px;
  background: var(--primary-color);
  clip-path: polygon(0 0, 100% 100%, 0% 100%);
  margin-top: -1px; /* kill any faint line */
}
#projectGrid .card {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: none;

  /* Flexbox layout for vertical alignment */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes button to bottom */
  align-items: center;            /* centers horizontally */
  text-align: center;             /* optional: centers text */
  min-height: 100%;                /* ensures full height in grid */
}

#projectGrid .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 12px rgba(27,46,75,0.3); /* subtle blue glow on hover */
}

#projectGrid .card-highlight {
  color: var(--primary-color);
  text-shadow: none; /* remove old highlight shadow */
}

#projectGrid .card p {
  color: var(--primary-color);
}

#projectGrid .learn-more {
  color: var(--primary-color);
  border-color: var(--primary-color);
  margin-top: auto; /* pushes to bottom of card */
  align-self: center;
}

#projectGrid .learn-more:hover {
  background: var(--primary-color);
  color: white;
}

/* Process page: transparent panels with primary border */
#phases .card,
#engagement .card {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: none;

  /* keep content tidy and allow bottom-aligned CTAs later */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#phases .card:hover,
#engagement .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 12px rgba(27,46,75,0.3);
}

#phases .card .card-highlight,
#engagement .card .card-highlight,
#phases .card p,
#engagement .card p {
  color: var(--primary-color);
  text-shadow: none;
}
/*arror connectors */
/* Arrow connectors for process steps */
#phases .deliver-grid {
  position: relative;
}

#phases .card {
  position: relative;
}

/* Add arrow after each card except the last */
#phases .card:not(:last-child)::after {
  content: "\f061"; /* Font Awesome 'long arrow right' */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: -25px; /* space between card and arrow */
  transform: translateY(-50%);
  color: var(--primary-color);
  font-size: 1.5rem;
}

/* Responsive: hide arrows on small screens */
@media (max-width: 768px) {
  #phases .card:not(:last-child)::after {
    display: none;
  }
}
/* Virg */
/* ✦ Elevated transparent panels */
.card {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column; gap: .75rem;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(20,32,56,.12);
  border-color: #2f4d78; /* accent blue on hover */
}

/* ✦ Headline chip (clean, readable, branded) */
.card .card-highlight {
  display: inline-block;
  align-self: center;
  padding: .35rem .8rem;
  border: 2px solid var(--primary-color);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--primary-color);
  background: rgba(27,46,75,.04); /* faint tint to anchor the heading */
  text-shadow: none;
}

/* ✦ Subtle divider so body copy breathes */
.card .card-highlight + p {
  margin-top: .35rem;
  padding-top: .75rem;
  border-top: 1px dashed rgba(27,46,75,.35);
}

/* ✦ Paragraph legibility */
.card p {
  color: var(--primary-color);
  line-height: 1.55;
}

/* ✦ Button alignment for cards that have CTAs */
.card .learn-more {
  margin-top: auto;            /* pins to bottom */
  align-self: center;          /* centered */
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.card .learn-more:hover { background: var(--primary-color); color: #fff; }

/* ✦ Optional: equal heights in responsive grids */
.deliver-grid > .card {
  height: 100%;
}

/* ✦ Optional: softer outline on very light backgrounds */
.why-crm.light-theme .card {
  border-color: #2f4d78; /* accent-blue for better contrast on white */
}

/* Remove the Stack line entirely */
#projectGrid .card p strong {
  display: none;
}

/* Ensure each project card can host the icon + tooltip */
#projectGrid .project {
  position: relative;
}

/* Show a single category icon at the bottom of each project card */

@keyframes fadeIn { to { opacity: 1; } }

/* Tag → icon + tooltip mapping */


/* Icon row styling */
.stack-icons {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: auto;
  margin-bottom: .8rem;
}

.stack-icons i {
  font-size: 1.3rem;
  color: var(--primary-color);
  transition: transform .2s ease, opacity .2s ease;
  cursor: pointer;
}

.stack-icons i:hover {
  transform: translateY(-2px);
  opacity: .8;
}
.work-panel img {
  display: block;
  margin-top: 1rem; /* space between any content above and the dotted line */
  padding-top: 1rem; /* space between line and image */
  border-top: 2px dotted white; /* or your desired color */
}

/* Remove the dashed line under title/paragraph in work cards */
#projectGrid .card .card-highlight + p {
  border-top: none;
  padding-top: 0;
  margin-top: 0.35rem; /* keep a little space after the heading */
}

/* Add dotted line only above stack icons */
#projectGrid .stack-icons {
  border-top: 2px dotted var(--primary-color);
  padding-top: 0.75rem; /* space between line and icons */
  margin-top: 1rem; /* space after paragraph before line */
}
/* Modal shell */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; z-index: 1000; }
.modal.open { display: block; }

/* Card */
.modal-card {
  max-width: 560px; margin: 10vh auto; background: var(--primary-color,#1b2e4b);
  color: #fff; border: 2px solid #fff; border-radius: 16px; padding: 1.25rem; position: relative;
}

/* Close button */
.modal-close {
  position: absolute; top: .5rem; right: .5rem; background: transparent; border: 0; color: #fff;
  font-size: 1.25rem; cursor: pointer;
}

/* Header layout */
.modal-header { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center; margin-bottom: .75rem; }
.modal-header img { width: 96px; height: 96px; border-radius: 9999px; border: 2px solid #fff; object-fit: cover; object-position: center; }
.modal-role { color: #d4ddee; margin-top: .25rem; }
.modal-bio { line-height: 1.55; }