/* ==========================================================================
   BIOLOG BY BTS — DESIGN SYSTEM
   Blended Technology Solutions Limited
   --------------------------------------------------------------------------
   Palette is the BTS house system (navy / teal / green / sand / olive).
   Two additions are documented in /REVIEW.md:
     · --deep-teal  — teal is 1.9:1 on white and cannot carry text. Eyebrow
                      labels use the darkened derivative at 5.02:1.
     · --refused    — the product returns three outcomes. The house palette
                      has no refusal colour, so one functional red is added
                      and used ONLY for the refused state and destructive UI.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */
:root {
  /* House palette */
  --navy:        #264563;
  --teal:        #50C4C5;
  --green:       #037146;
  --sand:        #DFD581;
  --olive:       #717B3A;

  /* Derived + neutral */
  --deep-teal:   #1E7B7C;   /* teal that can carry text on light — 5.02:1 */
  --navy-deep:   #16293C;   /* darkest surface, footer + navy band base    */
  --navy-lift:   #33566F;   /* one step up from navy, nested dark panels   */
  --ink:         #12222F;   /* body text                                   */
  --slate:       #5A6E80;   /* secondary copy, captions, table labels      */
  --rule:        #D9E0E6;   /* hairlines and dividers                      */
  --rule-dark:   #3C5C77;   /* hairlines on navy surfaces                  */
  --mist:        #F1F5F7;   /* surface level 1 — pale band                 */
  --paper:       #FFFFFF;   /* canvas                                      */

  /* Outcome states — always paired with the word, never colour alone */
  --permitted:   #037146;
  --flagged:     #717B3A;
  --refused:     #A8322B;

  /* Type */
  --sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale */
  --t-label:   11px;
  --t-caption: 13px;
  --t-small:   14px;
  --t-body:    16px;
  --t-lead:    19px;
  --t-sub:     21px;
  --t-h3:      24px;
  --t-h2:      34px;
  --t-h1:      52px;
  --t-display: 74px;

  /* Space */
  --s4: 4px;   --s8: 8px;   --s12: 12px; --s16: 16px; --s20: 20px;
  --s24: 24px; --s32: 32px; --s40: 40px; --s48: 48px; --s64: 64px;
  --s80: 80px; --s96: 96px; --s120: 120px;

  --page: 1240px;
  --band: 104px;         /* vertical rhythm between sections */
}

/* --------------------------------------------------------------- 2. reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

/* Square everywhere. No exceptions but the status dot. */
input, select, textarea, button, img, figure, .card { border-radius: 0; }

/* Tabular figures wherever a number appears */
.stat b, table, .ident, time, .num, .readout { font-variant-numeric: tabular-nums; }

::selection { background: var(--teal); color: var(--navy-deep); }

:focus-visible {
  outline: 3px solid var(--deep-teal);
  outline-offset: 2px;
}

/* --------------------------------------------------------- 3. type styles */
h1, h2, h3, h4 { font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin: 0; color: var(--navy); }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); letter-spacing: -0.018em; }
h3 { font-size: var(--t-h3); letter-spacing: -0.012em; line-height: 1.2; }
h4 { font-size: var(--t-sub); letter-spacing: -0.01em; line-height: 1.25; }
p  { margin: 0 0 var(--s20); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.display { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.032em; font-weight: 900; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--slate); max-width: 62ch; }
.small { font-size: var(--t-small); }
.muted { color: var(--slate); }

a { color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(3,113,70,.35); }
a:hover { border-bottom-color: var(--green); }

/* --------------------------------------------- 4. the // eyebrow (signature) */
.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deep-teal);
  display: block;
  margin: 0 0 var(--s16);
}
.eyebrow::before { content: '// '; color: var(--teal); letter-spacing: 0; }

.on-navy .eyebrow { color: var(--teal); }
.on-navy .eyebrow::before { color: var(--teal); }

/* --------------------------------------------------------------- 5. layout */
.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--s24); }
@media (min-width: 900px) { .wrap { padding: 0 var(--s48); } }

section { padding: var(--band) 0; }
.band-mist { background: var(--mist); }
.band-navy { background: var(--navy-deep); }

.on-navy { color: #DCE6EE; }
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4 { color: #FFFFFF; }
.on-navy .lead, .on-navy .muted { color: #A9BECE; }
.on-navy a { color: var(--teal); border-bottom-color: rgba(80,196,197,.4); }

.sec-head { max-width: 780px; margin-bottom: var(--s48); }
.sec-head h2 + p { margin-top: var(--s20); }
/* a lead paragraph always clears its heading, inside a sec-head or not */
h1 + .lead, h2 + .lead, h3 + .lead { margin-top: var(--s20); }
/* a heading always clears the block that follows it, list or prose */
h2 + .defs, h2 + .ticks, h2 + .tbl-wrap { margin-top: var(--s32); }

.grid { display: grid; gap: var(--s24); }
.g2 { grid-template-columns: 1fr; }
.g3 { grid-template-columns: 1fr; }
.g4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 760px)  { .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .g3 { grid-template-columns: repeat(3,1fr); } .g4 { grid-template-columns: repeat(4,1fr); } }

.split { display: grid; gap: var(--s48); align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: 1.05fr .95fr; gap: var(--s64); } }
@media (min-width: 960px) { .split-wide { grid-template-columns: 1fr 1.25fr; } }

/* --------------------------------------------------------------- 6. rules */
.marker { width: 40px; height: 3px; background: var(--teal); border: 0; margin: 0 0 var(--s24); }
.marker-sand { background: var(--sand); }
.divider { height: 1px; background: var(--rule); border: 0; margin: 0; }
.on-navy .divider { background: var(--rule-dark); }

/* -------------------------------------------------------------- 7. buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s8);
  font-family: var(--sans); font-weight: 700; font-size: var(--t-body);
  padding: 15px 28px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: #025c39; border-color: #025c39; color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--navy); }
.on-navy .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.on-navy .btn-ghost:hover { border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s12); margin-top: var(--s32); }

.arrow-link {
  font-family: var(--sans); font-weight: 700; font-size: var(--t-body);
  color: var(--green); border-bottom: 1px solid rgba(3,113,70,.3);
  display: inline-block; padding-bottom: 2px;
}
.arrow-link:hover { border-bottom-color: var(--green); }
.on-navy .arrow-link { color: var(--teal); border-bottom-color: rgba(80,196,197,.35); }

/* ---------------------------------------------------------------- 8. cards */
.card {
  background: var(--paper); border: 1px solid var(--rule);
  padding: var(--s32); display: flex; flex-direction: column; gap: var(--s12);
}
.band-mist .card { background: var(--paper); }
.on-navy .card { background: var(--navy); border-color: var(--rule-dark); }
.card h3, .card h4 { margin: 0; }
/* chips and links size to their content inside a stretch-aligned flex card */
.card .chip, .card .arrow-link, .card .card-num { align-self: flex-start; }
.card p { margin: 0; color: var(--slate); font-size: var(--t-small); line-height: 1.6; }
.on-navy .card p { color: #A9BECE; }

a.card { border-bottom: 1px solid var(--rule); transition: border-color .15s ease, transform .15s ease; }
a.card:hover { border-color: var(--navy); }
.on-navy a.card:hover { border-color: var(--teal); }

.card-num {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.16em; color: var(--slate);
}
.card-num::after { content: ''; display: block; width: 28px; height: 3px; background: var(--sand); margin-top: var(--s12); }

/* --------------------------------------------- 9. state chip (signature) */
.chip {
  display: inline-flex; align-items: center; gap: var(--s8);
  font-family: var(--sans); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid currentColor; background: transparent;
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; flex: 0 0 auto; }
.chip-permitted { color: var(--permitted); }
.chip-flagged   { color: var(--olive); }
.chip-refused   { color: var(--refused); }
.on-navy .chip-permitted { color: #4FD6A0; }
.on-navy .chip-flagged   { color: var(--sand); }
.on-navy .chip-refused   { color: #F08279; }

/* ------------------------------------------- 10. hero decision readout */
.hero { padding: var(--s64) 0 var(--band); }
.hero .split { align-items: center; }
@media (min-width: 960px) { .hero { padding: var(--s96) 0 var(--band); } }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: var(--s24); }

.readout {
  background: var(--navy-deep); border: 1px solid var(--navy-deep);
  font-family: var(--mono); color: #C6D6E2; font-size: var(--t-caption);
}
.readout-bar {
  display: flex; align-items: center; gap: var(--s8);
  padding: 12px var(--s20); border-bottom: 1px solid var(--rule-dark);
  font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: #8FA8BB;
}
.readout-bar .live { width: 7px; height: 7px; border-radius: 9999px; background: #4FD6A0; flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .readout-bar .live { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.readout-bar .spacer { margin-left: auto; letter-spacing: .06em; text-transform: none; font-size: var(--t-label); }

.r-row {
  display: grid; grid-template-columns: 62px 1fr auto; gap: var(--s12);
  align-items: center; padding: 13px var(--s20);
  border-bottom: 1px solid var(--rule-dark);
}
.r-row:last-of-type { border-bottom: 0; }
.r-time { color: #7C97AC; font-size: var(--t-label); }
.r-who { min-width: 0; }
.r-id { color: #EAF1F6; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-place { color: #7C97AC; font-size: var(--t-label); font-family: var(--sans); font-weight: 500; letter-spacing: .02em; }
@media (prefers-reduced-motion: no-preference) {
  .r-row { opacity: 0; transform: translateY(6px); }
  .r-row.in { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }
}
.readout-foot {
  padding: 12px var(--s20); border-top: 1px solid var(--rule-dark);
  color: #7C97AC; font-size: var(--t-label); letter-spacing: .04em;
  display: flex; justify-content: space-between; gap: var(--s12);
}

/* -------------------------------------------------------- 11. identifiers */
.ident { font-family: var(--mono); font-size: var(--t-caption); color: var(--navy); }
.on-navy .ident { color: #EAF1F6; }

/* --------------------------------------------------------------- 12. stats */
.stat { display: flex; flex-direction: column; gap: var(--s8); }
.stat::before { content: ''; width: 40px; height: 3px; background: var(--teal); margin-bottom: var(--s12); }
.stat b { font-size: 46px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--navy); }
.on-navy .stat b { color: #fff; }
.stat span {
  font-family: var(--sans); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
}
.on-navy .stat span { color: #A9BECE; }
.stat em { font-style: normal; font-family: var(--mono); font-size: var(--t-label); color: var(--olive); }

/* --------------------------------------------------------------- 13. lists */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s16); }
.ticks li { padding-left: var(--s24); position: relative; color: var(--slate); font-size: var(--t-small); line-height: 1.6; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 10px; height: 3px; background: var(--teal);
}
.ticks li strong { color: var(--ink); font-weight: 700; }
.on-navy .ticks li { color: #A9BECE; }
.on-navy .ticks li strong { color: #fff; }

.defs { display: grid; gap: var(--s32); }
.defs > div { padding-left: var(--s24); border-left: 3px solid var(--teal); }
.defs h4 { margin-bottom: var(--s8); }
.defs p { color: var(--slate); font-size: var(--t-small); }

/* --------------------------------------------------------------- 14. table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--paper); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 560px; }
thead th {
  text-align: left; font-family: var(--mono); font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
  padding: var(--s16) var(--s20); border-bottom: 1px solid var(--rule); background: var(--mist);
  white-space: nowrap;
}
tbody td { padding: var(--s16) var(--s20); border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--slate); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--mist); }
tbody td:first-child { color: var(--navy); font-weight: 700; white-space: nowrap; }

/* -------------------------------------------------------------- 15. figure */
figure { margin: 0; }
figure img { border: 1px solid var(--rule); width: 100%; }
figcaption {
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.06em;
  color: var(--slate); padding-top: var(--s12);
}
.on-navy figure img { border-color: var(--rule-dark); }
.on-navy figcaption { color: #8FA8BB; }
.fig-square img { aspect-ratio: 1/1; object-fit: cover; }
.fig-wide img { aspect-ratio: 16/9; object-fit: cover; }
.fig-4x3 img { aspect-ratio: 4/3; object-fit: cover; }

/* ------------------------------------------------------- 16. utility + nav */
.util {
  background: var(--navy-deep); color: #A9BECE;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.04em;
}
.util .wrap { display: flex; flex-wrap: wrap; gap: var(--s16); padding-top: 9px; padding-bottom: 9px; }
.util a { color: #A9BECE; border: 0; }
.util a:hover { color: var(--teal); }
.util .sep { color: var(--rule-dark); }

header.nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.nav-in { display: flex; align-items: center; gap: var(--s24); padding-top: var(--s16); padding-bottom: var(--s16); }

.wordmark { display: flex; align-items: baseline; gap: 9px; border: 0; flex: 0 0 auto; }
.wordmark b { font-weight: 900; font-size: 22px; letter-spacing: 0.005em; color: var(--navy); }
.wordmark span { font-weight: 500; font-size: 13px; color: var(--slate); letter-spacing: -0.01em; }

/* The mark. Filled with currentColor, so the brand orange is set once here
   and overridden per surface rather than shipping three files. */
.wordmark .bl-mark {
  width: 40px; height: auto; display: block; flex: 0 0 auto;
  align-self: center; color: #F4502A;
}
.f-logo { margin-bottom: var(--s64); }
.f-logo .bl-mark { width: 46px; }
footer .f-logo b { color: #FFFFFF; font-size: 25px; }
footer .f-logo span { color: #8FA8BB; font-size: 12px; }
@media (max-width: 420px) { .wordmark .bl-mark { width: 34px; } .wordmark b { font-size: 19px; } }

.nav-links { display: none; align-items: center; gap: var(--s24); margin-left: auto; }
@media (min-width: 1080px) { .nav-links { display: flex; } }
.nav-links > * { font-size: var(--t-small); font-weight: 700; color: var(--navy); border: 0; }
.nav-links a:hover { color: var(--green); }
.nav-links .btn { font-size: var(--t-small); padding: 11px 20px; color: #fff; }

/* ------------------------------------------------- mega-menu panel
   The panel is anchored to the header, not to its trigger, so it spans the
   page grid the way the reference does. Trigger keeps position:relative only
   for the small dropdown fallback. */
.has-menu { position: relative; }
.has-menu > button {
  font: inherit; font-weight: 700; font-size: var(--t-small); color: var(--navy);
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.has-menu > button::after {
  content: ''; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
}
.has-menu[data-open="true"] > button::after { transform: rotate(-135deg) translateY(-2px); }
.has-menu[data-open="true"] > button { color: var(--green); }

.mega {
  position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 70;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  box-shadow: 0 24px 48px -28px rgba(18,34,47,.35);
  display: none;
}
.has-mega { position: static; }
header.nav { position: sticky; }
.has-menu[data-open="true"] .mega { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .has-menu[data-open="true"] .mega { animation: mega-in .18s ease both; }
}
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }

.mm-inner {
  width: 100%; max-width: var(--page); margin: 0 auto;
  padding: var(--s32) var(--s24) var(--s40);
  display: grid; gap: var(--s32);
}
@media (min-width: 900px) { .mm-inner { padding-left: var(--s48); padding-right: var(--s48); } }
@media (min-width: 1080px) { .mm-inner { grid-template-columns: 300px 1fr; gap: var(--s64); } }

.mm-say { border-right: 0; }
@media (min-width: 1080px) { .mm-say { border-right: 1px solid var(--rule); padding-right: var(--s32); } }
.mm-say h4 { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -.018em; color: var(--navy); }
.mm-say p { font-size: var(--t-small); color: var(--slate); margin: var(--s16) 0 var(--s24); }
.mm-cta {
  display: inline-block; font-weight: 700; font-size: var(--t-small); color: var(--green);
  border-bottom: 1px solid rgba(3,113,70,.35); padding-bottom: 2px;
}
.mm-cta:hover { border-bottom-color: var(--green); }
.mm-alt {
  display: block; margin-top: var(--s16); font-size: var(--t-caption);
  color: var(--slate); border: 0; font-family: var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.mm-alt:hover { color: var(--green); }

.mm-figs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); margin-bottom: var(--s24); }
.mm-fig { margin: 0; }
.mm-fig img {
  width: 100%; aspect-ratio: 21/9; object-fit: cover;
  border: 1px solid var(--rule); background: var(--mist);
}
.mm-fig figcaption {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: var(--slate); padding-top: 8px; line-height: 1.4;
}

.mm-grid { display: grid; gap: 2px 0; grid-template-columns: 1fr; }
@media (min-width: 700px) { .mm-grid { grid-template-columns: 1fr 1fr; gap: 2px var(--s32); } }
.mm-item {
  display: flex; align-items: flex-start; gap: var(--s16);
  padding: 9px 12px 9px 10px; border: 0; margin-left: -10px;
  transition: background .14s ease;
}
.mm-item:hover { background: var(--mist); }
.mm-icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--deep-teal); margin-top: 2px; }
.mm-item:hover .mm-icon { color: var(--green); }
.mm-text { display: block; min-width: 0; }
.mm-text b { display: block; font-weight: 700; font-size: var(--t-small); color: var(--navy); }
.mm-text span { display: block; font-size: var(--t-caption); color: var(--slate); margin-top: 2px; line-height: 1.45; }
.mm-item:hover .mm-text b { color: var(--green); }

.nav-toggle {
  margin-left: auto; background: none; border: 1px solid var(--rule); padding: 10px 14px;
  font: inherit; font-size: var(--t-small); font-weight: 700; color: var(--navy); cursor: pointer;
}
@media (min-width: 1080px) { .nav-toggle { display: none; } }

.drawer { display: none; border-top: 1px solid var(--rule); background: var(--paper); }
.drawer[data-open="true"] { display: block; }
@media (min-width: 1080px) { .drawer { display: none !important; } }
.drawer .wrap { padding-top: var(--s24); padding-bottom: var(--s96); }
.drawer h5 {
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--deep-teal); margin: var(--s24) 0 var(--s12);
}
.drawer a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; font-weight: 700; color: var(--navy);
  border: 0; border-bottom: 1px solid var(--rule);
}
.drawer .mm-icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--deep-teal); }

/* Sticky mobile CTA */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--green); border-top: 1px solid #025c39;
}
.sticky-cta a {
  display: block; text-align: center; color: #fff; font-weight: 700; font-size: var(--t-small);
  padding: 15px var(--s16); border: 0;
}
@media (min-width: 1080px) { .sticky-cta { display: none; } }
@media (max-width: 1079px) { body { padding-bottom: 52px; } }

/* -------------------------------------------------------------- 17. footer */
footer { background: var(--navy-deep); color: #A9BECE; padding: var(--band) 0 var(--s40); }
footer h5 {
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 var(--s16);
}
footer a { color: #C6D6E2; border: 0; font-size: var(--t-small); display: block; padding: 5px 0; }
footer a:hover { color: var(--teal); }
footer .f-grid { display: grid; gap: var(--s40); grid-template-columns: 1fr; }
@media (min-width: 700px)  { footer .f-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { footer .f-grid { grid-template-columns: repeat(4,1fr); } }
footer address { font-style: normal; font-size: var(--t-small); line-height: 1.7; }
.f-family {
  margin-top: var(--band); padding-top: var(--s24); border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s12);
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: #8FA8BB;
}
.f-family b { color: #C6D6E2; font-weight: 500; }
.f-strip {
  margin-top: var(--s24); padding-top: var(--s24); border-top: 1px solid var(--rule-dark);
  font-size: var(--t-caption); color: #8FA8BB; display: flex; flex-wrap: wrap; gap: var(--s16); justify-content: space-between;
}
.f-strip a { display: inline; padding: 0; font-size: var(--t-caption); }

/* --------------------------------------------------------------- 18. forms */
.field { display: flex; flex-direction: column; gap: var(--s8); margin-bottom: var(--s20); }
.field label { font-weight: 700; font-size: var(--t-small); color: var(--navy); }
.field label em { font-style: normal; font-family: var(--mono); font-size: var(--t-label); color: var(--slate); letter-spacing: .08em; margin-left: 6px; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--t-body); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); padding: 13px 15px; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--deep-teal); outline: 2px solid rgba(30,123,124,.25); outline-offset: 0; }
.field .err { font-family: var(--mono); font-size: var(--t-caption); color: var(--refused); display: none; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: var(--refused); }
.field[data-invalid="true"] .err { display: block; }
.form-note { font-size: var(--t-caption); color: var(--slate); margin-top: var(--s16); }
.form-ok {
  display: none; border: 1px solid var(--permitted); border-left-width: 3px;
  padding: var(--s20); color: var(--permitted); font-weight: 700; font-size: var(--t-small);
}
.form-ok[data-show="true"] { display: block; }

/* ---------------------------------------------------------- 19. cta block */
.cta-block { background: var(--navy-deep); }
.cta-block .wrap { padding-top: var(--band); padding-bottom: var(--band); }
.cta-block h2 { max-width: 18ch; }

/* --------------------------------------------------------------- 20. misc */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s8); }
.pill {
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); color: var(--slate); padding: 6px 11px;
}
.on-navy .pill { border-color: var(--rule-dark); color: #A9BECE; }

.callout {
  border-left: 3px solid var(--teal); background: var(--mist);
  padding: var(--s24) var(--s32); font-size: var(--t-small); color: var(--slate);
}
.callout strong { color: var(--navy); }
.band-mist .callout { background: var(--paper); }

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s24) var(--s40) var(--s24) 0;
  font-weight: 700; font-size: var(--t-sub); color: var(--navy); position: relative; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 2px;
  background: var(--teal); transform: translateY(-50%);
}
.faq summary::before {
  content: ''; position: absolute; right: 11px; top: 50%; width: 2px; height: 12px;
  background: var(--teal); transform: translateY(-50%); transition: opacity .15s ease;
}
.faq details[open] summary::before { opacity: 0; }
.faq details > div { padding: 0 0 var(--s32); }
.faq details p { color: var(--slate); font-size: var(--t-small); }

.timeline { display: grid; gap: 0; }
.timeline > div { display: grid; gap: var(--s12); padding: var(--s32) 0; border-top: 1px solid var(--rule); }
@media (min-width: 860px) { .timeline > div { grid-template-columns: 180px 1fr; gap: var(--s40); } }
.timeline .ph {
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--deep-teal);
}
.timeline p { color: var(--slate); font-size: var(--t-small); }

/* Scroll reveal */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); }
  .rise.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
}

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--navy-deep); color: #fff;
  padding: 12px 20px; z-index: 100; border: 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* Responsive type */
@media (max-width: 900px) {
  :root { --t-display: 44px; --t-h1: 34px; --t-h2: 27px; --t-h3: 21px; --t-lead: 17px; --band: 72px; }
  .stat b { font-size: 36px; }
}

/* ---------------------------------------------------- icon strip on a figure
   Drawn icons rather than generated ones: a generator asked for a calendar
   and a clock produces glyphs with invented numerals and bent hands, which
   looks wrong at exactly the size people notice. */
.icon-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s16);
  margin-top: var(--s24); padding-top: var(--s24); border-top: 1px solid var(--rule);
}
@media (min-width: 620px) { .icon-strip { grid-template-columns: repeat(3, 1fr); } }
.icon-strip div { display: flex; align-items: center; gap: 10px; }
.icon-strip .mm-icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--deep-teal); }
.icon-strip span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate); line-height: 1.3;
}
.on-navy .icon-strip { border-top-color: var(--rule-dark); }
.on-navy .icon-strip .mm-icon { color: var(--teal); }
.on-navy .icon-strip span { color: #A9BECE; }

/* ==========================================================================
   THE BTS CORPORATE BAR
   Fixed to the top of every page, transparent, mark centred, contact right.
   It sits above the Biolog navigation and carries no menu of its own.

   Transparent over scrolling content is the risk here: white type over a
   passing photograph is unreadable. The mark and the link therefore take
   their colour from a state class rather than being fixed, and a very light
   scrim carries them wherever the page beneath is busy.
   ========================================================================== */
.bts-bar {
  /* Absolute, not fixed and not in the flow. Absolute means it lies over
     whatever is at the top of the page — the dark hero on the home page —
     instead of occupying a strip of its own and revealing the page
     background as a band. It scrolls away with the page, so nothing ever
     passes behind it. */
  position: absolute; top: 0; left: 0; right: 0; z-index: 90;
  height: 56px; display: flex; align-items: center;
  background: none; pointer-events: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: color .28s ease;
  color: var(--navy);
}
.bts-bar .wrap { display: flex; align-items: center; position: relative; width: 100%; }

.bts-logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  pointer-events: auto; border: 0; display: block; line-height: 0;
  /* it is an anchor, so the site link colour would otherwise win and the
     mark would render green on every page */
  color: inherit;
}
.bts-mark { height: 34px; width: auto; display: block; color: inherit; }

/* The mark sits as a grey outline and fills in on hover. Two layers over one
   set of shapes, cross-faded — the outline strokes every shape, the solid
   fills the discs and the S with the letters masked out, so the B and T stay
   as counters rather than disappearing into a white blob. */
.bts-mark .bl-line, .bts-mark .bl-solid,
.bts-env .bl-line,  .bts-env .bl-solid { transition: opacity .22s ease; }
.bts-mark .bl-solid, .bts-env .bl-solid { opacity: 0; }
.bts-logo:hover .bl-line, .bts-logo:focus-visible .bl-line,
.bts-contact:hover .bl-line, .bts-contact:focus-visible .bl-line { opacity: 0; }
.bts-logo:hover .bl-solid, .bts-logo:focus-visible .bl-solid,
.bts-contact:hover .bl-solid, .bts-contact:focus-visible .bl-solid { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bts-mark .bl-line, .bts-mark .bl-solid,
  .bts-env .bl-line, .bts-env .bl-solid { transition: none; }
}

/* Outline grey at rest, reveal on hover. The reveal colour has to differ by
   surface: white is the intent, but white on nineteen white pages would be an
   invisible logo, so those reveal in navy. */
/* The reveal is whichever colour contrasts hardest with what the mark is
   lying on: black over the light pages, white over the dark hero. */
.bts-bar {
  --bts-rest: rgba(28,28,28,.38);
  --bts-reveal: #1A1A1A;
  --bts-glow: rgba(28,28,28,.26);
}
.bts-bar.on-dark {
  --bts-rest: rgba(255,255,255,.42);
  --bts-reveal: #FFFFFF;
  --bts-glow: rgba(255,255,255,.40);
}
.bts-logo { color: var(--bts-rest); transition: color .22s ease; }
.bts-logo:hover, .bts-logo:focus-visible { color: var(--bts-reveal); }
/* The glow: two gaussian blurs at zero offset, one tight and one wide. A
   single large blur reads as fog; the tight pass holds the outline while the
   wide one carries the halo.

   It is deliberately NOT transitioned. Animating a two-pass blur means the
   browser re-rasterises the filter on every frame of the hover, which is
   cheap on a laptop and visibly not cheap on a mid-range Android. The colour
   and the layer cross-fade carry the hover; the glow simply stays. */
.bts-mark {
  filter: drop-shadow(0 0 2px var(--bts-glow))
          drop-shadow(0 0 8px var(--bts-glow));
}

/* The envelope gets the monogram's treatment exactly: same resting grey, same
   two-pass glow, same outline that fills in and resolves to whichever of black
   or white contrasts hardest with the surface. The label travels with it —
   a black icon beside a grey word would read as a rendering fault. */
.bts-contact { color: var(--bts-rest); transition: color .22s ease; }
.bts-contact:hover, .bts-contact:focus-visible { color: var(--bts-reveal); }
.bts-env {
  width: 17px; height: 17px; flex: 0 0 auto; display: block; color: inherit;
  filter: drop-shadow(0 0 2px var(--bts-glow))
          drop-shadow(0 0 8px var(--bts-glow));
}
.bts-contact { text-shadow: 0 0 2px var(--bts-glow), 0 0 8px var(--bts-glow); }

.bts-contact {
  margin-left: auto; pointer-events: auto; border: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase;
}

/* The bar is never a surface. No background, no blur, no shadow, no border:
   the mark and the link float over whatever the page is showing, and hovering
   changes only the mark. Legibility is handled on the glyphs themselves with
   a soft shadow keyed to the surface, which travels with the mark rather than
   painting a band behind it. */


/* Pages that are not led by the dark hero start below the bar rather than
   under it, so nothing is ever hidden behind a transparent strip. */
/* Interior pages: the navigation starts below the mark. Both are on white,
   so there is no visible band — only the mark floating above the bar. */
body.bar-offset { padding-top: 56px; }
body.bar-offset header.nav { top: 0; }

/* On the hero page the bar floats over the artwork, as on bts.com.ng. */
/* The hero page: the hero starts at the very top and the mark lies on it. */
body.hero-top .site-top.over { top: 56px; }
body.hero-top .site-top.over.pinned { top: 0; }
body.hero-top .hero-dark.full .hd-in { padding-top: 176px; }

@media (max-width: 700px) {
  .bts-bar { height: 48px; }
  .bts-mark { height: 23px; }
  .bts-contact { font-size: 10px; letter-spacing: .12em; }
  /* Interior pages: the navigation starts below the mark. Both are on white,
   so there is no visible band — only the mark floating above the bar. */
body.bar-offset { padding-top: 56px; }
body.bar-offset header.nav { top: 0; }
  body.hero-top .site-top.over { top: 48px; }
  body.hero-top .site-top.over.pinned { top: 0; }
  body.hero-top .hero-dark.full { min-height: calc(100svh - 48px); }
  body.hero-top .hero-dark.full .hd-in { padding-top: 118px; }
}