/* ==========================================================================
   LifeTein design upgrade - Stage 1 (CSS only, no markup changes)
   Loads AFTER bootstrap.min.css and fantomstyle.css.
   Safe on all pages: nothing here depends on new classes or new HTML.
   ========================================================================== */

:root{
  /* Palette - keeps the existing brand red + navy, adds accessible variants */
  --lt-red:          #b62626;   /* brand red, as today */
  --lt-red-dark:     #8f1c1c;   /* hover / visited */
  --lt-red-on-dark:  #ff9a8f;   /* red family, readable on the dark footer */
  --lt-navy:         #24384f;   /* brand heading navy, as today */
  --lt-navy-soft:    #3d5570;
  --lt-ink:          #1f2733;   /* body text - darker than before for contrast */
  --lt-ink-soft:     #5a6676;   /* captions, meta, bylines */
  --lt-rule:         #e2e6ea;   /* hairlines */
  --lt-rule-strong:  #ccd4db;
  --lt-wash:         #f6f8f9;   /* very light panel */
  --lt-wash-warm:    #fbf7f3;   /* callout panel */

  /* Reading measure - the single biggest readability win */
  --lt-measure:      44rem;   /* ~70 characters at the 18px body size */

  /* Vertical rhythm */
  --lt-space:        1.25rem;
}

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY + READING MEASURE
   Body copy was running 795px / ~88 characters per line. 60-75 is the
   comfortable range, so paragraphs and lists are capped; tables, figures
   and images stay full width.
   -------------------------------------------------------------------------- */

body{
  color: var(--lt-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scoped to .fantom-body-block, which is where article prose lives. The
   homepage puts centred marketing blocks directly in .fantom-bodycontent with
   no .fantom-body-block, and capping those turns a centred block into an
   off-centre one. */
.fantom-body-block p,
.fantom-body-block ul,
.fantom-body-block ol,
.fantom-body-block blockquote,
.lt-page-intro{
  max-width: var(--lt-measure);
}
/* Belt and braces: anything explicitly centred keeps the full column width. */
.fantom-center-block,
.fantom-bodycontent [align="center"],
.fantom-bodycontent [style*="text-align:center"],
.fantom-bodycontent [style*="text-align: center"]{
  max-width: none;
}

.fantom-bodycontent p,
.fantom-bodycontent li{
  line-height: 1.65;
}

.fantom-bodycontent li + li{ margin-top: .35em; }

/* Intro paragraph gets a touch more presence without a new class on old pages */
.fantom-bodycontent h1 + p,
.lt-page-intro{
  font-size: 1.14em;
  line-height: 1.6;
  color: #2b3542;
}

/* Headings: tighter, clearer steps between levels */
.fantom-bodycontent h1,
.fantom-bodycontent h2,
.fantom-bodycontent h3,
.fantom-bodycontent h4{
  color: var(--lt-navy);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.004em;
}
/* The width cap on headings applies only to article headings, for the same
   reason as the body copy above. */
.fantom-body-block h1,
.fantom-body-block h2,
.fantom-body-block h3,
.fantom-body-block h4{
  max-width: var(--lt-measure);
}
.fantom-bodycontent h1{
  font-size: clamp(1.85rem, 1.4rem + 1.4vw, 2.3rem);
  margin: 0 0 .6em;
  max-width: 26rem;
}
.fantom-bodycontent h2{
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.55rem);
  margin: 2.1em 0 .55em;
  padding-bottom: .3em;
  border-bottom: 1px solid var(--lt-rule);
}
.fantom-bodycontent h3{
  font-size: 1.14rem;
  margin: 1.7em 0 .45em;
  color: var(--lt-navy-soft);
}
.fantom-bodycontent h4{
  font-size: 1rem;
  margin: 1.4em 0 .35em;
  color: var(--lt-navy-soft);
  text-transform: none;
}
/* First heading on the page should not push down from the band above it */
.fantom-bodycontent > h1:first-child,
.fantom-body-block > h1:first-child{ margin-top: 0; }

/* --------------------------------------------------------------------------
   2. LINKS
   Brand red kept, but underlines are offset so they stop colliding with
   descenders, and the hover state is a real state change.
   -------------------------------------------------------------------------- */

/* :where() keeps this at the specificity of .fantom-bodycontent on its own.
   That is deliberate: it beats the generic `a { color: ... }` rules, but loses
   to any component that colours its own links -- the tab strip, for one, whose
   white-on-red labels this rule was otherwise turning red-on-red. */
.fantom-bodycontent :where(a:not(.btn):not(.lt-skip)){
  color: var(--lt-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: rgba(182,38,38,.38);
  transition: color .12s ease, text-decoration-color .12s ease;
}
.fantom-bodycontent :where(a:not(.btn):not(.lt-skip)):hover,
.fantom-bodycontent :where(a:not(.btn):not(.lt-skip)):focus-visible{
  color: var(--lt-red-dark);
  text-decoration-color: currentColor;
}
a:focus-visible{
  outline: 2px solid var(--lt-red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. PAGE HEADER BANDS
   There were three stacked bands in near-identical grey, and the band
   title repeated the H1 immediately below it. The band is now a thin
   breadcrumb-weight strip instead of a competing title.
   -------------------------------------------------------------------------- */

/* NOTE: the main menu is floated and drops out of <header> into the top of this
   band. The page title uses clear:both to sit below it instead of relying on a
   magic padding number -- that also stops the title wrapping into the narrow
   strip beside the menu. */
.fantom-subheader{
  padding: 20px 0 18px;
  background: var(--lt-wash);
  border-bottom: 1px solid var(--lt-rule);
  box-shadow: none;
}
.fantom-subheader h1,
.fantom-subheader h2,
.fantom-subheader .fantom-subheader-title{
  clear: both;
  margin: 0;
}
/* The demoted band label: a small "eyebrow" above the real page H1. */
.fantom-subheader h2,
.fantom-subheader .fantom-subheader-title{
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lt-ink-soft);
  /* no white-space:nowrap here: Stage 2 removed the floated menu this used
     to dodge, and nowrap forces horizontal scroll on long titles at 390px. */
}
/* A handful of pages carry their ONLY h1 in this band (careers.html and the
   pages Stage 2 promoted). There the band title IS the page headline, so it
   keeps headline weight rather than being shrunk to an eyebrow. */
.fantom-subheader h1{
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--lt-navy);
  letter-spacing: -.004em;
}

/* Breadcrumbs */
.breadcrumb,
.lt-breadcrumb{
  background: transparent;
  padding: 0;
  margin: 0 0 1.4em;
  font-size: .86rem;
  color: var(--lt-ink-soft);
}
.breadcrumb a,
.lt-breadcrumb a{
  color: var(--lt-ink-soft);
  text-decoration: none;
}
.breadcrumb a:hover,
.lt-breadcrumb a:hover{
  color: var(--lt-red);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. SIDEBAR
   285px of heavy, loosely-spaced links was outweighing the article.
   Same width, much less visual weight.
   -------------------------------------------------------------------------- */

.fantom-sidebar{ font-size: .93rem; }

.fantom-sidebar h2,
.fantom-sidebar h3,
.fantom-sidebar h4,
.fantom-sidebar .fantom-sidebar-title{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lt-ink-soft);
  margin: 0 0 .6em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--lt-rule-strong);
}
.fantom-sidebar ul,
.fantom-sidebar ol{
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.8em;
}
.fantom-sidebar li{
  margin: 0;
  border-bottom: 1px solid var(--lt-rule);
}
.fantom-sidebar li:last-child{ border-bottom: 0; }
.fantom-sidebar li a{
  display: block;
  color: #44505f;
  text-decoration: none;
  line-height: 1.35;
}
.fantom-sidebar li a:hover,
.fantom-sidebar li a:focus-visible{
  color: var(--lt-red);
}
/* Some sidebar items are bare text rather than a link, so the padding lives on
   the li and the link just fills it. */
.fantom-sidebar li{ padding: .46em 0; }
.fantom-sidebar li a{ padding: 0; }

/* --------------------------------------------------------------------------
   5. TABLES
   -------------------------------------------------------------------------- */

.fantom-bodycontent table,
.lt-simple-table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: .95rem;
  line-height: 1.45;
}
.fantom-bodycontent thead th,
.lt-simple-table thead th{
  background: var(--lt-wash);
  color: var(--lt-navy);
  font-weight: 600;
  text-align: left;
  border-bottom: 2px solid var(--lt-rule-strong);
}
.fantom-bodycontent th,
.fantom-bodycontent td,
.lt-simple-table th,
.lt-simple-table td{
  padding: .6em .8em;
  border: 0;
  border-bottom: 1px solid var(--lt-rule);
  vertical-align: top;
}
.fantom-bodycontent tbody tr:hover,
.lt-simple-table tbody tr:hover{ background: #fafbfc; }
/* Numeric columns read better right-aligned and tabular */
.lt-num, td.lt-num, th.lt-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Wide tables scroll instead of pushing the whole page sideways.
   Below ~1200px the content column is narrower than a typical 5-6 column data
   table, so the table becomes its own scroll container.
   Scoped deliberately: :has(thead) picks out real data tables and leaves any
   legacy layout table alone, and the .lt-simple-table rule is kept separate so
   a browser without :has() still gets it. */
.table-responsive, .lt-table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1199px){
  /* .fantom-table-2 is the amino-acid data table used throughout tools.html.
     It has no thead, so the :has() rule below does not catch it. */
  .fantom-bodycontent .lt-simple-table,
  .fantom-bodycontent .fantom-table-2{
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199px){
  .fantom-bodycontent table:has(th){
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   6. CALLOUTS, FIGURES, CODE
   -------------------------------------------------------------------------- */

.lt-callout, .lt-note, .lt-keypoints{
  max-width: var(--lt-measure);
  margin: 1.7em 0;
  padding: 1.05em 1.2em;
  background: var(--lt-wash);
  border: 1px solid var(--lt-rule);
  border-left: 3px solid var(--lt-navy-soft);
  border-radius: 3px;
}
.lt-callout > :first-child,
.lt-note > :first-child,
.lt-keypoints > :first-child{ margin-top: 0; }
.lt-callout > :last-child,
.lt-note > :last-child,
.lt-keypoints > :last-child{ margin-bottom: 0; }
.lt-callout p, .lt-note p, .lt-keypoints p,
.lt-callout ul, .lt-note ul, .lt-keypoints ul{ max-width: none; }

.lt-caution{
  background: var(--lt-wash-warm);
  border-left-color: var(--lt-red);
}

blockquote{
  max-width: var(--lt-measure);
  margin: 1.6em 0;
  padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--lt-rule-strong);
  font-size: 1em;
  color: #39434f;
}

figure{ margin: 1.8em 0; }
figure img{ max-width: 100%; height: auto; }
figcaption, .lt-caption{
  margin-top: .6em;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--lt-ink-soft);
  max-width: var(--lt-measure);
}

code, kbd, samp, pre{
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em;
}
.fantom-bodycontent code{
  background: #f2f4f6;
  border: 1px solid var(--lt-rule);
  border-radius: 3px;
  padding: .1em .32em;
}
.fantom-bodycontent pre{
  max-width: 100%;
  overflow-x: auto;
  background: #f6f8f9;
  border: 1px solid var(--lt-rule);
  border-radius: 4px;
  padding: 1em 1.1em;
  line-height: 1.5;
}
.fantom-bodycontent pre code{ background: none; border: 0; padding: 0; }

/* Sequence strings - keep them from breaking mid-residue unreadably */
.lt-seq{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
  letter-spacing: .02em;
}

/* Byline / review line */
.lt-byline{
  max-width: var(--lt-measure);
  margin: -.2em 0 1.8em;
  padding-bottom: 1.1em;
  border-bottom: 1px solid var(--lt-rule);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--lt-ink-soft);
}

/* --------------------------------------------------------------------------
   7. FOOTER
   Brand red on near-black failed contrast. Same red family, lifted.
   -------------------------------------------------------------------------- */

footer a,
.fantom-footer a,
.fantom-bottom a,
.fantom-bottom-heading a,
.fantom-bottom-followus a,
.fantom-copyright a{
  color: var(--lt-red-on-dark);
  text-decoration: none;
}
footer a:hover,            footer a:focus-visible,
.fantom-footer a:hover,    .fantom-footer a:focus-visible,
.fantom-bottom a:hover,    .fantom-bottom a:focus-visible,
.fantom-bottom-heading a:hover, .fantom-bottom-heading a:focus-visible,
.fantom-bottom-followus a:hover,.fantom-bottom-followus a:focus-visible,
.fantom-copyright a:hover, .fantom-copyright a:focus-visible{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .16em;
}
footer a:focus-visible{ outline-color: #fff; }

.fantom-footer, .fantom-bottom, .fantom-copyright{ line-height: 1.6; }
.fantom-footer h2, .fantom-footer h3, .fantom-footer h4{
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
/* Copyright/address text was mid-grey on black; lift it to a comfortable
   reading contrast. */
.fantom-copyright, .fantom-copyright p, .fantom-copyright span{
  color: #b9bec4;
}

/* --------------------------------------------------------------------------
   8. BUTTONS - modernise Bootstrap 3's gradients away
   -------------------------------------------------------------------------- */

.btn{
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  border-radius: 4px;
  font-weight: 600;
  padding: .55em 1.15em;
  transition: background-color .12s ease, border-color .12s ease;
}
/* Button label colours are stated with enough specificity to beat both the
   body-link rule above and the per-page link colours some pages set. */
.btn-primary, .btn-danger,
.fantom-bodycontent a.btn-primary,
.fantom-bodycontent a.btn-danger{
  background: var(--lt-red);
  border-color: var(--lt-red);
  color: #fff !important;   /* beats .peptool * { color:#111 !important } on tools.html */
}
.btn-primary:hover, .btn-primary:focus,
.btn-danger:hover,  .btn-danger:focus,
.fantom-bodycontent a.btn-primary:hover,
.fantom-bodycontent a.btn-primary:focus,
.fantom-bodycontent a.btn-danger:hover,
.fantom-bodycontent a.btn-danger:focus{
  background: var(--lt-red-dark);
  border-color: var(--lt-red-dark);
  color: #fff !important;
}
.btn-default,
.fantom-bodycontent a.btn-default{
  background: #fff;
  border-color: var(--lt-rule-strong);
  color: var(--lt-navy);
}
.btn-default:hover, .btn-default:focus,
.fantom-bodycontent a.btn-default:hover,
.fantom-bodycontent a.btn-default:focus{
  background: var(--lt-wash);
  border-color: var(--lt-navy-soft);
  color: var(--lt-navy);
}

/* --------------------------------------------------------------------------
   9. VERTICAL RHYTHM + RESPONSIVE
   -------------------------------------------------------------------------- */

.fantom-body-block{ padding-bottom: 2.5rem; }
.fantom-bodycontent > *:last-child{ margin-bottom: 0; }

img{ max-width: 100%; height: auto; }

@media (max-width: 991px){
  .fantom-sidebar{
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lt-rule-strong);
  }
  .fantom-bodycontent h2{ margin-top: 1.7em; }
}

@media (max-width: 767px){
  .fantom-bodycontent p,
  .fantom-bodycontent li{ line-height: 1.6; }
  .fantom-subheader{ padding: 12px 0 10px; }
  .fantom-bodycontent table,
  .lt-simple-table{ font-size: .9rem; }
}

@media print{
  .fantom-sidebar, .fantom-subheader, .fantom-footer,
  #lt-cookie, .lt-cookie-banner, nav, .navbar{ display: none !important; }
  .fantom-bodycontent p, .fantom-bodycontent li{ max-width: none; }
  a{ color: #000 !important; text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   STAGE 2 - SHARED HEADER CHROME
   Still CSS only: no markup changes, so this applies to every page at once.

   The problem: <header class="fantom-header"> is a Bootstrap 3 float layout
   inside a box with a fixed min-height of 118px. The 340px-wide logo took the
   whole first row on its own, and the menu -- which is wider than the container
   once the search box is counted -- spilled out of the header and hung down
   over the grey page-title band below. The page title then had to be pushed
   clear of it. Two rows of chrome, ~200px, before any content.

   The fix: lay the header out with flexbox and size the logo to the menu rather
   than the other way round. Logo and menu now share one row on desktop and the
   header is as tall as its contents. Bootstrap still collapses the menu to the
   hamburger below 768px, which is left alone.
   ========================================================================== */

.fantom-header,
#header{
  min-height: 0;
  padding: 10px 0;
  background: #fff;
  border-bottom: 1px solid var(--lt-rule);
}

.fantom-header .container{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
/* Bootstrap's clearfix pseudo-elements would become flex items and add
   phantom gaps. */
.fantom-header .container::before,
.fantom-header .container::after{ display: none; }

.fantom-header .navbar-header{
  float: none;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
}
.fantom-header .navbar-brand.fantom-logo{
  float: none;
  display: block;
  height: auto;
  padding: 0;
  margin: 0;
}
/* The logo is a 340x96 asset. Capping the height is what frees the space the
   menu needs to sit on the same row. */
.fantom-header .navbar-brand.fantom-logo img{
  display: block;
  width: auto;
  height: auto;
  max-height: 46px;
}

.fantom-header .navbar-collapse{
  float: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border-top: 0;
  box-shadow: none;
}

/* Lay the menu out with flex rather than floats, so it can be right-aligned
   and wrap predictably instead of overflowing its parent. */
.fantom-header .navbar-nav{
  float: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 0;
  width: 100%;
}
.fantom-header .navbar-nav > li{ float: none; margin: 0; }
/* The existing stylesheet carries `nav a { color: #444 !important }`, which
   wins over any normal declaration. These few colour rules have to match it to
   take effect; that is the only reason !important appears in this file. */
.fantom-header .navbar-nav > li > a{
  padding: 10px 12px;
  color: var(--lt-navy) !important;
  font-weight: 600;
  white-space: nowrap;
}
/* The existing stylesheet sets `nav a:hover { background:#B62326 !important;
   color:#FFF !important }` -- a red block with a white label. Overriding only
   the colour leaves red text on that red background and the label disappears,
   so both properties are restated together, and the original pairing kept. */
.fantom-header .navbar-nav > li > a:hover,
.fantom-header .navbar-nav > li > a:focus,
.fantom-header .navbar-nav > li.open > a,
.fantom-header .navbar-nav > li.open > a:hover,
.fantom-header .navbar-nav > li.open > a:focus,
.fantom-header .navbar-nav > li.active > a{
  background: var(--lt-red) !important;
  color: #fff !important;
}

/* Dropdowns: Bootstrap 3 ships a hard border and a heavy shadow. */
.fantom-header .dropdown-menu{
  border: 1px solid var(--lt-rule-strong);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(20,30,45,.14);
  padding: .4rem 0;
}
.fantom-header .dropdown-menu > li > a{
  padding: .5rem 1.1rem;
  color: #3a4654 !important;
  font-weight: 400;
}
/* Same pairing inside the dropdowns, including the submenu parent, which takes
   the red background from :hover on the <li> rather than on the <a>. */
.fantom-header .dropdown-menu > li > a:hover,
.fantom-header .dropdown-menu > li > a:focus,
.fantom-header .dropdown-menu > li.open > a,
.fantom-header .dropdown-submenu:hover > a,
.fantom-header .dropdown-submenu.open > a,
.fantom-header .dropdown-submenu > a:hover,
.fantom-header .dropdown-submenu > a:focus{
  background: var(--lt-red) !important;
  color: #fff !important;
}

/* Every item sits on the menu's centre line, including the search box, which
   otherwise inherits padding that drops it onto what looks like a second row. */
.fantom-header .navbar-nav > li{
  display: flex;
  align-items: center;
}

/* Search box */
.fantom-header .top-search,
.fantom-header .top-search form,
.fantom-header .top-search form > div{
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1;
}
/* The old stylesheet nudges this down 40px with position:relative;top:40px to
   sit on the second row of the previous header. The header is one row now. */
.fantom-header .top-search{
  margin-left: .4rem;
  position: static;
  top: auto;
}
.fantom-header .top-search input[type="text"]{
  width: 190px;
  max-width: 100%;
  border: 1px solid var(--lt-rule-strong);
  border-radius: 4px;
  padding: .38em .7em;
  font-size: .9rem;
}
.fantom-header .top-search input[type="text"]:focus{
  outline: 2px solid var(--lt-red);
  outline-offset: 1px;
  border-color: var(--lt-red);
}

/* "Place Order" reads as the one action in the bar. */
.fantom-header .navbar-nav > li:last-child > a{
  margin-left: .5rem;
  padding: .55em 1.05em;
  background: var(--lt-red);
  color: #fff !important;
  border-radius: 4px;
}
.fantom-header .navbar-nav > li:last-child > a:hover,
.fantom-header .navbar-nav > li:last-child > a:focus{
  background: var(--lt-red-dark) !important;
  color: #fff !important;
}

/* With the header no longer overflowing, the page-title band closes up and the
   title no longer needs to clear anything. */
.fantom-subheader{ padding: 16px 0 14px; }
.fantom-subheader h1,
.fantom-subheader h2,
.fantom-subheader .fantom-subheader-title{
  clear: none;
  white-space: normal;
}

/* Skip link - visible only when focused by keyboard. */
.lt-skip{ position: absolute; left: -9999px; top: 0; z-index: 100000; }
.lt-skip:focus{
  left: 12px; top: 12px; width: auto;
  padding: .6em 1.1em;
  background: var(--lt-navy);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}

/* Between 768px and 991px the menu is still expanded but the container is only
   750px, so let it take its own full-width row under the logo. */
@media (max-width: 991px){
  .fantom-header .navbar-collapse{ flex: 1 0 100%; }
  .fantom-header .navbar-nav{ justify-content: flex-start; }
  .fantom-header .navbar-nav > li > a{ padding: 8px 10px; }
  .fantom-header .top-search input[type="text"]{ width: 150px; }
}

/* Below 768px Bootstrap collapses the menu behind the hamburger. */
@media (max-width: 767px){
  .fantom-header, #header{ padding: 8px 0; }
  .fantom-header .container{ flex-wrap: wrap; }
  .fantom-header .navbar-header{ flex: 1 1 auto; justify-content: space-between; width: 100%; }
  .fantom-header .navbar-toggle{ margin: 0; float: none; }
  .fantom-header .navbar-collapse{ flex: 1 0 100%; }
  .fantom-header .navbar-nav{ display: block; width: 100%; }
  .fantom-header .navbar-nav > li > a{ padding: 11px 0; }
  .fantom-header .navbar-nav > li:last-child > a{
    display: inline-block; margin: .5rem 0;
  }
  .fantom-header .top-search{ margin: .5rem 0; }
  .fantom-header .top-search input[type="text"]{ width: 100%; }
}


/* ==========================================================================
   STAGE 2 - FIXES FOR PRE-EXISTING FAULTS FOUND WHILE TESTING
   Each of these was already wrong before this stylesheet existed; they are
   repaired here because the fix is a rule rather than a page edit.
   ========================================================================== */

/* A fixed-width .container nested inside another container (or inside a grid
   column) keeps its 1170px width and pushes the page sideways. Seen on
   antibody_services.html and long-peptide-synthesis.html, where it made every
   width scroll horizontally. A nested container should always be fluid. */
.container .container,
.fantom-bodycontent [class*="col-"] > .container{
  width: auto;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Headings in the dark bottom band were set in the body heading navy
   (#24384f on #222 = 1.33:1 - effectively unreadable). */
.fantom-bottom-heading,
.fantom-bottom h2,
.fantom-bottom h3,
.fantom-bottom h4{
  color: #e9ecef;
}

/* Sub-heading grey was #7f7f7f on white = 4.00:1, just under the 4.5 minimum. */
.fantom-sub-heading,
p.fantom-sub-heading{
  color: #6a6a6a;
}

/* Long unbreakable strings -- journal citations, URLs, sequence runs -- were
   pushing narrow screens sideways (antibody_services.html at 390px). break-word
   only breaks when a word genuinely cannot fit, so normal text is unaffected. */
.fantom-bodycontent p,
.fantom-bodycontent li,
.fantom-bodycontent td,
.fantom-bodycontent th,
.fantom-bodycontent a,
.fantom-bodycontent h1,
.fantom-bodycontent h2,
.fantom-bodycontent h3{
  overflow-wrap: break-word;
}

/* .home-slide-copy h3 renders at 21px, so it needs the 4.5:1 body-text ratio
   rather than the 3:1 large-text one. #0174df gave 4.33:1 on the slide's
   #f8f8f8; this is the same blue a shade deeper, at 5.2:1. */
.home-slide-copy h3{
  color: #0166cc;
}

/* ==========================================================================
   SUBMIT BUTTONS  (added 2026-11-04)
   Replaces the icon-only <button><i class="fas fa-paper-plane"></i></button>
   on 13 form pages. That button had no text and no aria-label, so a screen
   reader announced nothing and the form could not be submitted non-visually;
   on 6 of those pages Font Awesome was never loaded, so it rendered as an
   empty yellow rectangle. A plain text label needs no icon font at all.
   ========================================================================== */

.lt-submit-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;              /* comfortable touch target on phones */
  padding: .6em 1.8em;
  background: var(--lt-red);
  border: 1px solid var(--lt-red);
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.lt-submit-btn:hover,
.lt-submit-btn:focus,
.fantom-bodycontent .lt-submit-btn:hover,
.fantom-bodycontent .lt-submit-btn:focus{
  background: var(--lt-red-dark);
  border-color: var(--lt-red-dark);
  color: #fff;
}
.lt-submit-btn:focus-visible{
  outline: 2px solid var(--lt-navy);
  outline-offset: 2px;
}
.lt-submit-btn:active{ transform: translateY(1px); }
.lt-submit-btn[disabled],
.lt-submit-btn[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   ICONS  (added 2026-11-04)
   Replaces Font Awesome. Only 14 icons were ever used on the site; they now
   ship as one SVG sprite of about 9KB (3.7KB over the wire) instead of a 45KB
   stylesheet plus three webfont files totalling ~138KB. Being vector, they
   stay sharp at any zoom or pixel density, which an icon font also managed but
   a PNG would not.
   Markup: <svg class="lt-ico" aria-hidden="true"><use href="/icons/lt-icons.svg#name"></use></svg>
   ========================================================================== */

.lt-ico{
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;        /* inherits the surrounding text colour */
  vertical-align: -.125em;   /* sits on the text baseline */
  flex-shrink: 0;
}

/* ==========================================================================
   LINK BUTTONS  (added 2026-11-04)
   Replaces the Peptide_Synthesis_Quote.png image button used 73 times across
   55 pages. The image was a fixed-resolution PNG, so it softened on high-DPI
   screens and its label was invisible to search engines and screen readers.
   Text costs less markup, stays sharp at any density, and gives the link real
   anchor text. Carries .btn too, so the body-link colour rule skips it.
   ========================================================================== */

.lt-btn,
a.lt-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .55em 1.5em;
  background: var(--lt-red);
  border: 1px solid var(--lt-red);
  border-radius: 4px;
  color: #fff !important;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.lt-btn:hover,  .lt-btn:focus,
a.lt-btn:hover, a.lt-btn:focus{
  background: var(--lt-red-dark);
  border-color: var(--lt-red-dark);
  color: #fff !important;
  text-decoration: none !important;
}
.lt-btn:focus-visible{
  outline: 2px solid var(--lt-navy);
  outline-offset: 2px;
}
.lt-btn:active{ transform: translateY(1px); }

/* The sidebar rule `.fantom-sidebar li a { display:block }` would stretch this
   button across the whole column and strand it beside the list bullet. Keep it
   shrink-to-fit there, as the image button was. */
.fantom-sidebar li a.lt-btn,
.fantom-sidebar a.lt-btn{
  display: inline-flex;
  width: auto;
  margin: .45em 0 .2em;
  padding: .45em 1.1em;
  min-height: 38px;
  font-size: .95rem;
}
/* Sidebar links carry a chevron via a::before in the Vante5 icon font. On a
   solid button that glyph lands inside the label, so suppress it there only. */
.fantom-sidebar a.lt-btn::before,
.fantom-sidebar a.lt-btn::after{ content: none !important; }

/* ==========================================================================
   PRODUCT TABLE CONTROLS  (added 2026-11-04)
   Replaces add_to_cart.png (36 uses) and pdf_down.gif (28 uses) with text.
   Both sat in dense product tables, so these are compact variants rather than
   full-height buttons. The cart links keep their schema.org itemprop="url".
   ========================================================================== */

.lt-btn-sm{
  min-height: 34px;
  padding: .35em 1em;
  font-size: .88rem;
}

/* "PDF" datasheet link - an outlined chip, filled on hover */
.lt-pdf{
  display: inline-block;
  padding: .22em .6em;
  background: #fff;
  border: 1px solid var(--lt-rule-strong);
  border-radius: 3px;
  color: var(--lt-red) !important;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.lt-pdf:hover,
.lt-pdf:focus{
  background: var(--lt-red);
  border-color: var(--lt-red);
  color: #fff !important;
  text-decoration: none !important;
}
.lt-pdf:focus-visible{
  outline: 2px solid var(--lt-navy);
  outline-offset: 2px;
}