/* ============================================================================
   BioProfile — Base layer: fonts, reset, typography, layout primitives.
   Mobile-first. Desktop enhancements live in @media (min-width:) blocks.
   ========================================================================== */

/* ---- Poppins (self-hosted from the brand kit) ------------------------- */
@font-face { font-family:"Poppins"; font-style:normal; font-weight:300;
  font-display:swap; src:url("../assets/fonts/Poppins-Light.ttf") format("truetype"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:400;
  font-display:swap; src:url("../assets/fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:500;
  font-display:swap; src:url("../assets/fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600;
  font-display:swap; src:url("../assets/fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700;
  font-display:swap; src:url("../assets/fonts/Poppins-Bold.ttf") format("truetype"); }

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--font);
  font-weight:var(--w-reg);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--paper-2);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img, svg, video, canvas { display:block; max-width:100%; height:auto; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
a { color:var(--bp-teal); text-decoration:none; }
a:hover { color:var(--bp-teal-600); }
ul, ol { list-style:none; padding:0; }
:focus-visible { outline:2px solid var(--bp-teal); outline-offset:2px; border-radius:4px; }
::selection { background:var(--bp-lime); color:var(--ink); }

/* ---- Typography -------------------------------------------------------- */
h1, h2, h3, h4 { font-weight:var(--w-semi); line-height:var(--lh-tight); color:var(--ink); letter-spacing:-.01em; }
.display { font-size:var(--t-display); font-weight:var(--w-light); line-height:var(--lh-tight); letter-spacing:-.02em; }
h1, .h1 { font-size:var(--t-h1); }
h2, .h2 { font-size:var(--t-h2); }
h3, .h3 { font-size:var(--t-h3); font-weight:var(--w-med); }
.lead { font-size:var(--t-lg); color:var(--ink-2); line-height:var(--lh-snug); }
.muted { color:var(--ink-2); }
.faint { color:var(--ink-3); }
small, .text-sm { font-size:var(--t-sm); }

/* Eyebrow / column labels — brand book "capitals Poppins medium" */
.eyebrow {
  font-size:var(--t-eyebrow); font-weight:var(--w-med);
  text-transform:uppercase; letter-spacing:var(--ls-caps);
  color:var(--ink-3);
}
.eyebrow--teal { color:var(--bp-teal); }

/* Friendly handwritten-style micro-note from the old landing ("It only takes 2 minutes!") */
.script-note { font-style:italic; color:var(--ink-3); font-weight:var(--w-reg); }

/* ---- Layout primitives ------------------------------------------------- */
.container { width:100%; max-width:var(--page-max); margin-inline:auto; padding-inline:var(--s-5); }
.container--narrow { max-width:760px; }
.stack > * + * { margin-top:var(--s-4); }
.stack-lg > * + * { margin-top:var(--s-8); }
.row { display:flex; gap:var(--s-4); align-items:center; }
.row-wrap { flex-wrap:wrap; }
.between { justify-content:space-between; }
.grow { flex:1 1 auto; min-width:0; }
.center { text-align:center; }
.grid { display:grid; gap:var(--s-4); }

/* Auto-responsive card grid: 1 col mobile -> N cols as space allows.
   display:grid lives HERE because every .grid-auto in the codebase is used
   without .grid; without it the container was display:block and inline <a>
   cards collapsed to shrink-wrapped slivers (design-system gallery). */
.grid-auto { display:grid; grid-template-columns:1fr; gap:var(--s-4); }
@media (min-width:600px){ .grid-auto { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .grid-auto { grid-template-columns:repeat(3,1fr); gap:var(--s-5); } }

/* utility */
.hide { display:none !important; }
.only-desktop { display:none; }
.only-mobile  { display:revert; }
@media (min-width:900px){
  .only-desktop { display:revert; }
  .only-mobile  { display:none !important; }
}
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.section { padding-block:var(--s-16); }
.section--sand { background:var(--bp-sand-soft); }
.section--dark { background:var(--ink-dark); color:#dfe8e6; }
.section--dark h1,.section--dark h2,.section--dark h3 { color:#fff; }