:root {
    /* sampled from the subject: a sealed DOT specimen kit */
    --deep:      #05202A;   /* ground */
    --teal:      #0F4C5C;   /* live brand value */
    --teal-lift: #17677C;
    --mint:      #E4F0E2;
    --straw:     #E3CD86;   /* the specimen */
    --tempok:    #57C98A;   /* temperature strip in range */
    --accent:    #E8A33D;   /* primary action only */
    --accent-lift:#F3B255;
    --flag:      #D96A4F;

    --paper:  #F3F7F6;
    --card:   #FFFFFF;
    --ink:    #10262C;
    --muted:  #5C767E;
    --line:   #D6E3E2;
    --shadow: 0 1px 2px rgba(7,47,58,.06), 0 14px 38px rgba(7,47,58,.10);

    --font-display: "Avenir Next", Avenir, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
    --font-panel-serif: "Aptos Serif", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --pad: clamp(20px, 5vw, 72px);
    /* the hero band's single gutter: copy, index, track and facts all
       start and end on it, so nothing in the band is a special case */
    --gut: clamp(26px, 4.4vw, 60px);
    --ease: cubic-bezier(.22, 1, .36, 1);
    /* The wordmark, stored once. It used to be pasted inline twice, and the
       footer would have made three copies of the same 40 KB string. As a
       custom property the nav and the footer both point at one asset. */
    --logo: url("/assets/logo.png");
}

/* --------------------------------------------------------------------------
   Source-document panel card system — ALL THE PANELS COMBINED.docx
   The product data is intentionally visible at all times. There are no
   collapsible "What's included" controls in this card system.
   -------------------------------------------------------------------------- */
.trust_catalog_page .trust_path_grid_three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trust_catalog_page .panel_showcase_grid:has(.source_panel_card) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.trust_catalog_page .panel_showcase_single:has(.source_panel_card) {
  grid-template-columns: minmax(0, 520px);
}

.trust_catalog_page .source_panel_card {
  --source-accent: #17677c;
  --source-hover: #0f4c5c;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--source-accent) 48%, #d8dfdc);
  border-top: 5px solid var(--source-accent);
  border-radius: 3px;
  background: #f3f3f0;
  box-shadow: 0 8px 22px rgba(5, 32, 42, .07);
  color: #102b32;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.42;
  opacity: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Panel-card tones. Every category sits on one green ramp that runs dark to
   light in the order the chooser cards appear on its page, and each tone is
   the exact pair its own chapter header uses: --source-hover is that header's
   gradient start, the colour the card fills with on hover, --source-accent is
   the gradient end, the card's top rule. So a section, its cards and its
   closing band all carry one colour. Any edit to a .trust_chapter_* gradient
   has to be repeated here, and in the later copy of this block down the file.

   ramp   urine            hair/nail   oral     DNA
   dark   01 rapid         01 hair              01 informational
          02 DOT
          .                            single   02 legal
          03 non-DOT
   light  04 alcohol       02 nail              03 prenatal            */
.trust_catalog_page .source_panel_card.panel_tone_rapid,
.trust_catalog_page .source_panel_card.panel_tone_hair,
.trust_catalog_page .source_panel_card.panel_tone_dna-relationship {
  --source-accent: #123E39;
  --source-hover: #0A2E2B;
}

.trust_catalog_page .source_panel_card.panel_tone_dot {
  --source-accent: #1A5E57;
  --source-hover: #114A45;
}

.trust_catalog_page .source_panel_card.panel_tone_oral {
  --source-accent: #226A62;
  --source-hover: #17574F;
}

.trust_catalog_page .source_panel_card.panel_tone_dna-official {
  --source-accent: #1A5E57;
  --source-hover: #114A45;
}

.trust_catalog_page .source_panel_card.panel_tone_nondot {
  --source-accent: #337E96;
  --source-hover: #245E74;
}

.trust_catalog_page .source_panel_card.panel_tone_alcohol {
  --source-accent: #3A968D;
  --source-hover: #2C8078;
}

.trust_catalog_page .source_panel_card.panel_tone_nail,
.trust_catalog_page .source_panel_card.panel_tone_dna-family,
.trust_catalog_page .source_panel_card.panel_tone_dna-personal {
  --source-accent: #337E96;
  --source-hover: #245E74;
}

.trust_catalog_page .source_panel_card .source_panel_title {
  min-height: 0;
  margin: 0 0 13px;
  padding: 9px 6px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  font-variant: normal;
  letter-spacing: .015em;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
}

.trust_catalog_page .source_panel_info {
  margin-bottom: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--source-accent) 38%, #cbd4d1);
}

.trust_catalog_page .source_panel_info p {
  margin: 0 0 4px;
  color: inherit;
  font: inherit;
  opacity: 1;
}

.trust_catalog_page .source_panel_info p:last-child { margin-bottom: 0; }

.trust_catalog_page .source_panel_info strong,
.trust_catalog_page .source_panel_detects_label {
  color: var(--source-accent);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.35;
}

.trust_catalog_page .source_panel_detects_label {
  margin: 0 0 8px;
}

.trust_catalog_page .source_panel_detects {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1 1 auto;
  gap: 5px 12px;
  margin: 0;
  padding: 0 0 15px;
  list-style: none;
}

.trust_catalog_page .source_panel_detects.source_panel_detects_two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trust_catalog_page .source_panel_detects li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  opacity: 1;
}

.trust_catalog_page .source_panel_detects li > span {
  color: var(--source-accent);
  font-weight: 900;
}

.trust_catalog_page .source_panel_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 2px solid color-mix(in srgb, var(--source-accent) 52%, #c8d0ce);
}

.trust_catalog_page .source_panel_footer .catalog_price {
  margin: 0;
  color: var(--source-accent);
  font-family: inherit;
  font-size: clamp(19px, 1.65vw, 24px);
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: -.04em;
  line-height: 1;
  opacity: 1;
}

.trust_catalog_page .source_panel_footer .catalog_action {
  min-height: 38px;
  margin: 0;
  padding: 9px 13px;
  border: 1px solid var(--source-accent);
  border-radius: 2px;
  background: var(--source-accent);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.1;
  text-transform: none;
}

.trust_catalog_page .source_panel_card.panel_tone_dot .catalog_action {
  color: #182323;
}

.trust_catalog_page .source_panel_card:hover,
.trust_catalog_page .source_panel_card:focus-within {
  border-color: var(--source-hover);
  background: var(--source-hover);
  box-shadow: 0 13px 27px rgba(5, 32, 42, .18);
  color: #fff;
  transform: translateY(-2px);
}

.trust_catalog_page .source_panel_card:hover .source_panel_info,
.trust_catalog_page .source_panel_card:focus-within .source_panel_info,
.trust_catalog_page .source_panel_card:hover .source_panel_footer,
.trust_catalog_page .source_panel_card:focus-within .source_panel_footer {
  border-color: rgba(255, 255, 255, .52);
}

.trust_catalog_page .source_panel_card:hover .source_panel_info strong,
.trust_catalog_page .source_panel_card:focus-within .source_panel_info strong,
.trust_catalog_page .source_panel_card:hover .source_panel_detects_label,
.trust_catalog_page .source_panel_card:focus-within .source_panel_detects_label,
.trust_catalog_page .source_panel_card:hover .source_panel_detects li > span,
.trust_catalog_page .source_panel_card:focus-within .source_panel_detects li > span,
.trust_catalog_page .source_panel_card:hover .catalog_price,
.trust_catalog_page .source_panel_card:focus-within .catalog_price {
  color: #fff;
}

.trust_catalog_page .source_panel_card:hover .catalog_action,
.trust_catalog_page .source_panel_card:focus-within .catalog_action {
  border-color: #fff;
  background: #fff;
  color: var(--source-hover);
}

.trust_catalog_page .source_panel_card .catalog_action:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 1020px) {
  .trust_catalog_page .panel_showcase_grid:has(.source_panel_card),
  .trust_catalog_page .trust_path_grid_three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .trust_catalog_page .panel_showcase_grid:has(.source_panel_card),
  .trust_catalog_page .panel_showcase_single:has(.source_panel_card),
  .trust_catalog_page .trust_path_grid_three {
    grid-template-columns: 1fr;
  }

  .trust_catalog_page .source_panel_card { padding: 15px; }
  .trust_catalog_page .source_panel_detects.source_panel_detects_two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .trust_catalog_page .source_panel_detects.source_panel_detects_two {
    grid-template-columns: 1fr;
  }
}

  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #0A1518; --card: #102227; --ink: #E6F0EE;
      --muted: #90A8AE; --line: #1E353C;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 38px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"] {
    --paper: #0A1518; --card: #102227; --ink: #E6F0EE;
    --muted: #90A8AE; --line: #1E353C;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 38px rgba(0,0,0,.5);
  }
  :root[data-theme="light"] {
    --paper: #F3F7F6; --card: #FFFFFF; --ink: #10262C;
    --muted: #5C767E; --line: #D6E3E2;
    --shadow: 0 1px 2px rgba(7,47,58,.06), 0 14px 38px rgba(7,47,58,.10);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--font-display); -webkit-font-smoothing: antialiased;
  }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* ══ SECTION ARRIVAL ══════════════════════════════
     Below the hero nothing used to move except the chooser cards and the
     sheet rows, so the page peaked at the fold and then went flat: every
     heading, the facts strip and the legal note were already sitting
     there before you reached them. One reveal grammar now runs the whole
     page. Anything carrying data-rise starts a little low and
     transparent and lands as it comes into view, and --i staggers
     siblings so a group arrives as a group rather than all at once. */
  [data-rise] {
    opacity: 0; transform: translateY(15px);
    transition:
      opacity .62s ease calc(var(--i, 0) * .07s),
      transform .62s var(--ease) calc(var(--i, 0) * .07s);
  }
  [data-rise].in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    [data-rise] { opacity: 1; transform: none; transition: none; }
  }

  /* ══ THE LAMP ═════════════════════════════════════
     A circle of light that follows the pointer. It blends in screen mode,
     so it lifts the dark bands and all but disappears over the white
     sections: the page decides where it shows, not a set of hardcoded
     positions. Pointer devices only, and it never eats a click. */
  .lamp {
    position: fixed; top: 0; left: 0; z-index: 80;
    width: 338px; height: 338px; margin: -169px 0 0 -169px;
    pointer-events: none; opacity: 0;
    mix-blend-mode: screen;
    transition: opacity .55s ease;
    will-change: transform;
  }
  .lamp.on { opacity: .42; }
  .lamp::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      rgba(45,133,155,.26) 0%,
      rgba(31,114,136,.22) 22%,
      rgba(23,103,124,.16) 42%,
      rgba(23,103,124,.07) 60%,
      rgba(23,103,124,0) 74%);
  }
  /* nothing to follow on a touch screen */
  @media (hover: none), (pointer: coarse) { .lamp { display: none; } }

  /* ── site nav ─────────────────────────────────── */
  /* The bar sits in its own box, drawn in the hero's ground colour so the
     nav reads as part of the same object rather than as white space above
     it. Padding is larger than the old 14px/26px because a visible edge
     needs the logo held off it: at 62px tall the wordmark now clears the
     rule by 18px top and bottom, and 30px at the sides. */
  .sitebar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding: 14px 26px; background: #fff; color: var(--deep);
    border-bottom: 1px solid rgba(15,76,92,.12);
  }
  /* Only the redesign gets the box. The CURRENT view is a mock-up of the
     live site and has to keep looking like it, or the comparison lies. */
  #view-after .sitebar {
    padding: 18px 30px;
    border: 1px solid var(--deep);
  }
  /* The name used to be part of the raster, so it was set in whatever face
     the artwork was drawn in and never matched the headings beside it. Only
     the microscope is artwork now and the name is live text in the display
     face, which is the same font every h1 on the site uses. The footer
     lockup has always been built this way; the header now agrees with it.
     Everything scales from --lockup, so the responsive steps set one value
     rather than five. */
  .wordmark {
    --lockup: 62px;
    display: flex; align-items: center; gap: calc(var(--lockup) * .12);
    color: var(--teal); white-space: nowrap; text-decoration: none;
  }
  /* Same crop trick the footer uses: the box is the width of the glyph and
     the background is scaled to the whole 1236x336 asset, so the wordmark
     that follows it in the artwork simply falls outside the box. One asset,
     no second file to keep in step. */
  .wordmark_icon {
    display: block; flex: none;
    height: var(--lockup); width: calc(var(--lockup) * .78);
    background: var(--logo) left center / calc(var(--lockup) * 3.679) auto no-repeat;
  }
  .wordmark_type { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--lockup) * .085); }
  .wordmark_name {
    font-family: var(--font-display);
    font-size: calc(var(--lockup) * .29);
    font-weight: 700; letter-spacing: .012em; line-height: 1;
    text-transform: uppercase; color: #0B332E;
  }
  /* The artwork sets the tagline between two rules that run out to the width
     of the name above it. The rules are flex fillers rather than fixed
     widths, so they take whatever the centred text leaves and the lockup
     stays true at every --lockup step. */
  .wordmark_tag {
    display: flex; align-items: center; gap: calc(var(--lockup) * .075);
    font-family: var(--font-display);
    font-size: calc(var(--lockup) * .112);
    font-weight: 600; letter-spacing: .12em; line-height: 1;
    text-transform: uppercase; color: #55736E;
  }
  .wordmark_tag::before,
  .wordmark_tag::after {
    content: ''; flex: 1 1 auto; height: 1px; min-width: 8px;
    background: currentColor; opacity: .5;
  }
  @media (max-width: 620px) {
    .wordmark { --lockup: 44px; }
  }
  .sitenav { display: flex; align-items: center; gap: 22px; font-size: 13.5px; font-weight: 500; }
  .mobile_nav_trigger { display: none; }
  .sitenav a { color: var(--deep); text-decoration: none; opacity: .82; }
  .sitenav a:hover { opacity: 1; }
  .navgroup { position: relative; }
  .navgroup-trigger {
    appearance: none; display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 0; border: 0; background: transparent; cursor: pointer;
    color: var(--deep); font: inherit; opacity: .82;
  }
  .navgroup-trigger:hover,
  .navgroup-trigger:focus-visible,
  .navgroup.open .navgroup-trigger { opacity: 1; }
  .navgroup-caret {
    width: 7px; height: 7px; margin-top: -3px;
    border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .navgroup.open .navgroup-caret,
  .navgroup:focus-within .navgroup-caret { transform: translateY(3px) rotate(225deg); }
  .navgroup-panel {
    position: absolute; z-index: 50; left: -18px; top: calc(100% + 10px);
    min-width: 230px; padding: 22px 20px 18px;
    display: grid; gap: 12px;
    background: linear-gradient(160deg, #0E5062 0%, #0A3E4D 100%);
    border-top: 3px solid var(--accent);
    box-shadow: 0 18px 40px rgba(4,25,31,.22);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .navgroup-panel-dna { min-width: 292px; }
  .navgroup-panel::before {
    content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px;
  }
  .navgroup:hover .navgroup-panel,
  .navgroup:focus-within .navgroup-panel,
  .navgroup.open .navgroup-panel {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .navgroup-label {
    padding-bottom: 8px; color: var(--accent);
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em;
    text-transform: uppercase; border-bottom: 1px solid rgba(228,240,226,.18);
  }
  .sitenav .navgroup-panel a {
    color: var(--mint); opacity: .88; font-size: 14px; font-weight: 600;
  }
  .sitenav .navgroup-panel a:hover,
  .sitenav .navgroup-panel a:focus-visible { color: #fff; opacity: 1; }
  .catalog_card[id] { scroll-margin-top: 118px; }
  .sitenav .booknow {
    background: var(--teal); color: #fff; padding: 9px 18px;
    border-radius: 999px; opacity: 1; font-weight: 600;
  }
  .cart_trigger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(15,76,92,.24);
    border-radius: 4px;
    background: #F6F9F7;
    color: var(--deep);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
  }
  .cart_trigger:hover,
  .cart_trigger:focus-visible,
  .cart_trigger[aria-expanded="true"] {
    border-color: var(--accent);
    background: #FFF6E8;
  }
  /* Drawn as an SVG basket, handle and wheels. The old icon was three CSS
     boxes standing in for a cart and read as a shopping bag instead. */
  .cart_trigger_icon {
    width: 19px;
    height: 19px;
    flex: none;
  }
  .cart_count {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #092C36;
    font-family: var(--font-mono);
    font-size: 10px;
  }
  .navcount {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
    color: var(--flag); border: 1px dashed var(--flag);
    border-radius: 4px; padding: 3px 7px; white-space: nowrap;
  }
  @media (max-width: 900px) {
    .sitenav .hide-sm { display: none; }
    .sitenav { gap: 10px; }
    .mobile_nav_trigger {
      appearance: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 8px 10px;
      border: 1px solid rgba(15,76,92,.24);
      border-radius: 4px;
      background: #F6F9F7;
      color: var(--deep);
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }
    .mobile_nav_trigger[aria-expanded="true"] {
      border-color: var(--accent);
      background: #FFF6E8;
    }
    .mobile_nav_icon {
      display: grid;
      gap: 4px;
      width: 18px;
    }
    .mobile_nav_icon i {
      display: block;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform .2s ease, opacity .2s ease;
    }
    .mobile_nav_trigger[aria-expanded="true"] .mobile_nav_icon i:first-child { transform: translateY(6px) rotate(45deg); }
    .mobile_nav_trigger[aria-expanded="true"] .mobile_nav_icon i:nth-child(2) { opacity: 0; }
    .mobile_nav_trigger[aria-expanded="true"] .mobile_nav_icon i:last-child { transform: translateY(-6px) rotate(-45deg); }
    .sitenav .booknow { display: none; }
  }
  @media (max-width: 520px) {
    .sitebar { gap: 8px; padding-inline: 18px; }
    .sitenav { gap: 7px; }
    .cart_trigger { padding: 8px; }
    .cart_trigger_label { display: none; }
    .mobile_nav_trigger { padding: 8px; }
    .mobile_nav_trigger_label { display: none; }
  }

  body.mobile_nav_open { overflow: hidden; }
  .mobile_nav_scrim[hidden] { display: none !important; }
  .mobile_nav_scrim {
    position: fixed;
    z-index: 115;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    background: rgba(5,32,42,.5);
    opacity: 0;
    transition: opacity .22s ease;
  }
  .mobile_nav_scrim.open { opacity: 1; }
  .mobile_nav_panel {
    display: flex;
    flex-direction: column;
    width: min(88vw, 420px);
    height: 100%;
    padding: 24px 22px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    background:
      radial-gradient(circle at 100% 0%, rgba(23,103,124,.3), transparent 38%),
      #062A34;
    color: var(--mint);
    box-shadow: -24px 0 60px rgba(3,22,28,.3);
    transform: translateX(100%);
    transition: transform .24s ease;
  }
  .mobile_nav_scrim.open .mobile_nav_panel { transform: none; }
  .mobile_nav_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(228,240,226,.18);
  }
  .mobile_nav_head div { display: grid; gap: 4px; }
  .mobile_nav_head span {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .mobile_nav_head strong {
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1;
  }
  .mobile_nav_close {
    appearance: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(228,240,226,.24);
    border-radius: 50%;
    background: transparent;
    color: var(--mint);
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
  }
  .mobile_nav_links { display: grid; margin-top: 12px; }
  .mobile_nav_links details,
  .mobile_nav_toplink {
    border-bottom: 1px solid rgba(228,240,226,.16);
  }
  .mobile_nav_toplink,
  .mobile_nav_links summary {
    color: var(--mint);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
  }
  .mobile_nav_toplink {
    display: block;
    padding: 17px 2px;
    text-decoration: none;
  }
  .mobile_nav_links summary {
    position: relative;
    padding: 17px 30px 17px 2px;
    list-style: none;
    cursor: pointer;
  }
  .mobile_nav_links summary::-webkit-details-marker { display: none; }
  .mobile_nav_links summary::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 4px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 18px;
    transform: translateY(-50%);
  }
  .mobile_nav_links details[open] summary::after { content: '×'; }
  .mobile_nav_sublinks {
    display: grid;
    gap: 1px;
    padding: 0 0 13px 14px;
  }
  .mobile_nav_sublinks a {
    padding: 10px 12px;
    border-left: 2px solid rgba(232,163,61,.48);
    background: rgba(255,255,255,.035);
    color: rgba(228,240,226,.78);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
  }
  .mobile_nav_book,
  .mobile_nav_phone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin-top: 18px;
    padding: 12px 18px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
  }
  .mobile_nav_book {
    margin-top: auto;
    background: var(--accent);
    color: #092C36;
    box-shadow: 0 14px 30px rgba(232,163,61,.18);
  }
  .mobile_nav_phone {
    margin-top: 10px;
    border: 1px solid rgba(228,240,226,.3);
    color: var(--mint);
  }
  @media (min-width: 901px) {
    .mobile_nav_scrim { display: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile_nav_scrim,
    .mobile_nav_panel,
    .mobile_nav_icon i { transition: none; }
  }

  body.cart_open { overflow: hidden; }
  .cart_scrim[hidden] { display: none !important; }
  .cart_scrim {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    background: rgba(5,32,42,.48);
    opacity: 0;
    transition: opacity .24s ease;
  }
  .cart_scrim.open { opacity: 1; }
  .cart_drawer {
    display: flex;
    flex-direction: column;
    width: min(440px, 100%);
    height: 100%;
    overflow: hidden;
    background: #FFFFFF;
    color: var(--deep);
    border-left: 1px solid rgba(15,76,92,.2);
    box-shadow: -24px 0 60px rgba(5,32,42,.22);
    transform: translateX(100%);
    transition: transform .3s var(--ease);
  }
  .cart_scrim.open .cart_drawer { transform: translateX(0); }
  .cart_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px 22px;
    border-bottom: 1px solid rgba(15,76,92,.14);
  }
  .cart_eyebrow {
    margin: 0 0 5px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--interior_teal);
  }
  .cart_head h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.03em;
  }
  .cart_close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(15,76,92,.12);
    border-radius: 50%;
    background: #EFF5F2;
    color: var(--deep);
    font: inherit;
    font-size: 23px;
    cursor: pointer;
  }
  .cart_body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 28px 30px;
  }
  .cart_empty {
    margin: 48px 0;
    color: var(--interior_muted);
    font-size: 15px;
    line-height: 1.6;
  }
  .cart_items {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cart_item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid rgba(15,76,92,.13);
  }
  .cart_item_name {
    display: block;
    font-size: 15px;
    line-height: 1.3;
  }
  .cart_item_meta {
    display: block;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--interior_muted);
  }
  .cart_item_side {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cart_item_price {
    font-family: var(--font-display);
    font-weight: 750;
    white-space: nowrap;
  }
  .cart_remove {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--interior_muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .cart_remove:hover,
  .cart_remove:focus-visible { color: #B54435; }
  .cart_footer {
    padding: 18px 28px 24px;
    border-top: 1px solid rgba(15,76,92,.14);
    background: #FBFCFA;
  }
  .cart_notice {
    margin: 0 0 16px;
    padding: 12px 13px;
    border-left: 3px solid var(--accent);
    background: #FFF5E5;
    color: var(--interior_muted);
    font-size: 12px;
    line-height: 1.55;
  }
  .cart_total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    font-size: 15px;
  }
  .cart_total strong {
    font-family: var(--font-display);
    font-size: 24px;
  }
  .cart_checkout,
  .cart_continue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    border-radius: 4px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
  }
  .cart_checkout {
    gap: 9px;
    border: 1px solid var(--interior_amber);
    background: var(--interior_amber);
    color: #092C36;
  }
  .cart_continue {
    margin-top: 9px;
    border: 1px solid rgba(15,76,92,.2);
    background: #FFFFFF;
    color: var(--deep);
  }
  @media (max-width: 480px) {
    .cart_head,
    .cart_body,
    .cart_footer { padding-inline: 21px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cart_scrim,
    .cart_drawer { transition: none; }
  }

  /* ══════════ SPECIMEN HERO ══════════ */
  /* One screen, hero to facts strip.
     The band owns the full viewport minus the sticky bar above it, and it
     is a column: copy+index, then the track, then the facts strip as its
     floor. Only the first row grows, so on a tall screen the extra height
     goes to the hero and the track and facts keep their tuned spacing.
     --barh is published by site.js from the real .sitebar height, because
     that bar changes height across breakpoints and a guessed number would
     leave a sliver of the next section showing on some of them.
     svh, not vh, so mobile browser chrome does not push the strip under
     the fold on first paint. */
  .hero {
    position: relative; overflow: hidden; color: var(--mint);
    min-height: calc(100svh - var(--barh, 0px));
    display: flex; flex-direction: column;
    background:
      radial-gradient(96% 74% at 74% 30%, rgba(23,103,124,.34) 0%, rgba(5,32,42,0) 66%),
      linear-gradient(168deg, #0A3444 0%, #072935 52%, #04191F 100%);
  }

  .hero-inner {
    position: relative; z-index: 2;
    flex: 1 1 auto; min-height: 0;
    display: grid; align-items: stretch;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    /* Side gutters still match the band. The vertical pair is measured in vh
       instead, because this row now has to share one screen with the track
       and the facts strip: on a short laptop it gives room back, and on a
       tall display it returns to the original gutter. */
    padding: clamp(22px, 3.6vh, 60px) var(--gut) clamp(18px, 3vh, 64px);
    column-gap: clamp(26px, 3.4vw, 54px);
  }
  .hero > .track,
  .hero > .facts { flex: 0 0 auto; }
  .hero-copy {
    width: 100%; max-width: 640px;
    align-self: center; justify-self: start;
  }

  /* ══ THE SERVICE INDEX ════════════════════════════
     The right slot of the hero. Eight services decode into place one
     after another, each name resolving out of random glyphs the way a
     custody form gets filled in. Monospace throughout, because a
     proportional face would jitter while the letters are still random. */
  /* The frame used to be absolute inside a fixed-height figure, so anything
     the list could not fit was simply clipped, and the footer line was the
     thing that lost. It is a grid now: the panel is at least the old height
     and grows past it when the type needs the room, so the last line always
     lands inside the border. */
  .shot {
    margin: 0;   /* figure ships with a 40px side margin of its own */
    position: relative; align-self: stretch;
    justify-self: end; width: min(100%, 520px);
    display: grid;
    min-height: clamp(320px, 40vh, 472px);
    opacity: 0; animation: fadeUp .9s var(--ease) 1.3s forwards;
  }
  /* It no longer runs off the edge, so it needs its own edge: a hairline
     and a shadow, the same 3px corner the services sheet uses. */
  /* A one-cell grid, and the index is its only in-flow child. That is what
     makes the panel stretch to the frame when the frame is the taller of
     the two and grow the frame when the type is, which is the behaviour the
     old absolute layout got in one direction only. */
  .shot-frame {
    position: relative; overflow: hidden;
    display: grid; grid-template-rows: 1fr;
    border-radius: 3px; border: 1px solid rgba(228,240,226,.16);
    box-shadow: 0 22px 54px rgba(2,14,19,.5);
  }

  /* The plate the index sits on. One flat dark value, nothing layered over
     it: a gradient and a light pass were both washing the top rows out
     just as they were being typed. Contrast is now the same on line 01 as
     it is on line 06. */
  .shot-plate {
    position: absolute; inset: 0; pointer-events: none;
    background: #05202A;
  }
  /* a lit top edge, so the panel sits on the band rather than in it */
  .shot-frame::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(228,240,226,.14);
  }

  /* framing marks, so the slot reads as a viewfinder. Held out of flow so
     the frame's single grid cell belongs to the index alone. */
  .shot-marks { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
  .shot-marks i {
    position: absolute; width: 17px; height: 17px; pointer-events: none; z-index: 4;
    border: 0 solid rgba(228,240,226,.4);
  }
  .shot-marks i:nth-child(1) { top: 16px; left: 16px;  border-top-width: 1px; border-left-width: 1px; }
  .shot-marks i:nth-child(2) { top: 16px; right: 16px; border-top-width: 1px; border-right-width: 1px; }
  .shot-marks i:nth-child(3) { bottom: 16px; left: 16px;  border-bottom-width: 1px; border-left-width: 1px; }
  .shot-marks i:nth-child(4) { bottom: 16px; right: 16px; border-bottom-width: 1px; border-right-width: 1px; }

  /* ── the index itself ── */
  .svcs {
    position: relative; z-index: 2;
    display: grid; grid-template-rows: auto 1fr auto;
    padding: clamp(16px, 2.5vh, 34px) clamp(22px, 2.4vw, 32px);
    font-family: var(--font-mono);
  }
  .svcs-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding-bottom: 11px;
    border-bottom: 1px solid rgba(228,240,226,.15);
    font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase;
    color: rgba(228,240,226,.55);
  }
  .svcs-count { color: var(--accent); font-variant-numeric: tabular-nums; }
  .svcs-count b { font-weight: 700; }

  /* The scan line rides the row being typed. It starts at the top of the
     list and steps down as the index fills in, so the eye always knows
     which line the machine is on. */
  .scanbar {
    position: absolute; left: 10px; right: 10px; top: 0; height: 30px;
    pointer-events: none; opacity: 0;
    background: linear-gradient(90deg,
      rgba(232,163,61,.17) 0%, rgba(232,163,61,.07) 52%, rgba(232,163,61,0) 100%);
    border-top: 1px solid rgba(232,163,61,.42);
    border-bottom: 1px solid rgba(232,163,61,.12);
    transition: transform .32s var(--ease), height .32s var(--ease), opacity .35s ease;
  }
  .svcs.scanning .scanbar { opacity: 1; }

  .svc-list {
    margin: 0; padding: clamp(8px, 1.4vh, 14px) 0 0; list-style: none;
    display: grid; align-content: start; gap: clamp(4px, 1.1vh, 12px);
  }
  .svc {
    position: relative; z-index: 1; overflow: hidden;
  }
  .svc-link {
    display: grid; grid-template-columns: 26px minmax(0, 1fr) 12px;
    align-items: baseline; column-gap: 10px; padding: 2px 5px 2px 9px;
    color: inherit; text-decoration: none; border-radius: 2px;
    transition: background .2s ease, transform .2s var(--ease);
  }
  .svc-link::after {
    content: "\2197"; grid-column: 3; grid-row: 1 / 3; align-self: center;
    color: var(--accent); font-size: 12px; opacity: 0; transform: translateX(-4px);
    transition: opacity .2s ease, transform .2s var(--ease);
  }
  .svc-link:hover, .svc-link:focus-visible {
    background: rgba(228,240,226,.055); transform: translateX(3px); outline: none;
  }
  .svc-link:hover::after, .svc-link:focus-visible::after {
    opacity: 1; transform: none;
  }
  /* amber bar marks the line currently decoding */
  .svc::before {
    content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px;
    background: var(--accent); transform: scaleY(0); transform-origin: center;
    transition: transform .25s var(--ease);
  }
  .svc.live::before { transform: scaleY(1); }
  .svc.done::before { transform: scaleY(1); background: rgba(228,240,226,.2); }

  .svc .ix {
    font-size: 10px; letter-spacing: .1em; font-weight: 600;
    color: rgba(228,240,226,.3); font-variant-numeric: tabular-nums;
    transition: color .3s ease;
  }
  .svc.live .ix { color: var(--accent); }
  .svc.done .ix { color: rgba(228,240,226,.5); }

  .svc .txt {
    font-size: clamp(13.5px, 1.35vw, 16px); line-height: 1.3;
    letter-spacing: .01em;
    /* one line, always: a row that reflows mid-decode would make the scan
       line jump height under it */
    white-space: pre;
  }
  /* locked characters read as final, the tail is still searching */
  .svc .lk { color: var(--mint); font-weight: 600; }
  .svc .sc { color: rgba(232,163,61,.5); font-weight: 400; }
  /* The write head. It sits in the character cell the machine is about to
     strike, so it advances through the word rather than trailing it. The
     cell is one character wide either way, which keeps the line from
     shifting as the head moves. */
  .svc .wh {
    color: #FFFFFF; font-weight: 800; visibility: hidden;
    text-shadow: 0 0 8px rgba(255,255,255,.45);
  }
  .svc.live .wh { visibility: visible; animation: whBlink .56s steps(1) infinite; }
  @keyframes whBlink { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .5; } }

  .svc .sp {
    grid-column: 2; margin-top: 3px;
    font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
    color: rgba(228,240,226,.42);
    opacity: 0; transform: translateY(-3px);
    transition: opacity .4s ease, transform .4s var(--ease);
  }
  .svc.done .sp { opacity: 1; transform: none; }

  /* The sound toggle is parked in the bottom-right corner, so the status
     line keeps clear of it rather than running underneath. */
  .svcs-foot {
    display: flex; align-items: center; gap: 8px;
    padding-top: 12px; padding-right: 118px;
    border-top: 1px solid rgba(228,240,226,.15);
    font-size: 10px; letter-spacing: .17em; text-transform: uppercase;
    color: rgba(228,240,226,.5);
  }
  .caret {
    width: 7px; height: 12px; flex: none; background: var(--accent);
    animation: caret 1s steps(1) infinite;
  }
  @keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

  /* sound is off until asked for, so the page never makes noise on load */
  .snd {
    position: absolute; right: 15px; bottom: 14px; z-index: 5;
    appearance: none; cursor: pointer; display: inline-flex; align-items: center;
    gap: 6px; min-height: 26px; padding: 5px 10px; border-radius: 999px;
    background: rgba(4,25,31,.7); color: rgba(228,240,226,.6);
    border: 1px solid rgba(228,240,226,.22);
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .15em;
    text-transform: uppercase;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
  }
  .snd:hover { color: var(--mint); border-color: rgba(228,240,226,.5); }
  .snd[aria-pressed="true"] {
    color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .snd svg { width: 11px; height: 11px; flex: none; }
  .snd .wave { opacity: 0; transition: opacity .2s ease; }
  .snd[aria-pressed="true"] .wave { opacity: 1; }

  @media (max-width: 900px) {
    .hero-inner { grid-template-columns: minmax(0, 1fr); }
    .hero-copy { max-width: none; }
    .shot {
      width: 100%; max-width: none; justify-self: stretch;
      min-height: 372px; margin-top: 30px;
    }
    .svc .sp { display: none; }   /* names only, so six lines still fit */
    /* The panel is narrow enough here that reserving room beside the status
       line would break it over three lines. It takes the full width instead
       and the sound button gets its own band underneath. */
    .svcs-foot { padding-right: 0; }
    .svcs { padding-bottom: 46px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .shot { opacity: 1; animation: none; }
    .caret { animation: none; }
    .svc .sp { opacity: 1; transform: none; }
    .svc.live .wh { animation: none; }
    .scanbar { display: none; }
  }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .17em;
    text-transform: uppercase; color: rgba(228,240,226,.7);
    margin-bottom: clamp(12px, 2.4vh, 22px);
    opacity: 0; animation: fadeUp .7s var(--ease) .25s forwards;
  }
  .eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--tempok); flex: none;
    animation: ping 2.4s ease-out infinite;
  }
  /* closed: the dot stops pulsing and goes quiet, so the badge never lies */
  .eyebrow.shut .dot { background: rgba(228,240,226,.42); animation: none; }
  @keyframes ping {
    0%   { box-shadow: 0 0 0 0 rgba(87,201,138,.5); }
    70%  { box-shadow: 0 0 0 11px rgba(87,201,138,0); }
    100% { box-shadow: 0 0 0 0 rgba(87,201,138,0); }
  }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Sized by width and by height. The headline runs three lines, so on a
     short screen it is the single biggest claim on the vertical budget and
     a width-only clamp would keep it at 72px on a 720px-tall laptop while
     the facts strip fell off the bottom. min() lets whichever axis is
     tighter win. */
  .hero h1 {
    margin: 0;
    font-size: min(clamp(38px, 5.6vw, 72px), 7.8vh);
    line-height: 1.02;
    letter-spacing: -.034em; font-weight: 700; max-width: 16ch; text-wrap: balance;
  }
  .hero h1 .w {
    display: inline-block; overflow: hidden; vertical-align: bottom;
    padding-block: .1em; margin-block: -.1em;
  }
  .hero h1 .w > i {
    display: inline-block; font-style: normal; transform: translateY(112%);
    animation: wordUp .8s var(--ease) forwards;
  }
  @keyframes wordUp { to { transform: translateY(0); } }
  .hero h1 .w:nth-of-type(1) > i { animation-delay: .32s; }
  .hero h1 .w:nth-of-type(2) > i { animation-delay: .38s; }
  .hero h1 .w:nth-of-type(3) > i { animation-delay: .44s; }
  .hero h1 .w:nth-of-type(4) > i { animation-delay: .50s; }
  .hero h1 .w:nth-of-type(5) > i { animation-delay: .56s; }
  .hero h1 .w:nth-of-type(6) > i { animation-delay: .62s; }
  .hero h1 .w:nth-of-type(7) > i { animation-delay: .68s; }

  .hero h1 .place { position: relative; color: var(--accent); }
  .hero h1 .place::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: 3px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    animation: sweep .8s var(--ease) 1s forwards;
  }
  @keyframes sweep { to { transform: scaleX(1); } }

  .hero .sub {
    margin: clamp(12px, 2.4vh, 22px) 0 0;
    font-size: clamp(15.5px, 1.45vw, 17.5px); line-height: 1.55;
    color: rgba(228,240,226,.82); max-width: 40ch;
    opacity: 0; animation: fadeUp .8s var(--ease) 1.02s forwards;
  }
  .cta-row {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-top: clamp(16px, 3.2vh, 30px);
    opacity: 0; animation: fadeUp .8s var(--ease) 1.18s forwards;
  }
  .btn {
    position: relative; display: inline-flex; align-items: center; gap: 9px;
    text-decoration: none; font-size: 15px; font-weight: 600;
    padding: 16px 30px; min-height: 44px;
    transition: background .2s ease, border-color .2s ease, box-shadow .3s ease;
    will-change: transform;
  }
  .btn-primary {
    background: var(--accent); color: #2A1B04;
    box-shadow: 0 8px 26px rgba(232,163,61,.3);
  }
  .btn-primary:hover { background: var(--accent-lift); box-shadow: 0 12px 40px rgba(232,163,61,.5); }
  .btn-ghost { border: 1.5px solid rgba(228,240,226,.42); color: var(--mint); }
  .btn-ghost:hover { border-color: var(--mint); background: rgba(228,240,226,.09); }

  /* ══ THE VISIT, AS A TRACK ═══════════════════════
     Not four cells. One line the visitor moves along, the way a
     specimen moves through custody. The amber fill travelling toward
     the next node IS the step timer, so nothing extra has to tick. */
  .track {
    position: relative; z-index: 2;
    /* Left padding matches .hero-inner so node 01 and its label land on the
       same edge as the Book Online button above. Top and bottom are tuned so
       node 01 sits the same distance from the Book Online button above it as
       from the Walk-ins fact below it. */
    padding: clamp(22px, 3.6vh, 73px) var(--gut) clamp(14px, 2.2vh, 22px);
    opacity: 0; animation: fadeUp .8s var(--ease) 1.4s forwards;
  }
  .stops {
    position: relative;
    /* Three equal columns plus a node-sized fourth, so the last node lands
       on the right gutter and the rail uses the whole width. Each column is
       (100% - 18px) / 3, which puts the nodes at exactly 0, 1/3, 2/3 and 1
       of the rail: the fill fractions still land dead on them. */
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 18px;
  }
  /* the rail the nodes sit on, drawn from first node centre to last.
     Nodes start their column, so centre 01 is 9px in (half a node). */
  .stops::before, .stops .fill {
    content: ""; position: absolute; top: 8px; height: 2px;
    left: 9px; right: 9px;
  }
  .stops::before { background: rgba(228,240,226,.17); }
  .stops .fill {
    background: linear-gradient(90deg, rgba(232,163,61,.55), var(--accent));
    transform-origin: left; transform: scaleX(0);
  }

  .stop {
    appearance: none; border: 0; background: none; cursor: pointer;
    font-family: var(--font-display); color: rgba(228,240,226,.5);
    display: grid; justify-items: start; text-align: left;
    padding: 0 clamp(12px, 1.8vw, 26px) 0 0; min-height: 44px;
    transition: color .4s ease;
  }
  .stop:hover { color: rgba(228,240,226,.85); }
  /* the last step sits in an 18px column, so it hangs its label back to the
     left of its node and reads as the end of the line */
  .stop:last-child {
    justify-self: end; justify-items: end; text-align: right;
    width: max-content; max-width: 21ch;
    padding: 0 0 0 clamp(12px, 1.8vw, 26px);
  }

  .stop .node {
    position: relative; z-index: 1;
    width: 18px; height: 18px; border-radius: 50%;
    background: #04191F; border: 2px solid rgba(228,240,226,.3);
    transition: border-color .4s ease, background .4s ease, transform .4s var(--ease);
  }
  .stop .node::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%;
    background: var(--accent); transform: scale(0);
    transition: transform .35s var(--ease);
  }
  /* passed */
  .stop.done .node { border-color: var(--accent); background: var(--accent); }
  /* current */
  .stop[aria-current="true"] .node {
    border-color: var(--accent); transform: scale(1.28);
    box-shadow: 0 0 0 6px rgba(232,163,61,.14);
  }
  .stop[aria-current="true"] .node::after { transform: scale(1); }

  .stop .step {
    margin-top: 13px;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .19em;
    text-transform: uppercase; opacity: .62;
  }
  .stop .name {
    margin-top: 4px;
    font-size: clamp(12.5px, 1.25vw, 15px); font-weight: 700; letter-spacing: -.012em;
  }
  .stop .desc {
    margin-top: 6px; font-size: 11.5px; line-height: 1.42;
    color: var(--mint); max-width: 100%;
    opacity: 0; transform: translateY(-4px);
    transition: opacity .4s ease, transform .4s var(--ease);
  }
  .stop[aria-current="true"] { color: var(--mint); }
  .stop[aria-current="true"] .step { color: var(--accent); opacity: 1; }
  .stop[aria-current="true"] .desc { opacity: .55; transform: none; }
  /* The caption stays in flow at opacity 0, so it already holds its own
     room. No extra reserve needed under the stops. */
  .stops { padding-bottom: 0; }

  @media (max-width: 780px) {
    .stop .desc { display: none; }
    .stop .name { font-size: 11px; }
    .stops { padding-bottom: 4px; }
    .track { padding: 50px 26px 22px; }
  }
  /* drop the secondary code before the two labels can collide */
  @media (max-width: 900px) {
    .kit .formcode { display: none; }
  }

  /* ── key facts: value over label, no cells, no rules ──
     Separation comes from spacing alone, so the row never reads as a table. */
  .facts {
    /* Equal columns would leave uneven-looking gaps, because the
       labels are different lengths. Sizing each to its content and letting
       space-between share the remainder gives identical gaps, with the row
       starting and ending on the band's gutter. */
    display: flex; flex-wrap: wrap; align-items: start;
    justify-content: space-between;
    gap: 20px 24px;
    background: #04191F;
    /* the hero's gradient ends on this exact value, so the only thing
       marking the join is a hairline: the strip reads as the hero's floor
       rather than as a second dark block under it */
    box-shadow: inset 0 1px 0 rgba(228,240,226,.07);
    padding: clamp(14px, 2.4vh, 22px) var(--gut) clamp(15px, 2.6vh, 24px);
  }
  .facts span { display: grid; gap: 4px; align-content: start; }
  .facts b {
    font-family: var(--font-display); font-size: 16px; font-weight: 600;
    letter-spacing: -.008em; text-transform: none; line-height: 1.2;
    color: var(--mint); font-variant-numeric: tabular-nums;
  }
  .facts i {
    font-style: normal;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em;
    text-transform: uppercase; color: rgba(228,240,226,.55); line-height: 1.4;
  }
  /* one row this narrow would put two words on every line */
  @media (max-width: 780px) {
    .facts {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 20px;
    }
  }

  /* ── keeping the hero on one screen when the screen is short ──
     These two blocks sit here, after every rule they override, because at
     equal specificity the later rule wins and they were being ignored
     further up the file.

     Short laptops. The eight service names and the four step names are the
     payload; their one-line qualifiers are not, and dropping those is what
     buys the rows enough height to stay above the fold. Same trade the
     narrow breakpoint already makes. */
  @media (min-width: 901px) and (max-height: 860px) {
    .svc .sp { display: none; }
    .stop .desc { display: none; }
  }

  /* Genuinely short desktop screens, the 1280x720 class of machine. The
     standfirst gets a wider measure so it sets in three lines instead of
     four, and the two strips give back what padding they can spare. */
  @media (min-width: 901px) and (max-height: 800px) {
    .hero .sub { max-width: 54ch; }
    .track { padding-top: 10px; padding-bottom: 10px; }
    .facts { padding-block: 11px 12px; }
    .facts b { font-size: 15px; }
  }

  /* Sticky mobile action bar lives in TSL-sticky-action-bar.html now. */

  /* ── chooser ──────────────────────────────────── */
  /* Tinted ground so the white cards sit on something rather than reading
     as blank paper. No grid. */
  .chooser {
    position: relative; overflow: hidden;
    background:
      linear-gradient(90deg, rgba(15,76,92,.035) 1px, transparent 1px),
      linear-gradient(180deg, rgba(15,76,92,.035) 1px, transparent 1px),
      radial-gradient(circle at 8% 12%, rgba(232,163,61,.13), transparent 24%),
      linear-gradient(135deg, #FBFCF8 0%, #EFF5F2 100%);
    background-size: 42px 42px, 42px 42px, auto, auto;
    padding: clamp(44px, 5vw, 70px) clamp(26px, 4.4vw, 60px) clamp(46px, 5vw, 74px);
  }
  .chooser > * { position: relative; z-index: 1; }
  .chooser-head {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 12px; margin-bottom: 28px;
  }
  .chooser-head h2 {
    position: relative; margin: 0; padding-left: 16px;
    font-size: clamp(21px, 2.4vw, 29px); letter-spacing: -.024em; font-weight: 700;
  }
  /* amber tick, the section marker repeated on the dark menu band below */
  .chooser-head h2::before {
    content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
    width: 4px; background: var(--accent);
  }
  .chooser-head p {
    margin: 0; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; }
  .card {
    /* Each card owns one colour. --tone paints, --tone-ink is the
       darkened version that stays readable as text. */
    --tone: var(--teal-lift);
    --tone-ink: var(--teal-lift);
    appearance: none; font: inherit; text-align: left;   /* card 01 is a button */
    position: relative; display: grid; gap: 10px;
    /* Label, heading, body, link. The body row takes the slack, so the
       three "See what we test" links sit on one line across all three
       cards even though card 02 runs a line shorter than its neighbours.
       align-content: start let them float to wherever the copy ended. */
    grid-template-rows: auto auto 1fr auto;
    padding: 28px 24px 22px; border: 1px solid var(--line);
    background: var(--card); text-decoration: none; color: var(--ink);
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(5,32,42,.05);
    overflow: hidden; opacity: 0; transform: translateY(18px);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s var(--ease);
  }
  /* colour rule across the top, it fills in on hover */
  .card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: var(--tone); transform: scaleX(.3); transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .card:hover::before, .card:focus-visible::before { transform: scaleX(1); }
  /* Big ghost numeral, the same device the sheet uses for its line
     numbers. It used to hang off the bottom-right and get cut by the
     card's overflow, which read as an accident rather than a bleed, and
     card 03 lost more of it than the other two because it sits against
     the frame edge. It now sits fully inside the card. */
  .card::after {
    content: attr(data-idx); position: absolute; right: 18px; bottom: 12px;
    font-family: var(--font-display); font-size: 72px; font-weight: 800;
    line-height: .82; letter-spacing: -.05em; pointer-events: none;
    color: color-mix(in srgb, var(--tone) 10%, transparent);
  }
  .card:nth-child(2) { --tone: var(--accent); --tone-ink: #8A5A10; }
  .card:nth-child(3) { --tone: #3FA96F;       --tone-ink: #1F6B45; }
  .card.in:nth-child(1) { opacity: 1; transform: none; transition: opacity .6s ease 0s, transform .6s var(--ease) 0s, border-color .22s ease, box-shadow .22s ease; }
  .card.in:nth-child(2) { opacity: 1; transform: none; transition: opacity .6s ease .08s, transform .6s var(--ease) .08s, border-color .22s ease, box-shadow .22s ease; }
  .card.in:nth-child(3) { opacity: 1; transform: none; transition: opacity .6s ease .16s, transform .6s var(--ease) .16s, border-color .22s ease, box-shadow .22s ease; }
  .card:hover {
    border-color: color-mix(in srgb, var(--tone) 60%, transparent);
    box-shadow: 0 16px 40px rgba(5,32,42,.16);
    transform: translateY(-3px);
  }
  .card .num {
    display: inline-flex; align-self: start; padding: 4px 9px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--tone-ink);
    background: color-mix(in srgb, var(--tone) 16%, transparent);
  }
  .card h3 { margin: 0; font-size: 20px; letter-spacing: -.018em; font-weight: 700; line-height: 1.2; }
  .card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
  .card .go {
    margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--tone-ink);
    display: inline-flex; align-items: center; gap: 6px; transition: gap .22s ease;
  }
  .card:hover .go { gap: 11px; }
  /* the disclosure card points down, and flips when its panel is open */
  .card .go .chev { transition: transform .3s var(--ease); }
  .card[aria-expanded="true"] .go .chev { transform: rotate(180deg); }
  .card[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--tone) 70%, transparent);
  }
  .card[aria-expanded="true"]::before { transform: scaleX(1); }

  /* ── the audience panels ───────────────────────────
     A full service list is too much for the fold, so each card opens
     its own on request. The panel inherits its card's colour. */
  .panel {
    --p-tone: var(--teal-lift); --p-ink: var(--teal-lift);
    display: grid; grid-template-rows: 0fr; margin-top: 0;
    transition: grid-template-rows .45s var(--ease), margin-top .45s var(--ease);
  }
  .panel.tone-02 { --p-tone: var(--accent); --p-ink: #8A5A10; }
  .panel.tone-03 { --p-tone: #3FA96F;       --p-ink: #1F6B45; }
  .panel > div { overflow: hidden; }
  .panel.open { grid-template-rows: 1fr; margin-top: 14px; }

  .panel-card {
    border: 1px solid var(--line); border-top: 4px solid var(--p-tone);
    background: var(--card); box-shadow: 0 16px 40px rgba(5,32,42,.10);
    padding: 24px clamp(20px, 2.6vw, 30px) 22px;
  }
  .panel-head {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 10px; margin-bottom: 20px;
  }
  .panel-head .lbl {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--p-ink);
  }
  .panel-close {
    appearance: none; border: 1px solid var(--line); background: none;
    cursor: pointer; color: var(--muted); border-radius: 999px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; padding: 6px 12px; min-height: 32px;
    transition: border-color .2s ease, color .2s ease;
  }
  .panel-close:hover { border-color: var(--p-tone); color: var(--ink); }

  .fams { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px 26px; }
  .fam { --tone: var(--p-tone); --tone-ink: var(--p-ink); }
  /* the individual panel splits into three families, each its own colour */
  #ind-panel .fam:nth-child(1) { --tone: var(--teal-lift); --tone-ink: var(--teal-lift); }
  #ind-panel .fam:nth-child(2) { --tone: var(--accent);    --tone-ink: #8A5A10; }
  #ind-panel .fam:nth-child(3) { --tone: #3FA96F;          --tone-ink: #1F6B45; }
  /* a single-family panel spans the row and flows its list across columns */
  .fam.wide { grid-column: 1 / -1; }
  .fam.wide ul { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 9px 26px; }
  .fam h4 {
    margin: 0 0 12px; padding-bottom: 9px; font-size: 13px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--tone-ink);
    border-bottom: 2px solid color-mix(in srgb, var(--tone) 45%, transparent);
  }
  .fam h4 a { color: inherit; text-decoration: none; }
  .fam h4 a span { display: inline-block; transition: transform .2s var(--ease); }
  .fam h4 a:hover span, .fam h4 a:focus-visible span { transform: translateX(4px); }
  .fam ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
  .fam li {
    position: relative; padding-left: 15px;
    font-size: 13.5px; line-height: 1.4; color: var(--ink);
  }
  /* a small square marker, the same shape as the sheet's checkboxes */
  .fam li::before {
    content: ""; position: absolute; left: 0; top: .48em;
    width: 6px; height: 6px; border-radius: 1px; background: var(--tone);
  }
  /* The pitch that opens a panel. The card sells, the panel proves. */
  .pitch h3 {
    margin: 0; max-width: 22ch;
    font-size: clamp(19px, 2vw, 25px); line-height: 1.18;
    letter-spacing: -.022em; font-weight: 700; color: var(--ink);
  }
  .pitch p { margin: 9px 0 0; max-width: 58ch; font-size: 14px; line-height: 1.55; color: var(--muted); }
  /* the contrast is the whole point, so it steps out of the muted copy */
  .pitch p b { font-weight: 600; color: var(--ink); }

  /* Three selling points. No cells, no band. Each gets the same short
     colour rule the audience cards wear, so they read as headings. */
  .props {
    display: flex; flex-wrap: wrap; gap: 18px clamp(26px, 4.4vw, 62px);
    margin: 24px 0 26px; padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .props div { display: grid; gap: 3px; align-content: start; }
  .props div::before {
    content: ""; display: block; width: 22px; height: 3px;
    background: var(--p-tone); margin-bottom: 9px;
  }
  .props b {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--p-ink);
  }
  .props span { font-size: 13px; line-height: 1.4; color: var(--muted); }

  /* The trial offer. The one ask that costs the employer nothing to say
     yes to, so it gets the only tinted block in the panel. */
  .offer {
    margin-top: 24px; padding: 18px 20px 16px;
    border-left: 3px solid var(--p-tone);
    background: color-mix(in srgb, var(--p-tone) 9%, transparent);
  }
  .offer b { display: block; font-size: 15.5px; letter-spacing: -.012em; color: var(--ink); }
  .offer p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 62ch; }
  .nofric {
    display: flex; flex-wrap: wrap; gap: 7px 18px;
    margin: 13px 0 0; padding: 0; list-style: none;
  }
  .nofric li {
    position: relative; padding-left: 17px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--p-ink);
  }
  /* a small tick, the same mark the services sheet stamps */
  .nofric li::before {
    content: ""; position: absolute; left: 0; top: .18em;
    width: 9px; height: 5px; border-left: 2px solid var(--p-tone);
    border-bottom: 2px solid var(--p-tone); transform: rotate(-45deg);
  }

  .panel-go {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 22px;
    font-size: 13.5px; font-weight: 600; color: var(--p-ink);
    text-decoration: none; transition: gap .22s ease;
  }
  .panel-go:hover { gap: 12px; }
  .panel-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; }

  .chooser {
    display: block;
    background:
      linear-gradient(90deg, rgba(15,76,92,.035) 1px, transparent 1px),
      linear-gradient(180deg, rgba(15,76,92,.035) 1px, transparent 1px),
      radial-gradient(circle at 8% 12%, rgba(232,163,61,.13), transparent 24%),
      linear-gradient(135deg, #FBFCF8 0%, #EFF5F2 100%);
    background-size: 42px 42px, 42px 42px, auto, auto;
  }
  .chooser::after {
    content: ""; position: absolute; inset: auto 0 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent) 36%, var(--teal-lift) 36%, var(--teal-lift));
  }
  .chooser-head { grid-column: 1 / -1; margin-bottom: 24px; }
  .choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .choice-route {
    position: relative;
    min-height: 430px;
    padding: 30px clamp(24px, 3vw, 38px);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(5,32,42,.18);
    box-shadow: 0 18px 42px rgba(5,32,42,.10);
  }
  .choice-testing {
    color: var(--mint);
    background:
      radial-gradient(circle at 100% 0%, rgba(19,103,119,.26), transparent 42%),
      #062A34;
    border-top: 4px solid var(--accent);
  }
  .choice-dna {
    color: var(--ink);
    background:
      linear-gradient(145deg, rgba(63,169,111,.10), transparent 54%),
      var(--card);
    border-top: 4px solid #3FA96F;
  }
  .choice_specialty {
    color: var(--ink);
    background:
      radial-gradient(circle at 100% 0%, rgba(23,103,124,.13), transparent 44%),
      #F7FAF7;
    border-top: 4px solid #17677C;
  }
  .choice-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid currentColor;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .choice-testing .choice-topline { color: rgba(228,240,226,.56); }
  .choice-testing .choice-topline span:first-child { color: var(--accent); }
  .choice-dna .choice-topline { color: rgba(5,32,42,.52); }
  .choice-dna .choice-topline span:first-child { color: #17677C; }
  .choice_specialty .choice-topline { color: rgba(5,32,42,.52); }
  .choice_specialty .choice-topline span:first-child { color: var(--accent); }
  .choice-route h3 {
    margin: 32px 0 12px;
    max-width: 12ch;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.02;
    letter-spacing: -.035em;
  }
  .choice-testing h3 { color: var(--mint); }
  .choice-route > p {
    margin: 0;
    max-width: 54ch;
    font-size: 14px;
    line-height: 1.55;
  }
  .choice-testing > p { color: rgba(228,240,226,.68); }
  .choice-dna > p { color: var(--muted); }
  .choice_specialty > p { color: var(--muted); }
  .choice-links {
    margin-top: 28px;
    border-top: 1px solid currentColor;
  }
  .choice-testing .choice-links { color: rgba(228,240,226,.20); }
  .choice-dna .choice-links { color: rgba(5,32,42,.15); }
  .choice_specialty .choice-links { color: rgba(5,32,42,.15); }
  .choice-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 48px;
    padding: 12px 0;
    border-bottom: 1px solid currentColor;
    /* Up from 13.5px. These are the actual routes into the catalogue and
       they were reading as fine print under their own card heading. The
       headings are deliberately left where they were. */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
  .choice-testing .choice-links a { color: rgba(228,240,226,.88); }
  .choice-dna .choice-links a { color: var(--ink); }
  .choice_specialty .choice-links a { color: var(--ink); }
  .choice-links a b {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 400;
    transition: transform .2s ease;
  }
  .choice-testing .choice-links a b { color: var(--accent); }
  .choice-dna .choice-links a b { color: #17677C; }
  .choice_specialty .choice-links a b { color: var(--accent); }
  .choice-links a:hover b,
  .choice-links a:focus-visible b { transform: translateX(4px); }
  .choice-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    margin-top: auto;
    padding: 20px 0 2px;
    color: #176E4A;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .choice-cta span { color: #17677C; font-size: 15px; }
  .cards {
    grid-column: 1; grid-row: 2;
    display: grid; grid-template-columns: 1fr; gap: 1px;
    padding: 1px; background: rgba(228,240,226,.16);
    border: 1px solid rgba(5,32,42,.22);
    box-shadow: 0 18px 42px rgba(5,32,42,.12);
  }
  .card {
    min-height: 0; padding: 22px 22px 20px 68px;
    border: 0; background: #062A34; color: var(--mint);
    box-shadow: none; gap: 7px; overflow: hidden;
    grid-template-rows: auto auto 1fr auto;
  }
  .card::before {
    left: 0; right: auto; top: 0; bottom: 0; width: 4px; height: auto;
    transform: scaleY(0); transform-origin: top;
  }
  .card:hover::before, .card:focus-visible::before,
  .card[aria-expanded="true"]::before { transform: scaleY(1); }
  .card::after {
    content: attr(data-idx); left: 20px; right: auto; top: 24px; bottom: auto;
    font-family: var(--font-mono); font-size: 12px; line-height: 1;
    letter-spacing: .08em; color: rgba(228,240,226,.34);
  }
  .card:nth-child(2), .card:nth-child(3) { --tone-ink: var(--mint); }
  .card:hover {
    background: #0A3440; border-color: transparent;
    box-shadow: none; transform: translateX(3px);
  }
  .card[aria-expanded="true"] {
    background: #0B3945; border-color: transparent;
  }
  .card[aria-expanded="true"]::after { color: var(--accent); }
  .card .num {
    padding: 0; border-radius: 0; color: rgba(228,240,226,.58);
    background: transparent; font-size: 9px;
  }
  .card h3 { color: var(--mint); font-size: 18px; }
  .card p { color: rgba(228,240,226,.58); font-size: 13px; line-height: 1.45; }
  .card .go {
    color: var(--accent); font-family: var(--font-mono); font-size: 9px;
    letter-spacing: .12em; text-transform: uppercase;
  }
  .panel {
    grid-column: 2; grid-row: 2; align-self: stretch;
  }
  .panel.open { margin-top: 0; }
  .panel-card {
    min-height: 100%; padding: 28px clamp(22px, 2.8vw, 36px) 26px;
    border: 1px solid rgba(5,32,42,.18); border-left: 4px solid var(--p-tone);
    border-top-width: 1px; box-shadow: 0 18px 42px rgba(5,32,42,.10);
  }
  .panel-head {
    padding-bottom: 16px; border-bottom: 1px solid var(--line);
    margin-bottom: 22px;
  }
  .fams { gap: 24px 28px; }
  .fam h4 { font-size: 12px; }
  .fam li { font-size: 13px; }

  @media (max-width: 900px) {
    .chooser { display: block; }
    .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .choice-route { min-height: 410px; }
    .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .card { padding: 54px 18px 20px; }
    .card::after { left: 18px; top: 22px; }
    .panel.open { margin-top: 14px; }
  }

  @media (max-width: 700px) {
    .choice-grid { grid-template-columns: 1fr; }
    .choice-route { min-height: 0; padding: 26px 22px; }
    .choice-route h3 { margin-top: 28px; }
    .choice-cta { margin-top: 24px; }
    .cards { grid-template-columns: 1fr; }
    .card { padding: 20px 18px 18px 58px; }
    .card::after { left: 18px; top: 22px; }
    .panel-card { padding: 24px 20px 22px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .panel { transition: none; }
  }

  /* ══ TEST MENU SHEET ══════════════════════════════
     A CCF test-menu panel that fills itself in on scroll:
     rules draw, rows land, boxes stamp, the tally counts up. */
  /* Dark band, so the menu separates hard from the light "Start here"
     block above it and the white sheet reads as paper on a desk. */
  .menu {
    position: relative; overflow: hidden;
    background:
      /* the seam, run the other way: the light block above spills a
         little into the top of the dark one, on the same curve, so the
         band opens instead of slamming shut */
      linear-gradient(180deg,
        rgba(228,240,226,.085) 0px,
        rgba(228,240,226,.048) 16px,
        rgba(228,240,226,.024) 36px,
        rgba(228,240,226,.009) 62px,
        rgba(228,240,226,0) 96px),
      linear-gradient(160deg, var(--teal) 0%, var(--deep) 74%);
    padding: clamp(44px, 5vw, 72px) clamp(26px, 4.4vw, 60px) clamp(48px, 5vw, 76px);
  }
  /* amber hairline across the top edge, the same amber as Tempe, AZ */
  .menu::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 34%, transparent 100%);
  }
  .menu-head {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 12px 20px; margin-bottom: 22px;
  }
  .menu-head h2 {
    position: relative; margin: 0; padding-left: 16px;
    font-size: clamp(21px, 2.4vw, 29px); letter-spacing: -.024em;
    font-weight: 700; color: var(--mint);
  }
  /* the same amber tick the Start here heading carries, so the two
     section heads read as the same rank rather than two unrelated titles */
  .menu-head h2::before {
    content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
    width: 4px; background: var(--accent);
  }
  .menu-head h2 em { font-style: normal; color: var(--accent); }
  .menu-meta {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; color: rgba(228,240,226,.55);
    font-variant-numeric: tabular-nums;
  }
  .menu-meta .tally { color: var(--accent-lift); font-weight: 600; }

  /* The sheet is always paper, in either theme. Pin its tokens locally
     so everything inside stays readable on the dark band. */
  .sheet {
    --ink: #0C2029;
    --muted: #5D6C71;
    --line: rgba(5,32,42,.16);
    --card: #FBFAF6;
    --paper: #F0ECE2;
    --teal-lift: #17677C;
    position: relative; overflow: hidden;
    background: var(--card);
    border: 1px solid rgba(5,32,42,.5);
    border-radius: 3px;   /* a form, not a card */
    box-shadow: 0 26px 60px rgba(3,16,22,.42);
  }
  /* Ruled left margin. The line numbers get their own column, the way a
     form numbers its lines. No dots. */
  .sheet::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 44px;
    border-right: 1px solid rgba(5,32,42,.16);
    background: color-mix(in srgb, var(--teal-lift) 6%, transparent);
    pointer-events: none; z-index: 0;
  }
  /* below 860 the rows restack, so the margin column no longer lines up */
  @media (max-width: 860px) { .sheet::before { display: none; } }

  .sheet-head, .row {
    display: grid;
    /* The note column is sized to the longest label on the sheet,
       "Instant results while you wait". A pill that wraps stretches to
       fill its column, so a two-line note would have sat edge to edge
       and twice as tall as the other five. That label measures 209px, so
       232px keeps every pill on one line, and the name column still has
       the width to spare. */
    grid-template-columns: 44px 34px minmax(0, 1fr) 206px 232px 26px;
    align-items: center;
    gap: 0 14px;
  }
  .sheet-head {
    padding: 11px 16px 11px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .17em; text-transform: uppercase; color: var(--muted);
  }
  .sheet-head span:first-child { grid-column: 1; }

  .row {
    position: relative;
    padding: 0 16px 0 0;
    min-height: 62px;
    text-decoration: none; color: var(--ink);
    border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(10px);
    transition: opacity .42s var(--ease), transform .42s var(--ease), background .2s ease;
  }
  .row:last-of-type { border-bottom: 0; }
  .row.in { opacity: 1; transform: none; }
  .row:hover { background: color-mix(in srgb, var(--teal-lift) 6%, transparent); }
  /* accent rail grows from the punch column on hover */
  .row::after {
    content: ""; position: absolute; left: 44px; top: 0; bottom: 0; width: 2px;
    background: var(--teal-lift); transform: scaleY(0); transform-origin: center;
    transition: transform .24s var(--ease); z-index: 2;
  }
  .row:hover::after, .row:focus-visible::after { transform: scaleY(1); }

  .row .ln {
    grid-column: 1;
    font-family: var(--font-mono); font-size: 9px; color: var(--muted);
    text-align: right; padding-right: 5px; font-variant-numeric: tabular-nums;
  }

  /* the checkbox that stamps */
  .box {
    width: 19px; height: 19px; border: 1.5px solid var(--line);
    border-radius: 2px; display: grid; place-items: center;
    background: var(--paper);
    transition: border-color .3s ease, background .3s ease, transform .3s var(--ease);
  }
  .row.in .box { transition-delay: .22s; }
  .row.lit .box {
    border-color: var(--tempok);
    background: color-mix(in srgb, var(--tempok) 14%, transparent);
    transform: scale(1.06);
  }
  .box svg { width: 13px; height: 13px; overflow: visible; }
  .box svg path {
    fill: none; stroke: var(--tempok); stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 18; stroke-dashoffset: 18;
    transition: stroke-dashoffset .34s var(--ease);
  }
  .row.lit .box svg path { stroke-dashoffset: 0; transition-delay: .3s; }

  .row .name { font-size: 16px; font-weight: 650; letter-spacing: -.012em; line-height: 1.25; }
  .row .spec, .row .note {
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    line-height: 1.5;
  }
  .row .note span {
    display: inline-block; padding: 3px 8px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--teal-lift) 40%, transparent);
    color: var(--teal-lift);
  }
  .row .note span.hot {
    border-color: color-mix(in srgb, var(--tempok) 55%, transparent);
    color: color-mix(in srgb, var(--tempok) 78%, var(--ink));
  }
  .row .arw {
    font-size: 15px; color: var(--teal-lift); opacity: 0;
    transform: translateX(-5px);
    transition: opacity .22s ease, transform .22s var(--ease);
  }
  .row:hover .arw, .row:focus-visible .arw { opacity: 1; transform: none; }

  /* the sheet gets read once, top to bottom */
  .sheet .scan {
    position: absolute; left: 0; right: 0; top: -22%; height: 22%;
    z-index: 3; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg,
      rgba(23,103,124,0) 0%, rgba(23,103,124,.07) 48%,
      rgba(23,103,124,.16) 52%, rgba(23,103,124,.07) 56%, rgba(23,103,124,0) 100%);
  }
  .sheet.reading .scan { animation: read 1.9s cubic-bezier(.5,0,.35,1) .2s 1 forwards; }
  @keyframes read {
    0%   { top: -22%; opacity: 0; }
    12%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  .sheet-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 18px; padding: 14px 18px 14px 58px;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--teal-lift) 4%, transparent);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  }
  .sheet-foot b { color: var(--ink); font-weight: 600; }
  .sheet-foot .sig {
    flex: 1 1 190px; min-width: 130px; max-width: 260px;
    border-bottom: 1px solid var(--line); height: 15px;
  }

  @media (max-width: 860px) {
    .sheet-head { display: none; }
    .sheet-foot { padding-left: 18px; }
    .row {
      grid-template-columns: 30px 34px minmax(0, 1fr) 26px;
      padding: 13px 14px 13px 0; row-gap: 5px; min-height: 0;
    }
    .row .ln  { grid-row: 1; align-self: start; padding-top: 3px; }
    .row .box { grid-row: 1; align-self: start; }
    .row .name { grid-column: 3; }
    .row .spec { grid-column: 3; grid-row: 2; }
    .row .note { grid-column: 3; grid-row: 3; }
    .row .arw  { grid-column: 4; grid-row: 1; opacity: 1; transform: none; }
  }

  /* Required disclosure. Quiet, but on the page rather than buried, since
     being straight about what they are is itself a trust signal. */
  /* ══ THE CLOSE ═══════════════════════════════════
     The page used to end on the test menu and a disclosure note, so you
     could read all eight services and then have nowhere to act: the only
     two buttons on the page were a full scroll behind you. This repeats
     the hero's offer once the visitor knows what is on the menu, in the
     hero's own vocabulary, which also walks the page back to where it
     started instead of trailing off. Its top hairline is the same seam
     the facts strip uses under the hero, so both dark bands close the
     same way. */
  .close {
    position: relative; overflow: hidden;
    display: none;
    justify-content: space-between; gap: 26px 40px;
    padding: clamp(24px, 2.8vw, 34px) var(--gut);
    color: var(--mint);
    background:
      radial-gradient(86% 130% at 84% 0%, rgba(23,103,124,.32) 0%, rgba(5,32,42,0) 70%),
      #04191F;
    box-shadow: inset 0 1px 0 rgba(228,240,226,.07);
  }
  .close-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(228,240,226,.6);
  }
  .close-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--tempok);
  }
  .close h2 {
    margin: 13px 0 0; font-size: clamp(23px, 2.7vw, 33px);
    letter-spacing: -.026em; font-weight: 700; line-height: 1.14;
  }
  .close p {
    margin: 9px 0 0; max-width: 44ch;
    font-size: 14.5px; line-height: 1.55; color: rgba(228,240,226,.7);
  }
  .close-cta { display: flex; flex-wrap: wrap; gap: 12px; }

  /* The standalone .legal band is gone. Its paragraph now lives inside the
     footer, above the copyright line, which is where small print belongs
     and which lets the page end on one seam instead of two. */

  /* ══ THE FOOTER ═══════════════════════════════════
     The live footer is the same three columns on every one of the 44
     pages, and on a page like /urine whose own title is not a heading at
     all, its ADDRESS / CONTACT / Hours labels are the loudest headings
     Google can find. So every label here is a <p>, never an <h2>. That
     is not a detail to fix later: in Wix, changing a footer text
     element's tag after the fact re-anchors the icons sitting next to it
     and shifts them 38px, and the move does not undo. Built right the
     first time costs nothing.

     Ground goes one step deeper than the closing band above it so the
     two dark bands read as CTA then footer, not as one long block. The
     legal note moves inside, which is where small print belongs, and it
     lets the page end on a single seam instead of two. */
  .sitefoot {
    background: #03141A;
    color: rgba(228,240,226,.72);
    box-shadow: inset 0 1px 0 rgba(228,240,226,.08);
    padding: clamp(30px, 3vw, 42px) var(--gut) 0;
  }
  .foot-grid {
    display: grid; gap: 32px 40px;
    grid-template-columns: 1.15fr 1.6fr .95fr .95fr;
  }
  @media (max-width: 860px) {
    .foot-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  }
  .foot-id { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
  /* Only the microscope, cropped out of the full lockup. The artwork is
     1236x336 with the glyph occupying the first 262px, so the box is sized
     to that slice and the background is scaled to the whole asset: the
     wordmark simply falls outside the box. Reusing the one asset beats
     shipping a second file, and the type beside it already says the name,
     so repeating it in artwork would set the name twice. */
  .foot-logo {
    flex: none; width: 27px; height: 35px;
    background: var(--logo) left center / 127px auto no-repeat;
    /* dark artwork on a dark ground, so it is lifted rather than recoloured */
    filter: brightness(0) invert(1) opacity(.9);
  }
  .foot-brand .foot-mark {
    display: block;
    font-size: 16px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mint);
  }
  .foot-brand .foot-tag {
    display: block; margin-bottom: 14px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(228,240,226,.42);
  }
  .foot-brand p {
    margin: 0; max-width: 34ch;
    font-size: 13.5px; line-height: 1.6; color: rgba(228,240,226,.6);
  }
  /* deliberately a <p>, not a heading: see the note above */
  .foot-label {
    margin: 0 0 13px; font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(228,240,226,.45);
  }
  .foot-list { margin: 0; padding: 0; list-style: none; }
  .foot_service_family {
    margin-bottom: 11px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .foot-service-lists {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 28px;
  }
  .foot-list li { margin-bottom: 9px; }
  .foot-list a, .foot-addr a {
    color: rgba(228,240,226,.78); text-decoration: none;
    font-size: 14px; line-height: 1.5;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
  }
  .foot-list a:hover, .foot-addr a:hover {
    color: var(--accent); border-bottom-color: rgba(232,163,61,.5);
  }
  .foot-addr { font-style: normal; font-size: 14px; line-height: 1.62; }
  .foot-addr .line { color: rgba(228,240,226,.78); }
  /* The address block mixes plain lines and links. Without a resting
     underline "Get directions" reads as a third line of the address, so
     the links carry a faint rule that only warms up on hover. */
  .foot-addr a:not(.foot-phone) { border-bottom-color: rgba(228,240,226,.22); }
  .foot-phone {
    display: block; font-size: 17px; font-weight: 600;
    color: var(--mint) !important; margin-bottom: 7px;
  }
  .foot-open {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 11px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(228,240,226,.5);
  }
  .foot-open .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--tempok);
  }
  .foot-connect {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; margin-top: 22px; padding-top: 18px;
    border-top: 1px solid rgba(228,240,226,.1);
  }
  .foot-social { display: flex; gap: 8px; }
  .foot-social span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--mint); color: var(--teal);
    font-family: Arial, sans-serif; font-size: 17px; font-weight: 800;
  }
  .foot-chat-toggle {
    appearance: none; cursor: pointer; min-height: 40px;
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid rgba(228,240,226,.28);
    background: rgba(23,103,124,.32); color: var(--mint);
    font: 600 14px/1 var(--font-display);
    transition: background .2s ease, border-color .2s ease;
  }
  .foot-chat-toggle:hover,
  .foot-chat-toggle[aria-expanded="true"] {
    background: var(--teal); border-color: rgba(228,240,226,.5);
  }
  .chat-panel {
    position: fixed; right: var(--gut); bottom: 76px; z-index: 75;
    width: min(360px, calc(100vw - 32px)); padding: 22px;
    background: #FFFFFF; color: var(--deep);
    border: 1px solid rgba(15,76,92,.18); border-radius: 12px;
    box-shadow: 0 24px 70px rgba(2,14,19,.3);
  }
  .chat-head {
    display: flex; align-items: start; justify-content: space-between; gap: 20px;
  }
  .chat-head div { display: grid; gap: 4px; }
  .chat-head span {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--teal-lift);
  }
  .chat-head strong { font-size: 21px; letter-spacing: -.02em; }
  .chat-head button {
    appearance: none; cursor: pointer; width: 32px; height: 32px;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--paper); color: var(--deep); font-size: 20px;
  }
  .chat-panel > p {
    margin: 15px 0 18px; font-size: 14px; line-height: 1.55; color: var(--muted);
  }
  .chat-actions { display: grid; gap: 9px; }
  .chat-actions a {
    display: flex; align-items: center; justify-content: center;
    min-height: 42px; padding: 10px 14px; text-decoration: none;
    background: var(--teal); color: #FFFFFF; font-size: 13.5px; font-weight: 700;
  }
  .chat-actions a:last-child {
    background: #FFFFFF; color: var(--teal); border: 1px solid rgba(15,76,92,.28);
  }
  @media (max-width: 620px) {
    .foot-service-lists { grid-template-columns: minmax(0, 1fr); }
    .foot-connect { align-items: flex-start; flex-direction: column; }
    .chat-panel { right: 16px; bottom: 16px; }
  }

  /* The bottom bar now carries the rule the fine print used to, so the
     footer still closes on a line rather than just running out. */
  .foot-bar {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    align-items: center; justify-content: space-between;
    margin-top: 22px;
    padding: 18px 0 22px;
    border-top: 1px solid rgba(228,240,226,.1);
    font-size: 11.5px; color: rgba(228,240,226,.4);
  }
  .foot-bar a {
    color: rgba(228,240,226,.55); text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .foot-bar a:hover { color: var(--accent); border-bottom-color: rgba(232,163,61,.5); }
  .foot-bar .sep { opacity: .4; margin: 0 4px; }

  /* ── reduced motion: stable poster ────────────── */
  @media (prefers-reduced-motion: reduce) {
    .eyebrow, .hero .sub, .cta-row, .track { opacity: 1; animation: none; }
    .hero h1 .w > i { transform: none; animation: none; }
    .hero h1 .place::after { transform: scaleX(1); animation: none; }
    .eyebrow .dot { animation: none; }
    .card { opacity: 1; transform: none; }
    .stop .desc { opacity: 1; transform: none; }
  }
  /* ══ STATIC SITE SHELL ══════════════════════════════════════════
     The prototype lived inside a demo .frame that capped everything at
     1180px and drew a rounded card around it. A real site has no card:
     each band paints edge to edge and constrains its own content instead.

     The measure is held by padding rather than by a wrapper element, so
     every band keeps the display:flex or display:grid it was tuned with.
     On a narrow screen the gutter wins. On a wide one the second term
     wins and the content stops growing, centred, while the background
     keeps running to the edge of the glass. */
  :root { --measure: 1180px; }

  .menu {
    padding-inline: max(var(--gut), (100% - var(--measure)) / 2);
  }
  /* the nav bar sits tighter than the bands it sits above */
  .sitebar {
    padding-inline: var(--gut);
  }
  /* The hero carries its gutter on .hero-inner, not on .hero, so capping
     the band would pad it twice. Cap the inner grid instead. */
  .hero-inner { max-width: none; margin-inline: 0; }

  /* The nav bar was only boxed because the demo showed two versions and
     the redesign needed distinguishing from the mock-up beside it. */
  .sitebar { position: sticky; top: 0; z-index: 40; }

  /* Interior pages: one column of prose under the same nav and footer.
     The homepage is the only page built out of bands. */
  .page-head {
    background: linear-gradient(168deg, #0A3444 0%, #072935 60%, #04191F 100%);
    color: var(--mint);
    padding: clamp(46px, 6vw, 86px) max(var(--gut), (100% - var(--measure)) / 2)
             clamp(34px, 4vw, 52px);
  }
  .page-head h1 {
    margin: 12px 0 0; max-width: 20ch;
    font-size: clamp(31px, 5vw, 55px); line-height: 1.04;
    letter-spacing: -.03em; font-weight: 700; text-wrap: balance;
  }
  .page-head .standfirst {
    margin: 18px 0 0; max-width: 58ch;
    font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55;
    color: rgba(228,240,226,.74);
  }
  .prose {
    padding: clamp(38px, 5vw, 66px) max(var(--gut), (100% - var(--measure)) / 2)
             clamp(46px, 6vw, 78px);
    background: var(--paper);
  }
  .prose-inner { max-width: 68ch; }
  .prose h2 {
    margin: clamp(34px, 3.6vw, 50px) 0 12px;
    font-size: clamp(21px, 2.6vw, 28px); letter-spacing: -.022em;
    line-height: 1.16; text-wrap: balance;
  }
  .prose h2:first-child { margin-top: 0; }
  .prose h3 {
    margin: 30px 0 8px; font-size: clamp(17px, 2vw, 20px);
    letter-spacing: -.014em;
  }
  .prose p { margin: 0 0 15px; font-size: 16.5px; line-height: 1.62; }
  .prose ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
  .prose ul li {
    position: relative; margin-bottom: 11px; padding-left: 20px;
    font-size: 16.5px; line-height: 1.58;
  }
  .prose ul li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 6px; height: 6px; background: var(--teal-lift);
  }
  .prose strong { font-weight: 700; color: var(--ink); }
  .prose .lede {
    font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5;
    margin-bottom: 22px;
  }
  /* The one thing on an interior page that has to be reachable without
     scrolling back to the nav. */
  .prose-cta {
    margin: clamp(34px, 4vw, 48px) 0 0; padding: 22px 24px;
    background: var(--card); border: 1px solid var(--line);
    border-left: 3px solid var(--amber);
  }
  .prose-cta p { margin: 0 0 14px; font-size: 15.5px; }
  /* Was `.row`, which collides with the homepage services-sheet row at the
     top of this file. That one starts at opacity 0 and is only revealed by
     wireSheet() adding `.in`. wireSheet() returns early where there is no
     #sheet, so every interior page's buttons stayed invisible. */
  .btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

  /* Skip link. Off screen until a keyboard reaches it, which is the only
     time it is useful and the only time it should be seen. */
  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: #1B1206;
    padding: 12px 18px; font-weight: 600; text-decoration: none;
  }
  .skip:focus { left: 0; }

  /* the counter checklist: a tick reads "bring this", a square bullet
     reads "here is a fact", and this list is the first kind */
  .prose ul.check li { padding-left: 26px; }
  .prose ul.check li::before {
    content: "\2713"; top: 0; width: auto; height: auto; background: none;
    color: var(--tempok); font-size: 15px; font-weight: 700;
  }
  .contact-block {
    font-style: normal; display: grid; gap: 3px; margin: 0 0 18px;
    font-size: 16.5px; line-height: 1.5;
  }
  .contact-block .line { display: block; }
  .maplink { font-weight: 600; }

  /* ══ INTERIOR PAGE SECTIONS ═══════════════════════════════════════
     The interior pages used to be one dark header over one flat column
     of prose, identical on all twelve, which read as a document rather
     than a site. This is the vocabulary that gives them rhythm.

     The rule that drives it: a dark band every second or third section.
     Dark is punctuation, not decoration. It marks the single thing on
     the page worth stopping for, so it has to stay rare to keep working.

     The homepage is not built from these. It keeps its own bands. */

  .sec { padding-inline: max(var(--gut), (100% - var(--measure)) / 2); }

  /* ── light ground, the default ── */
  .sec-light {
    background: var(--paper); color: var(--ink);
    padding-block: clamp(46px, 5.5vw, 84px);
  }
  .sec-light + .sec-light { padding-top: 0; }

  /* ── dark ground, the interruption ── */
  .sec-dark {
    position: relative; overflow: hidden;
    color: var(--mint);
    padding-block: clamp(52px, 6vw, 94px);
    background:
      radial-gradient(88% 70% at 78% 24%, rgba(23,103,124,.30) 0%, rgba(5,32,42,0) 64%),
      linear-gradient(166deg, #0A3444 0%, #072935 54%, #04191F 100%);
  }
  /* the seam: the light band above spills a little into the top of the
     dark one, so the cut opens instead of slamming shut */
  .sec-dark::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 62px;
    background: linear-gradient(180deg,
      rgba(228,240,226,.075) 0px, rgba(228,240,226,.04) 16px,
      rgba(228,240,226,.018) 36px, rgba(228,240,226,0) 62px);
    pointer-events: none;
  }
  .sec-dark > * { position: relative; z-index: 1; }

  /* ── the section eyebrow, in both grounds ── */
  .sec-label {
    margin: 0 0 14px; font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--teal-lift);
  }
  .sec-dark .sec-label { color: var(--accent); }

  /* ── the big statement, the thing that catches the eye ── */
  .sec-title {
    margin: 0 0 18px; max-width: 22ch;
    font-size: clamp(26px, 3.6vw, 44px); line-height: 1.06;
    letter-spacing: -.028em; font-weight: 700; text-wrap: balance;
  }
  .sec-dark .sec-title { max-width: 20ch; }
  .sec-title .hi { color: var(--accent); }

  .sec-body { max-width: 62ch; }
  .sec-body p { margin: 0 0 15px; font-size: 16.5px; line-height: 1.62; }
  .sec-dark .sec-body p { color: rgba(228,240,226,.78); }
  .sec-body p:last-child { margin-bottom: 0; }
  .sec-body strong { font-weight: 700; }
  .sec-dark .sec-body strong { color: var(--mint); }

  /* ── two columns: the statement holds the left, the prose runs right ──
     Below 900 it stacks, and the statement keeps its weight because it
     is still the first thing read. */
  .sec-split {
    display: grid; gap: clamp(24px, 3.4vw, 56px);
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
  }
  @media (max-width: 900px) { .sec-split { grid-template-columns: minmax(0, 1fr); } }
  .sec-split .sec-title { margin-bottom: 0; }

  /* ── numbered rows: a list that reads as a sequence, not a bullet list ──
     Used only where the order or the count actually means something, the
     way the services sheet on the homepage does. */
  .rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
  .sec-dark .rows { border-color: rgba(228,240,226,.16); }
  .rows > li {
    display: grid; gap: 4px 22px; align-items: baseline;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: clamp(16px, 2vw, 24px) 0;
    border-bottom: 1px solid var(--line);
  }
  .sec-dark .rows > li { border-color: rgba(228,240,226,.16); }
  .rows .n {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
    color: var(--accent); font-variant-numeric: tabular-nums;
  }
  .rows .rt {
    font-size: clamp(17px, 2.1vw, 22px); font-weight: 700;
    letter-spacing: -.018em; line-height: 1.2;
  }
  .rows .rd {
    grid-column: 2; margin: 0; max-width: 58ch;
    font-size: 15.5px; line-height: 1.55; color: var(--muted);
  }
  .sec-dark .rows .rd { color: rgba(228,240,226,.66); }

  /* ── the stat strip: numbers get to be large ── */
  .stats {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    gap: 22px 26px; margin: 0; padding: 0; list-style: none;
  }
  .stats > li { flex: 0 1 auto; }
  .stats b {
    display: block; font-size: clamp(28px, 3.8vw, 46px); font-weight: 700;
    line-height: 1; letter-spacing: -.03em; color: var(--mint);
    font-variant-numeric: tabular-nums;
  }
  .sec-light .stats b { color: var(--teal); }
  .stats span {
    display: block; margin-top: 9px; font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
    color: rgba(228,240,226,.5);
  }
  .sec-light .stats span { color: var(--muted); }

  /* ── the pull quote: one sentence, given the room to land ── */
  .pull {
    margin: 0; max-width: 26ch;
    font-size: clamp(22px, 3vw, 34px); line-height: 1.18;
    letter-spacing: -.024em; font-weight: 700; text-wrap: balance;
  }
  .pull .hi { color: var(--accent); }

  /* ── cards, for a set of parallel things ── */
  .cardset {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    margin: 0; padding: 0; list-style: none;
  }
  .cardset > li {
    background: var(--card); border: 1px solid var(--line);
    border-top: 3px solid var(--teal-lift);
    padding: 20px 20px 22px;
  }
  .sec-dark .cardset > li {
    background: rgba(228,240,226,.05); border-color: rgba(228,240,226,.14);
    border-top-color: var(--accent);
  }
  .cardset h3 {
    margin: 0 0 7px; font-size: 16.5px; letter-spacing: -.012em; font-weight: 700;
  }
  .cardset p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
  .sec-dark .cardset p { color: rgba(228,240,226,.7); }

  /* ── tint: a third ground, so two light sections in a row do not read
     as one long one. Card white on paper grey, no border. ── */
  .sec-tint {
    background: var(--card); color: var(--ink);
    padding-block: clamp(46px, 5.5vw, 84px);
    border-block: 1px solid var(--line);
  }

  /* ── a checklist, where the items are requirements rather than steps.
     Numbering these would claim an order the content does not have. ── */
  .checkset { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; max-width: 62ch; }
  .checkset > li {
    position: relative; padding-left: 30px;
    font-size: 16px; line-height: 1.6; color: var(--ink);
  }
  .checkset > li::before {
    content: ""; position: absolute; left: 2px; top: .46em;
    width: 13px; height: 7px;
    border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
  }
  .sec-dark .checkset > li { color: rgba(228,240,226,.8); }
  .sec-dark .checkset strong { color: var(--mint); }

  /* ── the callout: one warning that has to survive skim-reading ── */
  .callout {
    margin: 26px 0 0; max-width: 62ch; padding: 18px 20px;
    border-left: 3px solid var(--accent); background: var(--card);
    font-size: 15.5px; line-height: 1.58;
  }
  .callout p { margin: 0 0 11px; }
  .callout p:last-child { margin: 0; }
  .sec-dark .callout {
    background: rgba(228,240,226,.055); color: rgba(228,240,226,.82);
  }
  .sec-dark .callout strong { color: var(--mint); }

  /* ── the closing band, the last thing on every interior page ── */
  .sec-close {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 24px 40px;
  }
  .sec-close .pull { max-width: 22ch; }
  .sec-close .btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

  /* INTERIOR VISUAL SYSTEM */

  .interior {
    --interior_ground: #F5F8F6;
    --interior_soft: #EAF4F0;
    --interior_card: #FFFFFF;
    --interior_ink: #102B31;
    --interior_muted: #60767B;
    --interior_line: #D9E5E1;
    --interior_teal: #0F5A63;
    --interior_teal_soft: #DDF0EA;
    --interior_amber: #E8A33D;
    background: var(--interior_ground);
    color: var(--interior_ink);
    overflow: clip;
  }

  .visual_hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    align-items: center;
    gap: clamp(38px, 5vw, 78px);
    /* Vertical padding follows the viewport height so the chooser below can
       reach the first screen. Side padding is unchanged. */
    padding: clamp(26px, 3.6vh, 104px) max(var(--gut), (100% - var(--measure)) / 2);
    background:
      radial-gradient(circle at 8% 12%, rgba(232,163,61,.12), transparent 24%),
      linear-gradient(135deg, #FBFCF8 0%, #F0F6F2 100%);
    border-bottom: 1px solid var(--interior_line);
  }

  .visual_hero::after {
    content: "";
    position: absolute;
    left: max(var(--gut), (100% - var(--measure)) / 2);
    bottom: 0;
    width: min(180px, 22vw);
    height: 4px;
    background: var(--interior_amber);
  }

  .visual_copy { max-width: 610px; }

  .visual_kicker {
    margin: 0 0 19px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.5;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--interior_teal);
  }

  /* Capped by height as well as width, for the same reason the catalog hero
     is: this headline decides how far down the page the category cards
     start, and at 72px on a 950px screen it pushed them through the fold. */
  .visual_copy h1 {
    margin: 0;
    max-width: 13ch;
    font-size: min(clamp(42px, 5.2vw, 72px), 5.6vh);
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
  }

  .visual_lede {
    margin: 24px 0 0;
    max-width: 50ch;
    font-size: clamp(17px, 1.7vw, 20px);
    line-height: 1.62;
    color: var(--interior_muted);
  }

  .visual_actions {
    align-items: center;
    margin-top: 31px;
  }

  .text_action {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    padding: 0 8px;
    color: var(--interior_teal);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(15,90,99,.35);
  }

  .proof_line {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 20px;
    margin: 34px 0 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid var(--interior_line);
  }

  .proof_line li {
    position: relative;
    padding-left: 17px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--interior_muted);
  }

  .proof_line li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .52em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tempok);
  }

  .visual_media {
    position: relative;
    margin: 0;
    min-width: 0;
  }

  .visual_media::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 18px -18px -18px 18px;
    border: 1px solid rgba(15,90,99,.22);
    border-radius: 26px;
  }

  .visual_media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: 22px;
    border: 1px solid rgba(15,90,99,.16);
    box-shadow: 0 28px 70px rgba(16,43,49,.16);
  }

  .visual_media figcaption {
    position: absolute;
    z-index: 2;
    top: auto;
    left: 22px;
    right: 22px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 13px;
    background: rgba(255,255,255,.92);
    color: var(--interior_ink);
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 12px 30px rgba(16,43,49,.13);
    backdrop-filter: blur(12px);
  }

  .visual_media figcaption span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--interior_amber);
  }

  .section_shell {
    padding: clamp(68px, 8vw, 118px) max(var(--gut), (100% - var(--measure)) / 2);
  }

  .interior_compact .section_shell {
    padding-top: clamp(46px, 5vw, 72px);
    padding-bottom: clamp(46px, 5vw, 72px);
  }

  .interior_compact .section_intro > p:last-child {
    margin-top: 11px;
  }

  .interior_compact .intent_grid {
    margin-top: 25px;
  }

  .interior_compact .catalog_section {
    padding-top: clamp(42px, 4.5vw, 64px);
    padding-bottom: clamp(42px, 4.5vw, 64px);
  }

  .section_intro { max-width: 700px; }

  .section_intro h2,
  .split_statement h2,
  .media_copy h2,
  .fit_panel h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.03;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  .section_intro > p:last-child,
  .section_copy p,
  .media_copy > p,
  .fit_panel > p {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--interior_muted);
  }

  .section_intro > p:last-child { margin: 18px 0 0; max-width: 58ch; }
  .wide_intro { max-width: 860px; }

  .intent_section { background: var(--interior_ground); }

  .intent_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-top: 38px;
  }

  .intent_grid_six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .intent_card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 230px;
    padding: 23px;
    overflow: hidden;
    border: 1px solid var(--interior_line);
    border-radius: 17px;
    background: var(--interior_card);
    color: var(--interior_ink);
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(16,43,49,.06);
    transition: transform .28s var(--ease), border-color .28s ease, box-shadow .28s ease;
  }

  .intent_card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--interior_teal);
    transform: scaleX(.18);
    transform-origin: left;
    transition: transform .28s var(--ease);
  }

  .intent_card:hover,
  .intent_card:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(15,90,99,.45);
    box-shadow: 0 20px 45px rgba(16,43,49,.11);
  }

  .intent_card:hover::after,
  .intent_card:focus-visible::after { transform: scaleX(1); }

  .intent_number {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 11px;
    background: var(--interior_teal_soft);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--interior_teal);
  }

  .intent_card strong {
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.018em;
  }

  .intent_card > span:last-child {
    font-size: 14px;
    line-height: 1.55;
    color: var(--interior_muted);
  }

  .agency_section { background: var(--interior_card); }

  .split_statement {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(38px, 6vw, 90px);
    align-items: start;
  }

  .section_copy p { margin: 0 0 17px; }
  .section_copy p:last-child { margin-bottom: 0; }

  .agency_line {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 58px;
    border: 1px solid var(--interior_line);
    border-radius: 15px;
    overflow: hidden;
    background: #FBFCFA;
  }

  .agency_line span {
    padding: 20px 12px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--interior_teal);
    border-right: 1px solid var(--interior_line);
  }

  .agency_line span:last-child { border-right: 0; }

  .soft_section { background: var(--interior_soft); }

  .moment_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 42px;
  }

  .moment_card {
    min-height: 250px;
    padding: 27px;
    border: 1px solid rgba(15,90,99,.16);
    border-radius: 18px;
    background: rgba(255,255,255,.88);
    color: var(--interior_ink);
    text-decoration: none;
    transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
  }

  a.moment_card:hover,
  a.moment_card:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(232,163,61,.55);
    box-shadow: 0 18px 42px rgba(16,43,49,.1);
  }

  .moment_card.featured_card {
    background: #FFF6E8;
    border-color: rgba(232,163,61,.45);
  }

  .moment_tag {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--interior_teal_soft);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--interior_teal);
  }

  .featured_card .moment_tag { background: #FFE7C1; color: #8E5512; }

  .moment_card h3 {
    margin: 28px 0 10px;
    font-size: clamp(21px, 2.3vw, 29px);
    line-height: 1.15;
    letter-spacing: -.024em;
  }

  .moment_card p {
    margin: 0;
    max-width: 48ch;
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--interior_muted);
  }

  .compare_section { background: #FBFCFA; }

  .compare_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 42px;
  }

  .compare_card {
    min-height: 440px;
    padding: clamp(28px, 4vw, 45px);
    border: 1px solid rgba(15,90,99,.24);
    border-radius: 21px;
    background: linear-gradient(150deg, #FFFFFF 0%, #EFF7F4 100%);
  }

  .compare_card.amber_card {
    border-color: rgba(232,163,61,.4);
    background: linear-gradient(150deg, #FFFFFF 0%, #FFF4E3 100%);
  }

  .compare_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  .compare_number {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--interior_teal);
  }

  .compare_label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--interior_muted);
  }

  .compare_card h3 {
    margin: 62px 0 15px;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -.04em;
  }

  .compare_card > p {
    margin: 0;
    max-width: 48ch;
    font-size: 16px;
    line-height: 1.62;
    color: var(--interior_muted);
  }

  .compare_card ul {
    display: grid;
    gap: 12px;
    margin: 30px 0 0;
    padding: 24px 0 0;
    list-style: none;
    border-top: 1px solid var(--interior_line);
  }

  .compare_card li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    line-height: 1.5;
  }

  .compare_card li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .46em;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--interior_amber);
    border-bottom: 2px solid var(--interior_amber);
    transform: rotate(-45deg);
  }

  .catalog_section {
    background:
      linear-gradient(rgba(15,76,92,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,76,92,.035) 1px, transparent 1px),
      #F3F9F6;
    background-size: 36px 36px;
  }

  .catalog_intro {
    max-width: 780px;
  }

  .catalog_jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
  }

  .catalog_jump a {
    padding: 9px 13px;
    border: 1px solid rgba(15,76,92,.23);
    border-radius: 3px;
    background: rgba(255,255,255,.76);
    color: var(--interior_teal);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color .2s ease, background-color .2s ease;
  }

  .catalog_jump a:hover,
  .catalog_jump a:focus-visible {
    border-color: var(--interior_amber);
    background: #FFF6E8;
  }

  .catalog_jump_featured {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 30px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: #092F39;
    box-shadow: 0 16px 34px rgba(5,32,42,.16);
  }

  .catalog_jump.catalog_jump_featured a {
    --jump_tone: #57C98A;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 58px;
    padding: 12px 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 8px;
    background: rgba(255,255,255,.045);
    color: #FFFFFF;
    font-family: var(--font-display);
    text-align: left;
    box-shadow: none;
    transition: transform .22s var(--ease), background-color .22s ease, border-color .22s ease;
  }

  .catalog_jump.catalog_jump_featured a::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--jump_tone);
    content: '';
  }

  .catalog_jump.catalog_jump_featured a span {
    color: var(--jump_tone);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
  }

  .catalog_jump.catalog_jump_featured a strong {
    font-size: clamp(12px, 1.15vw, 15px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.015em;
    text-transform: uppercase;
  }

  .catalog_jump.catalog_jump_featured .jump_rapid { --jump_tone: #57C98A; }
  .catalog_jump.catalog_jump_featured .jump_dot { --jump_tone: #E8A33D; color: #FFFFFF; }
  .catalog_jump.catalog_jump_featured .jump_nondot { --jump_tone: #54A7C0; }
  .catalog_jump.catalog_jump_featured .jump_alcohol { --jump_tone: #3FA96F; }
  .catalog_jump.catalog_jump_featured .jump_hair { --jump_tone: #54A7C0; }
  .catalog_jump.catalog_jump_featured .jump_nail { --jump_tone: #57C98A; }
  .catalog_jump.catalog_jump_featured .jump_oral { --jump_tone: #54A7C0; }
  .catalog_jump.catalog_jump_featured .jump_oral_alt { --jump_tone: #57C98A; }
  .catalog_jump.catalog_jump_featured .jump_dna_relationship { --jump_tone: #54A7C0; }
  .catalog_jump.catalog_jump_featured .jump_dna_family { --jump_tone: #57C98A; }
  .catalog_jump.catalog_jump_featured .jump_dna_personal { --jump_tone: #E8A33D; }
  .catalog_jump.catalog_jump_featured .jump_dna_official { --jump_tone: #E4F0E2; }

  .catalog_jump_featured.catalog_jump_two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog_jump.catalog_jump_featured a:hover,
  .catalog_jump.catalog_jump_featured a:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--jump_tone) 62%, white);
    background: rgba(255,255,255,.1);
    box-shadow: none;
    filter: none;
  }

  .catalog_family_header {
    margin-top: clamp(42px, 6vw, 68px);
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid rgba(228,240,226,.13);
    border-left: 6px solid var(--accent);
    border-radius: 10px;
    background:
      radial-gradient(circle at 92% 12%, rgba(23,103,124,.28), transparent 32%),
      linear-gradient(135deg, #073B45 0%, #052A34 100%);
    box-shadow: 0 16px 34px rgba(5,32,42,.16);
  }

  .catalog_family_header p {
    margin: 0 0 6px;
    color: #F3B255;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .catalog_family_header h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(30px, 4vw, 52px);
    line-height: .98;
    letter-spacing: -.045em;
  }

  .catalog_family_header span {
    display: block;
    max-width: 760px;
    margin-top: 12px;
    color: rgba(228,240,226,.72);
    font-size: 13px;
    line-height: 1.5;
  }

  .urine_family { --family_tone: #0F5A63; --family_soft: #DDF0EA; }
  .alcohol_family { --family_tone: #17677C; --family_soft: #E2F0F3; }
  .hair_family { --family_tone: #17677C; --family_soft: #E2F0F3; }
  .nail_family { --family_tone: #17677C; --family_soft: #E2F0F3; }
  .oral_family { --family_tone: #17677C; --family_soft: #E2F0F3; }
  .dna_relationship_family { --family_tone: #17677C; --family_soft: #E2F0F3; }
  .dna_family_family { --family_tone: #17677C; --family_soft: #E2F0F3; }
  .dna_personal_family { --family_tone: #D49231; --family_soft: #FBF6EB; }
  .dna_official_family { --family_tone: #0F5A63; --family_soft: #DDF0EA; }

  .catalog_group {
    margin-top: clamp(30px, 4vw, 44px);
    scroll-margin-top: 108px;
  }

  .catalog_group + .catalog_group {
    margin-top: 34px;
  }

  .catalog_group_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 13px;
    border-bottom: 1px solid rgba(15,76,92,.19);
    font-family: var(--font-mono);
    text-transform: uppercase;
  }

  .catalog_group_head span {
    font-size: clamp(14px, 1.45vw, 17px);
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--interior_teal);
  }

  .catalog_group_head small {
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--interior_muted);
  }

  .catalog_subhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
    padding: 0 2px;
    scroll-margin-top: 108px;
    font-family: var(--font-mono);
    text-transform: uppercase;
  }

  .catalog_subhead span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--interior_ink);
  }

  .catalog_subhead small {
    font-size: 9px;
    letter-spacing: .09em;
    color: var(--interior_muted);
  }

  .catalog_grid {
    display: grid;
    gap: 12px;
    margin-top: 14px;
  }

  .testing_directory {
    scroll-margin-top: 96px;
  }

  .category_group {
    margin-top: clamp(30px, 5vw, 54px);
  }

  .category_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
  }

  .category_grid_single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
  }

  .category_grid_three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .category_card {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 13px;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(15,76,92,.18);
    border-top: 3px solid var(--interior_teal);
    border-radius: 4px;
    color: var(--interior_ink);
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 32px rgba(5,32,42,.055);
    text-decoration: none;
    transition: transform .32s var(--ease), border-color .32s ease, box-shadow .32s ease;
  }

  .category_card:hover,
  .category_card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(15,76,92,.42);
    box-shadow: 0 18px 38px rgba(5,32,42,.1);
  }

  .category_card.featured_card {
    border-top-color: var(--amber);
  }

  .category_number,
  .category_eyebrow,
  .category_card strong {
    font-family: var(--font-mono);
    text-transform: uppercase;
  }

  .category_number {
    padding-top: 4px;
    color: var(--interior_teal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
  }

  .category_eyebrow {
    margin: 0;
    color: var(--interior_muted);
    font-size: 9px;
    letter-spacing: .1em;
  }

  .category_card h3 {
    margin: 7px 0 12px;
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.05;
  }

  .category_panel_list {
    display: grid;
    gap: 5px;
    margin: 0 0 18px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(15,76,92,.12);
    list-style: none;
  }

  .category_panel_list_compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category_panel_list li {
    position: relative;
    padding-left: 12px;
    color: var(--interior_muted);
    font-size: 11px;
    line-height: 1.35;
  }

  .category_panel_list li::before {
    position: absolute;
    top: .52em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--amber);
    content: '';
  }

  .category_card strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    color: var(--interior_teal);
    font-size: 10px;
    letter-spacing: .07em;
  }

  @media (max-width: 960px) {
    .category_grid_three { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 700px) {
    .category_grid { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 440px) {
    .category_card { grid-template-columns: 24px minmax(0, 1fr); padding: 15px; }
    .category_panel_list_compact { grid-template-columns: minmax(0, 1fr); }
  }

  .catalog_grid_two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog_grid_three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .unified_panel_catalog .catalog_group {
    scroll-margin-top: 106px;
  }

  .unified_panel_catalog .catalog_subhead {
    scroll-margin-top: 106px;
  }

  .lab_catalog_group .catalog_subhead:not(:first-of-type) {
    margin-top: 30px;
  }

  .panel_showcase_grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .panel_showcase_single {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc((100% - 36px) / 4);
  }

  .catalog_card.panel_showcase_card {
    min-height: 168px;
    padding: 13px;
    opacity: 1;
    border: 1px solid color-mix(in srgb, var(--catalog_accent) 24%, #D6E3E2);
    border-radius: 11px;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(5,32,42,.035);
    filter: none;
  }

  .catalog_card.panel_showcase_card,
  .catalog_card.panel_showcase_card > *,
  .catalog_card.panel_showcase_card * {
    opacity: 1;
  }

  .catalog_card.panel_showcase_card::before {
    display: none;
  }

  .catalog_card.panel_showcase_card h3 {
    margin: 6px 0 0;
    color: #123B54;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(15px, 1.2vw, 17px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
  }

  .catalog_card.panel_showcase_card .catalog_specimen,
  .catalog_card.panel_showcase_card .catalog_detail_label {
    display: none;
  }

  .catalog_card.panel_showcase_card .catalog_summary {
    display: -webkit-box;
    min-height: 43px;
    margin-top: 7px;
    overflow: hidden;
    color: var(--interior_muted);
    font-size: 12.25px;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .catalog_card.panel_showcase_card .panel_showcase_tat {
    min-height: 0;
    margin: 8px 0 0;
    padding: 6px 8px;
    font-size: 9.75px;
    line-height: 1.35;
  }

  .catalog_card.panel_showcase_card .panel_includes_label {
    margin: 10px 0 0;
    color: var(--catalog_accent);
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
    font-size: 9.5px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  .catalog_card.panel_showcase_card ul,
  .catalog_card.panel_showcase_card .catalog_substances_long {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin: 6px 0 12px;
    padding: 8px 0 0;
    border-top: 1px solid var(--interior_line);
  }

  .catalog_card.panel_showcase_card .catalog_substances_long {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
  }

  .catalog_card.panel_showcase_card li {
    padding-left: 10px;
    color: var(--interior_muted);
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    opacity: 1;
  }

  .catalog_card.panel_showcase_card li::before {
    width: 3px;
    height: 3px;
    top: .54em;
  }

  .panel_card_topline {
    display: flex;
    min-height: 14px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .panel_card_category {
    color: var(--catalog_accent);
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
    font-size: 9.5px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .105em;
    text-transform: uppercase;
  }

  .panel_card_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--interior_line);
  }

  .catalog_card.panel_showcase_card .panel_card_footer .catalog_price {
    flex: 0 0 auto;
    margin: 0;
    color: #123B54;
    font-family: var(--font-panel-serif);
    font-size: clamp(19px, 1.65vw, 23px);
    font-weight: 700;
    font-synthesis: none;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: "lnum" 1, "pnum" 1;
    line-height: 1;
    letter-spacing: -.025em;
  }

  .catalog_card.panel_showcase_card .panel_card_footer .catalog_price_call {
    max-width: 100px;
    font-size: 10px;
  }

  .catalog_card.panel_showcase_card .catalog_action {
    width: auto;
    min-height: 28px;
    margin: 0;
    padding: 6px 11px;
    border-color: var(--catalog_accent);
    border-radius: 5px;
    background: var(--catalog_accent);
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: none;
  }

  .catalog_card.panel_showcase_card .catalog_badge {
    padding: 3px 7px;
    background: color-mix(in srgb, var(--catalog_accent) 14%, white);
    color: var(--catalog_accent);
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
    font-size: 9px;
    font-weight: 900;
  }

  .catalog_card.panel_showcase_card:is(.panel_tone_rapid,.panel_tone_hair,.panel_tone_dna-relationship) { --catalog_accent: #123E39; }
  .catalog_card.panel_showcase_card.panel_tone_dot { --catalog_accent: #1A5E57; }
  .catalog_card.panel_showcase_card.panel_tone_oral { --catalog_accent: #226A62; }
  .catalog_card.panel_showcase_card.panel_tone_dna-official { --catalog_accent: #1A5E57; }
  .catalog_card.panel_showcase_card.panel_tone_nondot { --catalog_accent: #337E96; }
  .catalog_card.panel_showcase_card.panel_tone_alcohol { --catalog_accent: #3A968D; }
  .catalog_card.panel_showcase_card:is(.panel_tone_nail,.panel_tone_dna-family,.panel_tone_dna-personal) { --catalog_accent: #337E96; }

  .catalog_card.panel_showcase_card.panel_tone_dot .catalog_action {
    color: #10262C;
  }

  .catalog_tone_rapid .catalog_group_head { border-bottom-color: #0F5A63; }
  .catalog_tone_alcohol .catalog_group_head { border-bottom-color: #17677C; }
  .catalog_tone_alcohol .catalog_group_head span { color: #17677C; }
  .catalog_tone_hair .catalog_group_head { border-bottom-color: #17677C; }
  .catalog_tone_hair .catalog_group_head span { color: #17677C; }
  .catalog_tone_nail .catalog_group_head { border-bottom-color: #17677C; }
  .catalog_tone_nail .catalog_group_head span { color: #17677C; }
  .catalog_tone_oral .catalog_group_head { border-bottom-color: #17677C; }
  .catalog_tone_oral .catalog_group_head span { color: #17677C; }
  .catalog_tone_dna_relationship .catalog_group_head { border-bottom-color: #17677C; }
  .catalog_tone_dna_relationship .catalog_group_head span { color: #17677C; }
  .catalog_tone_dna_family .catalog_group_head { border-bottom-color: #17677C; }
  .catalog_tone_dna_family .catalog_group_head span { color: #17677C; }
  .catalog_tone_dna_personal .catalog_group_head { border-bottom-color: #D49231; }
  .catalog_tone_dna_personal .catalog_group_head span { color: #D49231; }
  .catalog_tone_dna_official .catalog_group_head { border-bottom-color: #0F5A63; }
  .catalog_tone_dna_official .catalog_group_head span { color: #0F5A63; }

  .static_panel_showcase .catalog_card.panel_showcase_card .catalog_specimen {
    display: block;
    margin: 6px 0 0;
    color: var(--catalog_accent);
    font-size: 9.5px;
  }

  .static_panel_showcase .catalog_card.panel_showcase_card .catalog_summary {
    margin-top: 7px;
  }

  .static_panel_showcase .catalog_card.panel_showcase_card .panel_includes_label {
    display: block;
  }

  .static_panel_showcase .catalog_card.panel_showcase_card .catalog_price_call {
    max-width: 112px;
  }
  #dot-urine-panels { padding-left: 10px; border-left: 4px solid #E8A33D; }
  #non-dot-urine-panels { padding-left: 10px; border-left: 4px solid #17677C; }

  @media (hover: hover) {
    .catalog_card.panel_showcase_card:hover,
    .catalog_card.panel_showcase_card:focus-within {
      transform: translateY(-4px);
      border-color: #E8A33D;
      color: #EFF7F1;
      background:
        radial-gradient(circle at 88% 9%, rgba(232,163,61,.14), transparent 29%),
        radial-gradient(circle at 90% 88%, rgba(23,103,124,.20), transparent 34%),
        linear-gradient(145deg, #0A3E4B 0%, #052731 100%);
      box-shadow: 0 18px 38px rgba(5,32,42,.24);
    }

    .catalog_card.panel_showcase_card:hover h3,
    .catalog_card.panel_showcase_card:focus-within h3 {
      color: #FFFFFF;
    }

    .catalog_card.panel_showcase_card:hover .catalog_badge,
    .catalog_card.panel_showcase_card:focus-within .catalog_badge {
      background: rgba(232,163,61,.22);
      color: #F5C47B;
    }

    .catalog_card.panel_showcase_card:hover .panel_card_category,
    .catalog_card.panel_showcase_card:focus-within .panel_card_category {
      color: #E4F0E2;
    }

    .catalog_card.panel_showcase_card:hover .panel_includes_label,
    .catalog_card.panel_showcase_card:focus-within .panel_includes_label {
      color: #E4F0E2;
    }

    .catalog_card.panel_showcase_card:hover .catalog_summary,
    .catalog_card.panel_showcase_card:focus-within .catalog_summary,
    .catalog_card.panel_showcase_card:hover li,
    .catalog_card.panel_showcase_card:focus-within li {
      color: #DCE9E5;
    }

    .catalog_card.panel_showcase_card:hover ul,
    .catalog_card.panel_showcase_card:focus-within ul {
      border-top-color: rgba(239,247,241,.18);
    }

    .catalog_card.panel_showcase_card:hover .panel_card_footer,
    .catalog_card.panel_showcase_card:focus-within .panel_card_footer {
      border-top-color: rgba(239,247,241,.18);
    }

    .catalog_card.panel_showcase_card:hover .panel_card_footer .catalog_price,
    .catalog_card.panel_showcase_card:focus-within .panel_card_footer .catalog_price {
      color: #F5C47B;
    }

    .catalog_card.panel_showcase_card:hover .catalog_action,
    .catalog_card.panel_showcase_card:focus-within .catalog_action {
      border-color: #E8A33D;
      background: #F0AA3D;
      color: #092C36;
    }
  }

  @media (max-width: 1080px) {
    .panel_showcase_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .panel_showcase_single { max-width: calc((100% - 24px) / 3); }
  }

  @media (max-width: 820px) {
    .panel_showcase_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel_showcase_single { max-width: calc((100% - 12px) / 2); }
    .catalog_jump_featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 620px) {
    .panel_showcase_grid { grid-template-columns: minmax(0, 1fr); }
    .panel_showcase_single { max-width: none; }
    .catalog_jump_featured { grid-template-columns: minmax(0, 1fr); }
    .catalog_jump.catalog_jump_featured a { min-height: 58px; }
  }

  .catalog_grid_four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .catalog_grid_four .catalog_card {
    min-height: 0;
    padding: 13px;
  }

  .catalog_grid_four .catalog_card h3 {
    margin-top: 10px;
    font-size: clamp(17px, 1.55vw, 21px);
  }

  .catalog_grid_four .catalog_price {
    font-size: clamp(22px, 2vw, 28px);
  }

  .catalog_grid_four .catalog_summary {
    font-size: 11.5px;
  }

  .catalog_grid_four .catalog_card ul {
    gap: 4px;
    margin: 10px 0 12px;
    padding-top: 9px;
  }

  .catalog_grid_four .catalog_card li {
    padding-left: 12px;
    font-size: 10.5px;
    line-height: 1.28;
  }

  .catalog_grid_four .catalog_substances_long {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog_grid_four .catalog_action {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 11px;
  }

  @media (max-width: 1120px) {
    .catalog_grid_four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 760px) {
    .catalog_grid_four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 520px) {
    .catalog_grid_four { grid-template-columns: minmax(0, 1fr); }
  }

  .catalog_card {
    --catalog_accent: var(--interior_teal);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    padding: clamp(16px, 1.8vw, 20px);
    overflow: hidden;
    border: 1px solid rgba(15,76,92,.18);
    border-top: 3px solid var(--catalog_accent);
    border-radius: 4px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 32px rgba(5,32,42,.055);
    isolation: isolate;
    transition:
      transform .32s var(--ease),
      border-color .32s ease,
      box-shadow .32s ease,
      color .32s ease;
  }

  .catalog_card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
      radial-gradient(circle at 90% 8%, rgba(232,163,61,.2), transparent 31%),
      linear-gradient(145deg, #0A3E4B 0%, #052731 100%);
    opacity: 0;
    transition: opacity .32s ease;
  }

  .catalog_card_featured {
    border-color: rgba(15,76,92,.58);
    box-shadow: 0 15px 38px rgba(5,32,42,.08);
  }

  .catalog_card_amber {
    --catalog_accent: var(--interior_amber);
  }

  .catalog_badge {
    align-self: flex-start;
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(15,76,92,.09);
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--interior_teal);
    transition: background-color .32s ease, color .32s ease;
  }

  .catalog_card_amber .catalog_badge {
    background: rgba(232,163,61,.16);
    color: #8E5512;
  }

  .catalog_card h3 {
    margin: 13px 0 5px;
    font-size: clamp(20px, 2.1vw, 26px);
    line-height: 1.06;
    letter-spacing: -.03em;
    text-wrap: balance;
  }

  .catalog_specimen {
    margin: 7px 0 0;
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--interior_teal);
    transition: color .32s ease;
  }

  .catalog_detail_label {
    margin: 13px 0 -8px;
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--interior_teal);
    transition: color .32s ease;
  }

  .catalog_price {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: clamp(26px, 2.8vw, 34px);
    line-height: 1;
    font-weight: 750;
    letter-spacing: -.035em;
    color: var(--interior_teal);
    transition: color .32s ease;
  }

  .catalog_price small {
    margin-right: 4px;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .catalog_price_call {
    min-height: 24px;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .catalog_summary {
    margin: 0;
    min-height: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--interior_muted);
    transition: color .32s ease;
  }

  .catalog_tat {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-left: 3px solid var(--interior_amber);
    background: rgba(232,163,61,.09);
    font-family: var(--font-mono);
    font-size: 8.5px;
    line-height: 1.45;
    letter-spacing: .04em;
    color: var(--interior_muted);
    transition: color .32s ease, background-color .32s ease;
  }

  .catalog_card ul {
    display: grid;
    gap: 6px;
    margin: 14px 0 16px;
    padding: 12px 0 0;
    list-style: none;
    border-top: 1px solid var(--interior_line);
    transition: border-color .32s ease;
  }

  .catalog_card li {
    position: relative;
    padding-left: 14px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--interior_muted);
    transition: color .32s ease;
  }

  .catalog_card li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: .55em;
    width: 4px;
    height: 4px;
    background: var(--catalog_accent);
  }

  .catalog_substances_long {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }

  .catalog_action {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    width: 100%;
    margin-top: auto;
    padding: 9px 14px;
    border: 1px solid var(--interior_teal);
    border-radius: 3px;
    background: var(--interior_teal);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  }

  .catalog_action span {
    font-family: var(--font-mono);
    transition: transform .25s var(--ease);
  }

  .catalog_reg_note {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(15,76,92,.17);
    border-left: 3px solid var(--interior_amber);
    background: rgba(255,255,255,.68);
    font-size: 12px;
    line-height: 1.5;
    color: var(--interior_muted);
  }

  .catalog_reg_note strong {
    color: var(--interior_ink);
  }

  .catalog_reg_note a {
    color: var(--interior_teal);
    font-weight: 700;
  }

  .catalog_action:hover span,
  .catalog_action:focus-visible span {
    transform: translateX(4px);
  }

  @media (hover: hover) {
    .catalog_card:hover,
    .catalog_card:focus-within {
      transform: translateY(-9px) scale(1.012);
      border-color: rgba(232,163,61,.72);
      color: #EFF7F1;
      box-shadow: 0 28px 60px rgba(5,32,42,.2);
    }

    .catalog_card:hover::before,
    .catalog_card:focus-within::before {
      opacity: 1;
    }

    .catalog_card:hover .catalog_badge,
    .catalog_card:focus-within .catalog_badge {
      background: rgba(232,163,61,.18);
      color: #F5C47B;
    }

    .catalog_card:hover .catalog_summary,
    .catalog_card:hover .catalog_tat,
    .catalog_card:hover .catalog_specimen,
    .catalog_card:hover .catalog_detail_label,
    .catalog_card:hover li,
    .catalog_card:focus-within .catalog_summary,
    .catalog_card:focus-within .catalog_tat,
    .catalog_card:focus-within .catalog_specimen,
    .catalog_card:focus-within .catalog_detail_label,
    .catalog_card:focus-within li {
      color: rgba(239,247,241,.78);
    }

    .catalog_card:hover .catalog_tat,
    .catalog_card:focus-within .catalog_tat {
      background: rgba(232,163,61,.12);
    }

    .catalog_card:hover .catalog_price,
    .catalog_card:focus-within .catalog_price {
      color: #F5C47B;
    }

    .catalog_card:hover ul,
    .catalog_card:focus-within ul {
      border-color: rgba(239,247,241,.18);
    }

    .catalog_card:hover .catalog_action,
    .catalog_card:focus-within .catalog_action {
      border-color: var(--interior_amber);
      background: var(--interior_amber);
      color: #092C36;
    }
  }

  .media_story {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
    background: var(--interior_ground);
  }

  .video_frame {
    position: relative;
    overflow: hidden;
    min-height: 510px;
    border-radius: 22px;
    border: 1px solid var(--interior_line);
    background: #E6EFEA;
    box-shadow: 0 26px 60px rgba(16,43,49,.13);
  }

  .video_frame video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 510px;
    object-fit: cover;
  }

  .media_badge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--interior_teal);
  }

  .media_copy > p { margin: 21px 0 0; }

  .mini_process {
    display: grid;
    gap: 0;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--interior_line);
  }

  .mini_process li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 15px;
    padding: 17px 0;
    border-bottom: 1px solid var(--interior_line);
    font-size: 15px;
    line-height: 1.45;
  }

  .mini_process span {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--interior_amber);
  }

  .signal_band {
    display: grid;
    grid-template-columns: 90px minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(28px, 5vw, 70px);
    align-items: center;
    padding: clamp(64px, 7vw, 100px) max(var(--gut), (100% - var(--measure)) / 2);
    color: var(--mint);
    background:
      radial-gradient(circle at 88% 20%, rgba(23,103,124,.3), transparent 38%),
      #07303B;
  }

  .signal_marker {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 1px solid rgba(228,240,226,.24);
    border-radius: 50%;
  }

  .signal_marker span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--interior_amber);
    box-shadow: 0 0 0 10px rgba(232,163,61,.12);
    animation: signal_pulse 2.8s ease infinite;
  }

  @keyframes signal_pulse {
    0%, 100% { box-shadow: 0 0 0 8px rgba(232,163,61,.1); }
    50% { box-shadow: 0 0 0 17px rgba(232,163,61,.02); }
  }

  .signal_band h2 {
    margin: 0;
    max-width: 18ch;
    font-size: clamp(28px, 3.8vw, 46px);
    line-height: 1.08;
    letter-spacing: -.03em;
    text-wrap: balance;
  }

  .signal_copy p {
    margin: 0 0 15px;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(228,240,226,.78);
  }

  .signal_copy .signal_note {
    margin-top: 22px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(228,240,226,.52);
  }

  .detail_section { background: var(--interior_card); }

  .detail_stack {
    display: grid;
    gap: 12px;
    max-width: 920px;
    margin-top: 42px;
  }

  .detail_stack details {
    border: 1px solid var(--interior_line);
    border-radius: 15px;
    background: #FBFCFA;
    overflow: hidden;
  }

  .detail_stack summary {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 23px 62px 23px 24px;
    cursor: pointer;
    list-style: none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
  }

  .detail_stack summary::-webkit-details-marker { display: none; }

  .detail_stack summary::after {
    content: "+";
    position: absolute;
    right: 23px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    background: var(--interior_teal_soft);
    color: var(--interior_teal);
    font-size: 19px;
    font-weight: 500;
  }

  .detail_stack details[open] summary::after { content: "−"; }

  .detail_hint {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--interior_muted);
  }

  .detail_body {
    padding: 0 62px 26px 24px;
    border-top: 1px solid var(--interior_line);
  }

  .detail_body p {
    margin: 20px 0 0;
    max-width: 70ch;
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--interior_muted);
  }

  .fit_section { background: var(--interior_ground); }

  .fit_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .fit_panel {
    min-height: 370px;
    padding: clamp(30px, 4vw, 48px);
    border-radius: 20px;
  }

  .good_fit {
    background: #E3F2EC;
    border: 1px solid rgba(15,90,99,.2);
  }

  .needs_help {
    background: #FFF3E2;
    border: 1px solid rgba(232,163,61,.35);
  }

  .fit_panel h2 { font-size: clamp(28px, 3.3vw, 42px); }

  .clean_checklist {
    display: grid;
    gap: 16px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
  }

  .clean_checklist li {
    position: relative;
    padding-left: 30px;
    font-size: 15.5px;
    line-height: 1.55;
  }

  .clean_checklist li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .48em;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--interior_teal);
    border-bottom: 2px solid var(--interior_teal);
    transform: rotate(-45deg);
  }

  .prepare_section { background: var(--interior_card); }

  .large_checklist { margin-top: 0; }
  .large_checklist li { font-size: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--interior_line); }

  .prepare_note {
    margin: 25px 0 0;
    padding: 17px 18px;
    border-left: 3px solid var(--interior_amber);
    background: #FFF7EA;
    font-size: 14.5px;
    line-height: 1.55;
  }

  @media (max-width: 1040px) {
    .visual_hero { grid-template-columns: minmax(0, 1fr); }
    .visual_copy { max-width: 760px; }
    .visual_copy h1 { max-width: 14ch; }
    .visual_media { max-width: 820px; }
    .intent_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog_grid_three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .signal_band { grid-template-columns: 70px minmax(0, 1fr); }
    .signal_copy { grid-column: 2; }
  }

  @media (max-width: 760px) {
    .visual_hero,
    .section_shell,
    .signal_band {
      padding-inline: 22px;
    }

    .visual_hero { padding-block: 48px 64px; }
    .visual_copy h1 { font-size: clamp(39px, 13vw, 58px); }
    .visual_media::before { inset: 10px -10px -10px 10px; }
    .visual_media figcaption { left: 12px; right: 12px; bottom: 12px; }

    .intent_grid,
    .moment_grid,
    .compare_grid,
    .catalog_grid_two,
    .catalog_grid_three,
    .fit_grid,
    .split_statement,
    .media_story {
      grid-template-columns: minmax(0, 1fr);
    }

    .intent_card { min-height: 205px; }
    .agency_line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .agency_line span:nth-child(3) { border-right: 0; }
    .agency_line span:nth-child(-n+3) { border-bottom: 1px solid var(--interior_line); }
    .compare_card { min-height: 0; }
    .catalog_card { min-height: 0; }
    .video_frame,
    .video_frame video { min-height: 390px; }

    .signal_band { grid-template-columns: minmax(0, 1fr); }
    .signal_marker { width: 60px; height: 60px; }
    .signal_copy { grid-column: auto; }
  }

  @media (max-width: 480px) {
    .proof_line { display: grid; }
    .intent_grid { grid-template-columns: minmax(0, 1fr); }
    .catalog_substances_long { grid-template-columns: minmax(0, 1fr); }
    .catalog_group_head { display: grid; gap: 7px; }
    .visual_media figcaption { position: relative; left: auto; right: auto; bottom: auto; margin-top: 12px; }
    .visual_media img { aspect-ratio: 4 / 3; }
    .agency_line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agency_line span:nth-child(3) { border-right: 1px solid var(--interior_line); }
    .agency_line span:nth-child(2n) { border-right: 0; }
    .agency_line span:nth-child(-n+4) { border-bottom: 1px solid var(--interior_line); }
  }

  @media (prefers-reduced-motion: reduce) {
    .intent_card { transition: none; }
    .catalog_card,
    .catalog_card::before,
    .catalog_action span { transition: none; }
    .catalog_card:hover,
    .catalog_card:focus-within { transform: none; }
    .signal_marker span { animation: none; }
  }

  .interior .visual_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .intent_card > span:first-child {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 11px;
    background: var(--interior_teal_soft);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--interior_teal);
  }

  .intent_card h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.018em;
  }

  .intent_card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--interior_muted);
  }

  .moment_card > span:first-child {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--interior_teal_soft);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--interior_teal);
  }

  .featured_card > span:first-child {
    background: #FFE7C1;
    color: #8E5512;
  }

  .compare_grid {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  }

  .compare_card .visual_kicker {
    margin-bottom: 0;
  }

  .compare_card .visual_kicker + h3 {
    margin-top: 54px;
  }

  .compare_card .text_action {
    margin-top: 28px;
  }

  .signal_marker:not(:has(span)) {
    display: inline-flex;
    width: auto;
    height: auto;
    padding: 8px 11px;
    place-self: start;
    border: 1px solid rgba(228,240,226,.25);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--interior_amber);
  }

  .signal_marker:not(:has(span)) + .signal_copy {
    grid-column: 2 / -1;
  }

  .signal_copy h2 {
    margin: 0 0 22px;
    max-width: 21ch;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.05;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  .signal_copy .text_action,
  .legal_signal a {
    color: #F5C47B;
    border-color: rgba(245,196,123,.45);
  }

  .brand_frame video {
    filter: brightness(1.08) saturate(.88);
  }

  .location_card {
    position: relative;
    min-height: 480px;
    padding: clamp(32px, 5vw, 58px);
    overflow: hidden;
    border: 1px solid rgba(15,90,99,.18);
    border-radius: 22px;
    background:
      radial-gradient(circle at 80% 24%, rgba(232,163,61,.2), transparent 23%),
      linear-gradient(145deg, #E5F2ED 0%, #FBF8F0 100%);
  }

  .location_card::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -100px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(15,90,99,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(255,255,255,.2), 0 0 0 84px rgba(15,90,99,.05);
  }

  .location_pin {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin-bottom: 65px;
    border-radius: 50%;
    background: var(--interior_teal);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 15px;
    box-shadow: 0 0 0 10px rgba(15,90,99,.1);
  }

  .location_card h2 {
    margin: 0 0 14px;
    max-width: 12ch;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.04em;
  }

  .location_card > p:not(.visual_kicker) {
    margin: 0 0 28px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--interior_muted);
  }

  .location_card > * { position: relative; z-index: 1; }

  .legal_document .page-head {
    background:
      radial-gradient(circle at 85% 20%, rgba(232,163,61,.12), transparent 22%),
      #F7FAF7;
  }

  .document_nav {
    position: sticky;
    top: 88px;
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px max(var(--gut), (100% - var(--measure)) / 2);
    border-bottom: 1px solid var(--interior_line);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
  }

  .document_nav a {
    padding: 8px 12px;
    border: 1px solid var(--interior_line);
    border-radius: 999px;
    color: var(--interior_teal);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
  }

  .legal_section { background: var(--interior_card); }
  .legal_section.soft_section { background: var(--interior_soft); }

  .legal_grid {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
    gap: clamp(42px, 7vw, 110px);
    align-items: start;
  }

  .legal_grid > div:first-child {
    position: sticky;
    top: 170px;
  }

  .legal_grid h2,
  .legal_copy h2 {
    margin: 0 0 22px;
    font-size: clamp(26px, 3vw, 39px);
    line-height: 1.08;
    letter-spacing: -.03em;
  }

  .legal_copy h2:not(:first-child) { margin-top: 48px; }

  .legal_copy p,
  .legal_copy li {
    font-size: 16px;
    line-height: 1.75;
  }

  .legal_copy p { margin: 0 0 20px; }
  .legal_copy ul { display: grid; gap: 12px; margin: 24px 0; padding-left: 22px; }

  .legal_signal {
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1.65fr);
    align-items: start;
  }

  .legal_signal .signal_marker:not(:has(span)) + .signal_copy { grid-column: auto; }
  .legal_signal .legal_copy h2 { color: var(--mint); }
  .legal_signal .legal_copy p,
  .legal_signal .legal_copy li { color: rgba(228,240,226,.8); }

  @media (max-width: 760px) {
    .signal_marker:not(:has(span)) + .signal_copy { grid-column: auto; }
    .document_nav { top: 72px; padding-inline: 20px; }
    .legal_grid { grid-template-columns: minmax(0, 1fr); }
    .legal_grid > div:first-child { position: static; }
    .legal_signal { grid-template-columns: minmax(0, 1fr); }
    .location_card { min-height: 420px; }
  }

  .interior {
    --interior_ground: #F3F7F6;
    --interior_soft: #E8F0ED;
    --interior_card: #FFFFFF;
    --interior_ink: #10262C;
    --interior_muted: #5C767E;
    --interior_line: #CBDCD8;
    --interior_teal: #0F4C5C;
    --interior_teal_soft: #E0ECE8;
    --interior_amber: #E8A33D;
  }

  .visual_hero {
    gap: clamp(44px, 6vw, 86px);
    background:
      linear-gradient(90deg, rgba(15,76,92,.035) 1px, transparent 1px),
      linear-gradient(180deg, rgba(15,76,92,.035) 1px, transparent 1px),
      radial-gradient(circle at 8% 12%, rgba(232,163,61,.13), transparent 24%),
      linear-gradient(135deg, #FBFCF8 0%, #EFF5F2 100%);
    background-size: 42px 42px, 42px 42px, auto, auto;
  }

  .panel_catalog_page > .visual_hero:first-child {
    padding-top: clamp(30px, 4vw, 62px);
  }

  /* URINE + ALCOHOL CATALOG — QUIET, GUIDED, FOUR-PATH EXPERIENCE */
  .trust_catalog_page {
    --trust_canvas: #F7F8F4;
    --trust_sage: #E7F0EB;
    --trust_teal_soft: #E4F0F1;
    --trust_ink: #102B31;
    --trust_muted: #587076;
    background: var(--trust_canvas);
  }

  /* Sized against the viewport, not a fixed band. Arriving on this page the
     visitor has to be able to see all four category cards below without one
     of them being sliced by the fold, so the hero takes only the share of
     the screen that leaves room for them. */
  .trust_catalog_hero {
    position: relative;
    display: grid;
    min-height: clamp(320px, 42vh, 470px);
    align-items: center;
    overflow: hidden;
    background: #052D37;
    color: #FFFFFF;
  }

  .trust_catalog_media,
  .trust_catalog_media::after {
    position: absolute;
    inset: 0;
  }

  .trust_catalog_media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 34%;
    filter: saturate(.78) contrast(1.04);
  }

  .trust_catalog_media::after {
    content: '';
    background:
      linear-gradient(90deg, rgba(5,32,42,.96) 0%, rgba(5,32,42,.83) 44%, rgba(5,32,42,.34) 76%, rgba(5,32,42,.15) 100%),
      linear-gradient(0deg, rgba(5,32,42,.64) 0%, transparent 46%);
  }

  .trust_catalog_hero_content {
    position: relative;
    z-index: 1;
    width: min(100%, 1320px);
    margin-inline: auto;
    padding: clamp(22px, 2.8vh, 60px) var(--gut) clamp(22px, 2.9vh, 64px);
  }

  .trust_hero_kicker,
  .trust_section_kicker {
    margin: 0 0 16px;
    color: #A6DAC0;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  /* Capped by height as well as width. This headline sets three lines, so
     it decides how far down the page the four category cards start, and a
     width-only clamp held it at 68px on a 900px screen and pushed the
     bottom row of cards through the fold. */
  .trust_catalog_hero h1 {
    max-width: 840px;
    margin: 0;
    font-size: min(clamp(38px, 5.2vw, 68px), 6.2vh);
    font-weight: 700;
    line-height: 1.01;
    letter-spacing: -.045em;
  }

  .trust_catalog_hero h1 span { color: #D9E9E1; }

  .trust_catalog_hero_content > p:not(.trust_hero_kicker) {
    max-width: 650px;
    margin: 24px 0 0;
    color: rgba(255,255,255,.82);
    font-size: clamp(17px, 1.55vw, 20px);
    line-height: 1.65;
  }

  .trust_hero_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-top: 32px;
  }

  .trust_text_link {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.42);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }

  .trust_path_section {
    padding: clamp(24px, 3vw, 36px) max(var(--gut), (100% - 1320px) / 2) clamp(30px, 3.5vw, 44px);
    background: #FFFFFF;
  }

  .trust_section_intro { max-width: 720px; }
  .trust_section_kicker { color: #17677C; }
  .trust_section_intro h2 {
    margin: 0;
    color: var(--trust_ink);
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .trust_section_intro > p:last-child {
    max-width: 620px;
    margin: 11px 0 0;
    color: var(--trust_muted);
    font-size: 18px;
    line-height: 1.65;
  }

  .trust_path_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
  }

  .trust_path_card {
    --path_accent: #17677C;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 14px;
    min-height: 132px;
    align-items: start;
    padding: 17px 18px;
    border: 1px solid #D7E3DF;
    border-top-color: #D7E3DF;
    border-radius: 10px;
    background: #FBFCFA;
    color: var(--trust_ink);
    font: inherit;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease;
  }

  /* A chooser card lit up in one near-black teal whatever it pointed at, so the
     Hair card and the Hair chapter it opened were different colours. The lit
     state now draws the pair belonging to that category, set on each
     .trust_path_* rule above, and the default matches the base chapter header. */
  .trust_path_card:hover,
  .trust_path_card:focus-visible,
  .trust_path_card.is-selected {
    transform: translateY(-4px);
    border-color: #E8A33D;
    background:
      radial-gradient(circle at 88% 9%, rgba(232,163,61,.14), transparent 29%),
      linear-gradient(145deg, var(--path_surface, #0A2E2B) 0%, var(--path_surface_end, #123E39) 100%);
    color: #FFFFFF;
    box-shadow: 0 18px 38px rgba(5,32,42,.24);
  }

  .trust_path_card:hover > span:first-child,
  .trust_path_card:focus-visible > span:first-child,
  .trust_path_card.is-selected > span:first-child { color: #F5C47B; }

  .trust_path_card:hover .trust_path_copy small,
  .trust_path_card:focus-visible .trust_path_copy small,
  .trust_path_card.is-selected .trust_path_copy small { color: #DCE9E5; }

  .trust_path_card > span {
    color: var(--path_accent);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
  }

  .trust_path_card > .trust_path_copy {
    display: block;
    color: var(--trust_ink);
  }

  .trust_path_card:hover .trust_path_copy,
  .trust_path_card:focus-visible .trust_path_copy,
  .trust_path_card.is-selected .trust_path_copy { color: #FFFFFF; }
  .trust_path_copy strong {
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-transform: none;
  }

  .trust_path_card .trust_path_copy small {
    display: block;
    margin-top: 7px;
    color: var(--trust_muted);
    font-size: 14.5px;
    font-weight: 400;
    font-variant: normal;
    font-variant-caps: normal;
    line-height: 1.55;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .trust_path_card .trust_path_action {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    align-self: end;
    width: 100%;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid #D7E3DF;
    color: var(--path_accent);
    font-size: 12px;
    font-weight: 500;
    font-variant: normal;
    font-variant-caps: normal;
    line-height: 1.35;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .trust_path_action b { font-size: 18px; font-weight: 400; transition: transform .2s var(--ease); }

  .trust_catalog_page .trust_path_card,
  .trust_catalog_page .trust_path_card > span,
  .trust_catalog_page .trust_path_card .trust_path_copy,
  .trust_catalog_page .trust_path_card .trust_path_copy strong,
  .trust_catalog_page .trust_path_card .trust_path_copy small,
  .trust_catalog_page .trust_path_card .trust_path_action,
  .trust_catalog_page .trust_path_card .trust_path_action b,
  .trust_catalog_page .trust_path_card::before,
  .trust_catalog_page .trust_path_card::after {
    font-variant: normal !important;
    font-variant-caps: normal !important;
    text-transform: none !important;
  }

  .trust_catalog_page .trust_path_card > span:first-child,
  .trust_catalog_page .trust_path_card .trust_path_copy small,
  .trust_catalog_page .trust_path_card .trust_path_action {
    letter-spacing: 0 !important;
  }

  .trust_path_card:hover .trust_path_action,
  .trust_path_card:focus-visible .trust_path_action,
  .trust_path_card.is-selected .trust_path_action { border-top-color: rgba(255,255,255,.24); color: #FFFFFF; }
  .trust_path_card:hover .trust_path_action b,
  .trust_path_card:focus-visible .trust_path_action b,
  .trust_path_card.is-selected .trust_path_action b { transform: translateX(3px); }

  .trust_switcher_status {
    margin: 14px 0 0;
    color: var(--trust_muted);
    font-size: 13px;
    line-height: 1.45;
  }

  .trust_catalog_chapter[hidden],
  .trust_catalog_closing[hidden] { display: none !important; }
  .trust_catalog_chapter:not([hidden]) { animation: trust-section-in .3s var(--ease) both; }
  @keyframes trust-section-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .trust_catalog_chapter:not([hidden]) { animation: none; }
  }
  /* Each chooser card carries the pair of the chapter it opens, and the pairs
     step down the shared green ramp in card order: dark at 01, light at the
     last card on that page. Same values as the .trust_chapter_* headers, the
     panel-card tones and the closing bands. */
  .trust_path_rapid,
  .trust_path_hair,
  .trust_path_dna_relationship { --path_accent: #123E39; --path_surface: #0A2E2B; --path_surface_end: #123E39; }
  .trust_path_dot { --path_accent: #1A5E57; --path_surface: #114A45; --path_surface_end: #1A5E57; }
  .trust_path_oral { --path_accent: #226A62; --path_surface: #17574F; --path_surface_end: #226A62; }
  .trust_path_dna_official { --path_accent: #1A5E57; --path_surface: #114A45; --path_surface_end: #1A5E57; }
  .trust_path_nondot { --path_accent: #337E96; --path_surface: #245E74; --path_surface_end: #337E96; }
  .trust_path_alcohol { --path_accent: #3A968D; --path_surface: #2C8078; --path_surface_end: #3A968D; }
  .trust_path_nail,
  .trust_path_dna_family,
  .trust_path_dna_personal { --path_accent: #337E96; --path_surface: #245E74; --path_surface_end: #337E96; }
  .trust_path_grid_two { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 760px; }

  .trust_catalog_chapter {
    --chapter_accent: #17677C;
    /* Was a hardcoded 88px against a bar that measures 91, so a deep link
       parked the top of the chapter a few pixels under it. Measured now. */
    scroll-margin-top: calc(var(--barh, 88px) + 8px);
    background: var(--trust_canvas);
  }

  .trust_chapter_dot { --chapter_accent: #1A5E57; background: #F1F5F4; }
  .trust_chapter_nondot { --chapter_accent: #337E96; background: #F1F5F4; }
  .trust_chapter_alcohol { --chapter_accent: #3A968D; background: #F1F5F4; }
  .trust_chapter_rapid { --chapter_accent: #123E39; }

  .trust_chapter_header {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: clamp(16px, 2.5vw, 30px);
    align-items: center;
    padding: clamp(16px, 2.2vw, 24px) max(var(--gut), (100% - 1320px) / 2);
    border-block: 1px solid rgba(228,240,226,.24);
    background:
      radial-gradient(circle at 88% 18%, rgba(126,201,188,.20), transparent 30%),
      linear-gradient(112deg, #0A2E2B 0%, #123E39 100%);
    color: #FFFFFF;
  }

  /* Rapid takes the teal its own panel cards use. #0F4C5C is the colour a card
     turns on hover, #17677C is the card's top rule, so the header now reads as
     the same object as the grid underneath it instead of a separate green. */
  /* Chapter headers, one green ramp shared by every page. Each pair is
     repeated by that category's chooser card, panel cards and closing band. */
  .trust_chapter_rapid .trust_chapter_header,
  .trust_chapter_hair .trust_chapter_header,
  .trust_chapter_dna_relationship .trust_chapter_header {
    background:
      radial-gradient(circle at 88% 18%, rgba(126,201,188,.20), transparent 30%),
      linear-gradient(112deg, #0A2E2B 0%, #123E39 100%);
  }

  .trust_chapter_dot .trust_chapter_header {
    background:
      radial-gradient(circle at 88% 18%, rgba(126,201,188,.20), transparent 30%),
      linear-gradient(112deg, #114A45 0%, #1A5E57 100%);
  }

  .trust_chapter_oral .trust_chapter_header {
    background:
      radial-gradient(circle at 88% 18%, rgba(126,201,188,.20), transparent 30%),
      linear-gradient(112deg, #17574F 0%, #226A62 100%);
  }

  .trust_chapter_dna_official .trust_chapter_header {
    background:
      radial-gradient(circle at 88% 18%, rgba(126,201,188,.20), transparent 30%),
      linear-gradient(112deg, #114A45 0%, #1A5E57 100%);
  }

  .trust_chapter_nondot .trust_chapter_header {
    background:
      radial-gradient(circle at 88% 18%, rgba(134,200,219,.22), transparent 30%),
      linear-gradient(112deg, #245E74 0%, #337E96 100%);
  }

  .trust_chapter_alcohol .trust_chapter_header {
    background:
      radial-gradient(circle at 88% 18%, rgba(126,201,188,.24), transparent 30%),
      linear-gradient(112deg, #2C8078 0%, #3A968D 100%);
  }

  .trust_chapter_nail .trust_chapter_header,
  .trust_chapter_dna_family .trust_chapter_header,
  .trust_chapter_dna_personal .trust_chapter_header {
    background:
      radial-gradient(circle at 88% 18%, rgba(134,200,219,.22), transparent 30%),
      linear-gradient(112deg, #245E74 0%, #337E96 100%);
  }

  .trust_chapter_dot .trust_chapter_header { border-block-color: rgba(228,240,226,.24); }

  .trust_chapter_dot .trust_chapter_number {
    border-color: rgba(228,240,226,.62);
    color: #FFFFFF;
  }

  .trust_chapter_dot .trust_chapter_header p,
  .trust_chapter_dot .trust_chapter_header h2,
  .trust_chapter_dot .trust_chapter_header > a,
  .trust_chapter_dot .trust_official_mark { color: #FFFFFF; }

  .trust_chapter_dot .trust_chapter_header div > span { color: rgba(255,255,255,.82); }
  .trust_chapter_dot .trust_chapter_header > a,
  .trust_chapter_dot .trust_official_mark { border-bottom-color: rgba(255,255,255,.52); }

  .trust_chapter_number {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(228,240,226,.62);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
  }

  .trust_chapter_header p {
    margin: 0 0 4px;
    color: #D7EBE7;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .trust_chapter_header h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(27px, 3vw, 40px);
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .trust_chapter_header div > span {
    display: block;
    max-width: 740px;
    margin-top: 6px;
    color: rgba(255,255,255,.78);
    font-size: 16px;
    line-height: 1.55;
  }

  .trust_chapter_header > a,
  .trust_official_mark {
    padding: 7px 0;
    border-bottom: 2px solid #9CCBC4;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }

  .trust_chapter_body {
    padding: clamp(22px, 2.8vw, 32px) max(var(--gut), (100% - 1320px) / 2) clamp(28px, 3.5vw, 42px);
  }

  .trust_catalog_page .panel_showcase_grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 0;
  }

  .trust_catalog_page [data-panel-grid="rapid"],
  .trust_catalog_page [data-panel-grid="urine"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .trust_catalog_page .panel_showcase_single { max-width: none; }
  .trust_catalog_page .trust_dot_body .panel_showcase_single { grid-template-columns: minmax(0, 1fr); }
  .trust_catalog_page #dot-urine-panels,
  .trust_catalog_page #non-dot-urine-panels { padding-left: 0; border-left: 0; }

  .trust_catalog_page .catalog_card.panel_showcase_card {
    min-height: 214px;
    padding: 16px;
    border: 1px solid #D6E2DE;
    border-top: 4px solid var(--catalog_accent);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(5,32,42,.055);
  }

  .trust_catalog_page .panel_card_category { display: none; }
  .trust_catalog_page .panel_card_topline { min-height: 20px; justify-content: flex-end; }

  .trust_catalog_page .catalog_card.panel_showcase_card .catalog_badge {
    padding: 4px 8px;
    font-size: 8.5px;
    letter-spacing: .075em;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card h3 {
    margin-top: 6px;
    color: #123B54;
    font-family: var(--font-panel-serif);
    font-size: clamp(18px, 1.45vw, 21px);
    font-weight: 700;
    font-synthesis: none;
    line-height: 1.15;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: "lnum" 1, "pnum" 1;
    min-block-size: 2.3em;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card .catalog_summary {
    display: block;
    min-height: 0;
    margin-top: 8px;
    color: var(--trust_muted);
    font-size: 13.25px;
    line-height: 1.48;
    -webkit-line-clamp: unset;
  }

  .trust_catalog_page .panel_showcase_tat {
    margin-top: 8px;
    font-size: 10px;
  }

  .panel_includes_details {
    margin: 9px 0 10px;
    border: 0;
  }

  .panel_includes_details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    color: #174C58;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
  }

  .panel_includes_details summary::-webkit-details-marker { display: none; }
  .panel_includes_details summary span { font-size: 18px; font-weight: 400; transition: transform .2s ease; }
  .panel_includes_details[open] summary span { transform: rotate(45deg); }

  .trust_catalog_page .catalog_card.panel_showcase_card .panel_includes_details ul,
  .trust_catalog_page .catalog_card.panel_showcase_card .panel_includes_details .catalog_substances_long {
    grid-template-columns: minmax(0,1fr);
    gap: 5px;
    margin: 0;
    padding: 2px 0 9px;
    border-top: 0;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card li {
    font-size: 11.5px;
    line-height: 1.4;
  }

  .trust_catalog_page .panel_card_footer {
    padding-top: 11px;
    border-top: 1px solid #CBDAD6;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card .panel_card_footer .catalog_price {
    color: #0F4C5C;
    font-size: clamp(23px, 1.8vw, 27px);
    font-family: var(--font-panel-serif);
    font-weight: 700;
    font-synthesis: none;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: "lnum" 1, "pnum" 1;
    line-height: 1;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card .catalog_action {
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
  }

  .trust_chapter_note {
    margin: 16px 0 0;
    padding: 11px 15px;
    border-left: 3px solid var(--chapter_accent);
    background: rgba(255,255,255,.72);
    color: var(--trust_muted);
    font-size: 14px;
    line-height: 1.6;
  }

  .trust_chapter_note strong { color: var(--trust_ink); }
  .trust_shared_note {
    margin-right: max(var(--gut), (100% - 1320px) / 2);
    margin-left: max(var(--gut), (100% - 1320px) / 2);
  }

  .trust_dot_body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 34px);
    align-items: stretch;
  }

  .trust_dot_body .panel_showcase_grid { align-self: stretch; }
  .trust_dot_body .catalog_card.panel_showcase_card,
  .trust_dot_guidance { height: 100%; }

  .trust_dot_guidance {
    padding: clamp(20px, 2.5vw, 28px);
    border-radius: 12px;
    background: #0A3E4B;
    color: #FFFFFF;
  }

  .trust_dot_guidance h3 {
    max-width: 14ch;
    margin: 0;
    font-size: clamp(24px, 2.5vw, 32px);
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .trust_dot_guidance p {
    margin: 12px 0 0;
    color: rgba(255,255,255,.76);
    font-size: 15px;
    line-height: 1.55;
  }

  .trust_dot_guidance ul { display: grid; gap: 8px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.18); list-style: none; }
  .trust_dot_guidance li { position: relative; padding-left: 22px; color: #E4F0E2; font-size: 14px; line-height: 1.45; }
  .trust_dot_guidance li::before { position: absolute; left: 0; content: '✓'; color: #F3B255; font-weight: 800; }

  .trust_dot_agencies {
    margin: 0;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(212,146,49,.65);
    border-radius: 14px;
    background: #FCF6E5;
    color: #102B32;
  }

  .trust_dot_agencies_kicker { margin: 0 0 7px; color: #A26A10; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .trust_dot_agencies h3 { margin: 0; color: #0A3E4B; font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.035em; }
  .trust_dot_agencies > p:not(.trust_dot_agencies_kicker) { max-width: 70ch; margin: 10px 0 0; color: #36525A; line-height: 1.55; }
  .trust_dot_agencies ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(162,106,16,.3); list-style: none; }
  .trust_dot_agencies li { position: relative; padding-left: 24px; color: #183B43; line-height: 1.45; }
  .trust_dot_agencies li::before { position: absolute; left: 0; content: '✓'; color: #C88719; font-weight: 800; }

  .trust_catalog_closing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 36px;
    padding: clamp(28px, 3.5vw, 42px) max(var(--gut), (100% - 1320px) / 2);
    background: #052D37;
    color: #FFFFFF;
  }

  .trust_catalog_closing p { margin: 0 0 6px; color: #F3B255; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .trust_catalog_closing h2 { max-width: 720px; margin: 0; font-size: clamp(28px, 3vw, 39px); line-height: 1.08; letter-spacing: -.035em; }
  .trust_closing_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
  .trust_closing_call { flex: 0 0 auto; }

  @media (hover: hover) {
    .trust_catalog_page .catalog_card.panel_showcase_card:hover h3,
    .trust_catalog_page .catalog_card.panel_showcase_card:focus-within h3 { color: #FFFFFF; opacity: 1; }

    .trust_catalog_page .catalog_card.panel_showcase_card:hover .catalog_summary,
    .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_summary,
    .trust_catalog_page .catalog_card.panel_showcase_card:hover li,
    .trust_catalog_page .catalog_card.panel_showcase_card:focus-within li,
    .trust_catalog_page .catalog_card.panel_showcase_card:hover .panel_showcase_tat,
    .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_showcase_tat { color: #DCE9E5; opacity: 1; }

    .trust_catalog_page .catalog_card.panel_showcase_card:hover .catalog_badge,
    .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_badge {
      background: rgba(232,163,61,.22);
      color: #F5C47B;
      opacity: 1;
    }

    .trust_catalog_page .catalog_card.panel_showcase_card:hover .panel_includes_details summary,
    .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_includes_details summary { color: #FFFFFF; opacity: 1; }

    .trust_catalog_page .catalog_card.panel_showcase_card:hover .panel_card_footer,
    .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_card_footer { border-top-color: rgba(255,255,255,.28); }

    .trust_catalog_page .catalog_card.panel_showcase_card:hover .panel_card_footer .catalog_price,
    .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_card_footer .catalog_price { color: #FFFFFF; opacity: 1; }

    .trust_catalog_page .catalog_card.panel_showcase_card:hover .catalog_action,
    .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_action {
      border-color: #E8A33D;
      background: #F0AA3D;
      color: #092C36;
      opacity: 1;
    }
  }

  .trust_catalog_page .catalog_card.panel_showcase_card:focus-within {
    transform: translateY(-4px);
    border-color: #E8A33D;
    color: #EFF7F1;
    background:
      radial-gradient(circle at 88% 9%, rgba(232,163,61,.14), transparent 29%),
      radial-gradient(circle at 90% 88%, rgba(23,103,124,.20), transparent 34%),
      linear-gradient(145deg, #0A3E4B 0%, #052731 100%);
    box-shadow: 0 18px 38px rgba(5,32,42,.24);
  }

  .trust_catalog_page .catalog_card.panel_showcase_card:focus-within h3,
  .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_includes_details summary { color: #FFFFFF; opacity: 1; }

  .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_summary,
  .trust_catalog_page .catalog_card.panel_showcase_card:focus-within li,
  .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_showcase_tat { color: #DCE9E5; opacity: 1; }

  .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_badge { background: rgba(232,163,61,.22); color: #F5C47B; opacity: 1; }
  .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_card_footer { border-top-color: rgba(255,255,255,.28); }
  .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_card_footer .catalog_price { color: #FFFFFF; opacity: 1; }
  .trust_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_action { border-color: #E8A33D; background: #F0AA3D; color: #092C36; opacity: 1; }


  @media (max-width: 1100px) {
    .trust_path_grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .trust_catalog_page .panel_showcase_grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }

  @media (max-width: 760px) {
    .trust_catalog_hero { min-height: 500px; }
    .trust_catalog_media::after { background: linear-gradient(0deg, rgba(5,32,42,.97) 0%, rgba(5,32,42,.79) 64%, rgba(5,32,42,.4) 100%); }
    .trust_catalog_media video { object-position: 62% center; }
    .trust_catalog_hero_content { padding-top: 54px; padding-bottom: 44px; }
    .trust_path_grid,
    .trust_catalog_page .panel_showcase_grid,
    .trust_dot_body { grid-template-columns: minmax(0,1fr); }
    .trust_path_card { min-height: 0; }
    .trust_path_section { padding-top: 24px; padding-bottom: 30px; }
    .trust_chapter_header { grid-template-columns: auto minmax(0,1fr); align-items: start; }
    .trust_chapter_header > a,
    .trust_chapter_header > .trust_official_mark { grid-column: 2; justify-self: start; }
    .trust_catalog_page .catalog_card.panel_showcase_card { min-height: 210px; }
    .trust_chapter_body { padding-top: 22px; padding-bottom: 30px; }
    .trust_dot_guidance { padding: 20px; }
    .trust_dot_agencies ul { grid-template-columns: minmax(0,1fr); }
    .trust_catalog_closing { padding-top: 30px; padding-bottom: 32px; }
    .trust_catalog_closing { align-items: flex-start; }
  }

  @media (max-width: 480px) {
    .trust_catalog_hero h1 { font-size: 39px; }
    .trust_hero_actions .btn { width: 100%; justify-content: center; }
    .trust_path_grid { grid-template-columns: minmax(0,1fr); }
    .trust_chapter_header { grid-template-columns: minmax(0,1fr); }
    .trust_chapter_number { width: 42px; height: 42px; }
    .trust_chapter_header > a,
    .trust_chapter_header > .trust_official_mark { grid-column: 1; }
    .trust_catalog_page .catalog_card.panel_showcase_card { min-height: 0; padding: 16px; }
    .trust_closing_actions { width: 100%; }
    .trust_closing_actions .btn { width: 100%; justify-content: center; }
  }

  .visual_copy h1,
  .section_intro h2,
  .split_statement h2,
  .media_copy h2,
  .fit_panel h2,
  .signal_band h2,
  .signal_copy h2,
  .location_card h2 {
    font-family: var(--font-display);
    font-weight: 700;
  }

  /* SHARED COMPACT CATALOG SYSTEM — HAIR/NAIL, ORAL FLUID AND DNA */
  .standardized_catalog_page {
    --standard_canvas: #F7F8F4;
    background: var(--standard_canvas);
  }

  /* These three values decide how far down the page the category chooser
     starts on hair/nail, oral fluid and DNA, so they are measured against
     the viewport height, not only its width. Landing from the homepage Next
     control, the visitor has to see the category cards whole rather than
     sliced by the fold. Same treatment the urine page's catalog hero has. */
  .standardized_catalog_page > .visual_hero:first-child {
    gap: clamp(28px, 4vw, 54px);
    padding-top: clamp(18px, 2.2vh, 44px);
    padding-bottom: clamp(20px, 2.2vh, 50px);
  }

  .standardized_catalog_page .visual_kicker { margin-bottom: clamp(10px, 1.5vh, 19px); }

  .standardized_catalog_page .visual_copy h1 {
    /* 13ch was breaking the longer of these headlines over four lines, which
       cost more height than the extra measure does. */
    max-width: 17ch;
    font-size: min(clamp(39px, 5vw, 64px), 5.6vh);
    line-height: 1.02;
  }

  .standardized_catalog_page .visual_lede {
    margin-top: clamp(12px, 1.8vh, 17px);
    font-size: clamp(16px, 1.5vw, 18px);
  }
  .standardized_catalog_page .visual_actions { margin-top: clamp(16px, 2.3vh, 22px); }
  .standardized_catalog_page .proof_line { margin-top: clamp(14px, 2.3vh, 22px); }
  .standardized_catalog_page .visual_media,
  .standardized_catalog_page .video_frame { min-height: clamp(240px, 34vh, 390px); }
  /* The picture was free to grow with the column width and became the tallest
     thing in the hero, pushing the chooser below the fold. It is capped and
     cropped instead, so the column width no longer dictates hero height. */
  .standardized_catalog_page .visual_media img,
  .standardized_catalog_page .video_frame video {
    min-height: clamp(240px, 34vh, 390px);
    max-height: clamp(260px, 38vh, 420px);
    object-fit: cover;
  }

  .standardized_catalog_page .section_shell,
  .standardized_catalog_page.interior_compact .section_shell,
  .standardized_catalog_page.interior_compact .catalog_section {
    padding-top: clamp(30px, 3.8vw, 48px);
    padding-bottom: clamp(34px, 4.2vw, 54px);
  }

  .standardized_catalog_page .catalog_section {
    background: #F3F7F5;
  }

  .standardized_catalog_page .catalog_jump_featured {
    margin-top: 20px;
  }

  .standardized_catalog_page .catalog_family_header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(16px, 2.5vw, 28px);
    margin-top: clamp(28px, 3.5vw, 42px);
    padding: clamp(16px, 2.2vw, 24px);
    border: 1px solid rgba(228,240,226,.24);
    border-left: 1px solid rgba(228,240,226,.24);
    border-radius: 10px;
    background:
      radial-gradient(circle at 88% 18%, rgba(23,103,124,.22), transparent 30%),
      linear-gradient(112deg, #073742 0%, #0A4550 100%);
    box-shadow: 0 14px 30px rgba(5,32,42,.14);
  }

  .standardized_catalog_page .catalog_family_header::before {
    grid-row: 1 / span 3;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    align-self: center;
    border: 1px solid rgba(228,240,226,.62);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    content: attr(data-chapter);
  }

  .standardized_catalog_page .catalog_family_header p,
  .standardized_catalog_page .catalog_family_header h2,
  .standardized_catalog_page .catalog_family_header span { grid-column: 2; }
  .standardized_catalog_page .catalog_family_header p { margin-bottom: 4px; color: #D7EBE7; }
  .standardized_catalog_page .catalog_family_header h2 { font-size: clamp(27px, 3vw, 40px); line-height: 1.08; }
  .standardized_catalog_page .catalog_family_header span { margin-top: 6px; color: rgba(255,255,255,.78); font-size: 15px; }

  .standardized_catalog_page .catalog_group { margin-top: clamp(18px, 2.4vw, 28px); }
  .standardized_catalog_page .catalog_group_head { padding-bottom: 10px; }
  .standardized_catalog_page .catalog_grid { margin-top: 14px; }
  .standardized_catalog_page .panel_showcase_grid,
  .standardized_catalog_page .static_showcase_grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .standardized_catalog_page .panel_showcase_single {
    grid-template-columns: minmax(0,1fr);
    max-width: calc((100% - 42px) / 4);
  }

  .standardized_catalog_page .catalog_card.panel_showcase_card {
    min-height: 214px;
    padding: 16px;
    border: 1px solid #D6E2DE;
    border-top: 4px solid var(--catalog_accent);
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(5,32,42,.055);
  }

  .standardized_catalog_page .panel_card_topline { min-height: 20px; }
  .standardized_catalog_page .panel_card_category { display: none; }
  .standardized_catalog_page .catalog_card.panel_showcase_card .catalog_badge { padding: 4px 8px; font-size: 8.5px; }

  .standardized_catalog_page .catalog_card.panel_showcase_card h3 {
    min-block-size: 2.3em;
    margin: 6px 0 0;
    color: #123B54;
    font-family: var(--font-panel-serif);
    font-size: clamp(18px, 1.45vw, 21px);
    font-weight: 700;
    font-synthesis: none;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: "lnum" 1, "pnum" 1;
    line-height: 1.15;
  }

  .standardized_catalog_page .catalog_card.panel_showcase_card .catalog_specimen {
    display: block;
    margin: 6px 0 0;
    color: var(--catalog_accent);
    font-size: 9.5px;
  }

  .standardized_catalog_page .catalog_card.panel_showcase_card .catalog_summary {
    display: block;
    min-height: 0;
    margin-top: 8px;
    color: var(--interior_muted);
    font-size: 13px;
    line-height: 1.48;
    -webkit-line-clamp: unset;
  }

  .standardized_catalog_page .panel_showcase_tat { margin-top: 8px; font-size: 10px; }
  .standardized_catalog_page .panel_includes_details { margin: 8px 0 9px; border: 0; }
  .standardized_catalog_page .panel_includes_details summary { padding: 7px 0; }
  .standardized_catalog_page .catalog_card.panel_showcase_card .panel_includes_details ul,
  .standardized_catalog_page .catalog_card.panel_showcase_card .panel_includes_details .catalog_substances_long {
    grid-template-columns: minmax(0,1fr);
    gap: 5px;
    margin: 0;
    padding: 2px 0 8px;
    border-top: 0;
  }

  .standardized_catalog_page .catalog_card.panel_showcase_card li { font-size: 11.5px; line-height: 1.4; }
  .standardized_catalog_page .panel_card_footer {
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid #CBDAD6;
  }

  .standardized_catalog_page .catalog_card.panel_showcase_card .panel_card_footer .catalog_price {
    margin: 0;
    color: #0F4C5C;
    font-family: var(--font-panel-serif);
    font-size: clamp(23px, 1.8vw, 27px);
    font-weight: 700;
    font-synthesis: none;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: "lnum" 1, "pnum" 1;
    line-height: 1;
  }

  .standardized_catalog_page .catalog_card.panel_showcase_card .panel_card_footer .catalog_price_call {
    max-width: 125px;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
    font-size: 9px;
    line-height: 1.3;
  }

  .standardized_catalog_page .catalog_card.panel_showcase_card .catalog_action {
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
  }

  .standardized_catalog_page .catalog_reg_note { margin-top: 14px; }
  .standardized_catalog_page .sec-close {
    gap: 18px 32px;
    padding-top: clamp(28px, 3.4vw, 40px);
    padding-bottom: clamp(28px, 3.4vw, 40px);
  }

  .standardized_catalog_page .intent_grid { gap: 12px; margin-top: 18px; }
  .standardized_catalog_page .intent_card { min-height: 174px; padding: 19px; }
  .standardized_catalog_page .signal_band { padding-top: clamp(38px, 4.5vw, 58px); padding-bottom: clamp(38px, 4.5vw, 58px); }
  .standardized_catalog_page .media_story { gap: clamp(28px, 4vw, 56px); }
  .standardized_catalog_page .detail_stack { margin-top: 24px; }
  .standardized_catalog_page .detail_stack summary { padding-top: 18px; padding-bottom: 18px; }

  @media (hover: hover) {
    .standardized_catalog_page .catalog_card.panel_showcase_card:hover h3,
    .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within h3,
    .standardized_catalog_page .catalog_card.panel_showcase_card:hover .catalog_specimen,
    .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_specimen,
    .standardized_catalog_page .catalog_card.panel_showcase_card:hover .panel_includes_details summary,
    .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_includes_details summary { color: #FFFFFF; opacity: 1; }

    .standardized_catalog_page .catalog_card.panel_showcase_card:hover .catalog_summary,
    .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_summary,
    .standardized_catalog_page .catalog_card.panel_showcase_card:hover li,
    .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within li,
    .standardized_catalog_page .catalog_card.panel_showcase_card:hover .panel_showcase_tat,
    .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_showcase_tat { color: #DCE9E5; opacity: 1; }

    .standardized_catalog_page .catalog_card.panel_showcase_card:hover .panel_card_footer,
    .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_card_footer { border-top-color: rgba(255,255,255,.28); }
    .standardized_catalog_page .catalog_card.panel_showcase_card:hover .panel_card_footer .catalog_price,
    .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_card_footer .catalog_price { color: #FFFFFF; opacity: 1; }
  }

  .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within h3,
  .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_specimen,
  .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_includes_details summary { color: #FFFFFF; opacity: 1; }
  .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_summary,
  .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within li,
  .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_showcase_tat { color: #DCE9E5; opacity: 1; }
  .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_card_footer { border-top-color: rgba(255,255,255,.28); }
  .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .panel_card_footer .catalog_price { color: #FFFFFF; opacity: 1; }
  .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within {
    transform: translateY(-4px);
    border-color: #E8A33D;
    color: #EFF7F1;
    background:
      radial-gradient(circle at 88% 9%, rgba(232,163,61,.14), transparent 29%),
      radial-gradient(circle at 90% 88%, rgba(23,103,124,.20), transparent 34%),
      linear-gradient(145deg, #0A3E4B 0%, #052731 100%);
    box-shadow: 0 18px 38px rgba(5,32,42,.24);
  }
  .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_badge {
    background: rgba(232,163,61,.22);
    color: #F5C47B;
    opacity: 1;
  }
  .standardized_catalog_page .catalog_card.panel_showcase_card:focus-within .catalog_action {
    border-color: #E8A33D;
    background: #F0AA3D;
    color: #092C36;
    opacity: 1;
  }

  @media (max-width: 1100px) {
    .standardized_catalog_page .panel_showcase_grid,
    .standardized_catalog_page .static_showcase_grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .standardized_catalog_page .panel_showcase_single { max-width: calc((100% - 14px) / 2); }
  }

  @media (max-width: 760px) {
    .standardized_catalog_page > .visual_hero:first-child { padding: 34px 22px 42px; }
    .standardized_catalog_page .visual_media,
    .standardized_catalog_page .video_frame,
    .standardized_catalog_page .visual_media img,
    .standardized_catalog_page .video_frame video { min-height: 330px; }
    .standardized_catalog_page .catalog_family_header { grid-template-columns: minmax(0,1fr); }
    .standardized_catalog_page .catalog_family_header::before { grid-row: auto; }
    .standardized_catalog_page .catalog_family_header p,
    .standardized_catalog_page .catalog_family_header h2,
    .standardized_catalog_page .catalog_family_header span { grid-column: 1; }
    .standardized_catalog_page .panel_showcase_grid,
    .standardized_catalog_page .static_showcase_grid { grid-template-columns: minmax(0,1fr); }
    .standardized_catalog_page .panel_showcase_single { max-width: none; }
    .standardized_catalog_page .catalog_card.panel_showcase_card { min-height: 0; }
  }

  /* TESTING CATALOG TYPOGRAPHY — MATCHES THE START HERE CARDS */
  .trust_catalog_page .catalog_card.panel_showcase_card,
  .trust_catalog_page .catalog_card.panel_showcase_card h3,
  .trust_catalog_page .catalog_card.panel_showcase_card .catalog_summary,
  .trust_catalog_page .catalog_card.panel_showcase_card .catalog_specimen,
  .trust_catalog_page .catalog_card.panel_showcase_card .panel_showcase_tat,
  .trust_catalog_page .catalog_card.panel_showcase_card .panel_card_category,
  .trust_catalog_page .catalog_card.panel_showcase_card .catalog_badge,
  .trust_catalog_page .catalog_card.panel_showcase_card .panel_includes_details summary,
  .trust_catalog_page .catalog_card.panel_showcase_card .panel_includes_details li,
  .trust_catalog_page .catalog_card.panel_showcase_card .panel_card_footer .catalog_price,
  .trust_catalog_page .catalog_card.panel_showcase_card .catalog_action {
    font-family: inherit;
    font-synthesis: none;
    font-variant: normal;
    font-variant-caps: normal;
    letter-spacing: 0;
    text-transform: none;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card h3 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.02em;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card .catalog_summary {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card .catalog_specimen,
  .trust_catalog_page .catalog_card.panel_showcase_card .panel_showcase_tat,
  .trust_catalog_page .catalog_card.panel_showcase_card .panel_card_category,
  .trust_catalog_page .catalog_card.panel_showcase_card .catalog_badge {
    font-weight: 400;
    line-height: 1.35;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card .panel_includes_details summary {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card .panel_includes_details li {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card .panel_card_footer .catalog_price {
    font-size: clamp(23px, 1.8vw, 27px);
    font-weight: 500;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: "lnum" 1, "pnum" 1;
    line-height: 1;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card .panel_card_footer .catalog_price small,
  .trust_catalog_page .catalog_card.panel_showcase_card .panel_card_footer .catalog_price_call {
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  .trust_catalog_page .catalog_card.panel_showcase_card .catalog_action {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
  }

  .visual_media {
    padding: 14px;
    border: 1px solid rgba(228,240,226,.2);
    border-radius: 3px;
    background: var(--deep);
    box-shadow: 0 26px 58px rgba(5,32,42,.18);
  }

  .visual_media::before {
    inset: 8px -8px -8px 8px;
    border-color: rgba(232,163,61,.62);
    border-radius: 1px;
  }

  .visual_media img {
    border-radius: 1px;
    border-color: rgba(228,240,226,.16);
    box-shadow: none;
  }

  .visual_media figcaption {
    left: 30px;
    right: 30px;
    bottom: 28px;
    border: 1px solid rgba(15,76,92,.18);
    border-radius: 2px;
    box-shadow: 0 10px 24px rgba(5,32,42,.16);
  }

  .intent_card,
  .moment_card,
  .compare_card,
  .detail_stack details,
  .fit_panel,
  .location_card,
  .video_frame {
    border-radius: 3px;
  }

  .intent_card {
    min-height: 218px;
    padding: 25px;
    box-shadow: none;
  }

  .intent_card::after {
    height: 3px;
    background: var(--interior_amber);
  }

  .intent_card > span:first-child,
  .intent_number {
    display: inline-flex;
    place-items: center;
    width: auto;
    height: auto;
    min-width: 38px;
    margin-bottom: 22px;
    padding: 7px 9px;
    border-left: 3px solid var(--interior_amber);
    border-radius: 0;
    background: rgba(15,76,92,.07);
  }

  .agency_line,
  .document_nav a {
    border-radius: 2px;
  }

  .moment_card,
  .compare_card {
    box-shadow: none;
  }

  .compare_card,
  .compare_card.amber_card {
    background: #FFFFFF;
  }

  .compare_card {
    border-top: 4px solid var(--interior_teal);
  }

  .compare_card.amber_card {
    border-top-color: var(--interior_amber);
  }

  .signal_band,
  .sec-dark,
  .sec-close {
    background:
      radial-gradient(circle at 88% 20%, rgba(23,103,124,.3), transparent 38%),
      linear-gradient(160deg, #07303B 0%, #05202A 100%);
  }

  .video_frame {
    padding: 12px;
    border-color: rgba(232,163,61,.5);
    background: var(--deep);
    box-shadow: 0 24px 55px rgba(5,32,42,.16);
  }

  .video_frame video {
    border-radius: 1px;
  }

  .location_card {
    border-top: 4px solid var(--interior_amber);
  }

  @media (max-width: 760px) {
    .visual_media::before { inset: 6px -6px -6px 6px; }
    .visual_media figcaption { left: 24px; right: 24px; bottom: 22px; }
  }

  @media (max-width: 480px) {
    .visual_media figcaption { left: auto; right: auto; bottom: auto; }
  }

/* Final cascade placement for the document-authoritative product cards. */
.trust_catalog_page .trust_path_grid.trust_path_grid_three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trust_catalog_page .catalog_grid.panel_showcase_grid:has(> .source_panel_card) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.trust_catalog_page .catalog_grid.panel_showcase_single:has(> .source_panel_card) {
  grid-template-columns: minmax(0, 520px);
}

.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card {
  --source-accent: #17677c;
  --source-hover: #0f4c5c;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--source-accent) 48%, #d8dfdc);
  border-top: 5px solid var(--source-accent);
  border-radius: 3px;
  background: #f3f3f0;
  box-shadow: 0 8px 22px rgba(5,32,42,.07);
  color: #102b32;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.42;
  opacity: 1;
}

/* Same per-category tone map as the base card block above. This copy sits
   later in the file and therefore wins, so it has to agree with it. */
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card:is(.panel_tone_rapid,.panel_tone_hair,.panel_tone_dna-relationship) { --source-accent:#123E39; --source-hover:#0A2E2B; }
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card.panel_tone_dot { --source-accent:#1A5E57; --source-hover:#114A45; }
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card.panel_tone_oral { --source-accent:#226A62; --source-hover:#17574F; }
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card.panel_tone_dna-official { --source-accent:#1A5E57; --source-hover:#114A45; }
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card.panel_tone_nondot { --source-accent:#337E96; --source-hover:#245E74; }
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card.panel_tone_alcohol { --source-accent:#3A968D; --source-hover:#2C8078; }
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card:is(.panel_tone_nail,.panel_tone_dna-family,.panel_tone_dna-personal) { --source-accent:#337E96; --source-hover:#245E74; }

.trust_catalog_page .catalog_card.source_panel_card h3.source_panel_title {
  min-height: 0;
  margin: 0 0 13px;
  padding: 9px 6px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: clamp(15px,1.2vw,18px);
  font-weight: 700;
  font-variant: normal;
  letter-spacing: .015em;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
}

.trust_catalog_page .source_panel_card .source_panel_info {
  margin: 0 0 12px;
  padding: 0 0 11px;
  border-bottom: 1px solid color-mix(in srgb,var(--source-accent) 38%,#cbd4d1);
}

.trust_catalog_page .source_panel_card .source_panel_info p {
  margin: 0 0 4px;
  color: inherit;
  font: inherit;
  opacity: 1;
}

.trust_catalog_page .source_panel_card .source_panel_info p:last-child { margin-bottom:0; }
.trust_catalog_page .source_panel_card .source_panel_info strong,
.trust_catalog_page .source_panel_card .source_panel_detects_label {
  color: var(--source-accent);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.35;
}

.trust_catalog_page .source_panel_card .source_panel_detects_label { margin:0 0 8px; }
.trust_catalog_page .source_panel_card ul.source_panel_detects {
  display:grid;
  grid-template-columns:1fr;
  flex:1 1 auto;
  gap:5px 12px;
  margin:0;
  padding:0 0 15px;
  list-style:none;
}

.trust_catalog_page .source_panel_card ul.source_panel_detects_two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.trust_catalog_page .source_panel_card .source_panel_detects li {
  display:grid;
  grid-template-columns:15px minmax(0,1fr);
  align-items:start;
  gap:4px;
  margin:0;
  color:inherit;
  font-family:inherit;
  font-size:11px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.35;
  opacity:1;
}
.trust_catalog_page .source_panel_card .source_panel_detects li::before {
  display:none !important;
  content:none !important;
}
.trust_catalog_page .source_panel_card .source_panel_detects li > span { color:var(--source-accent); font-weight:900; }

.trust_catalog_page .source_panel_card .panel_card_footer.source_panel_footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:auto;
  padding-top:13px;
  border-top:2px solid color-mix(in srgb,var(--source-accent) 52%,#c8d0ce);
}

.trust_catalog_page .source_panel_card .source_panel_footer .catalog_price {
  margin:0;
  color:var(--source-accent);
  font-family:inherit;
  font-size:clamp(19px,1.65vw,24px);
  font-weight:800;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
  letter-spacing:-.04em;
  line-height:1;
  opacity:1;
}

.trust_catalog_page .source_panel_card .source_panel_footer .catalog_action {
  min-height:38px;
  margin:0;
  padding:9px 13px;
  border:1px solid var(--source-accent);
  border-radius:2px;
  background:var(--source-accent);
  color:#fff;
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.1;
  text-transform:none;
}
.trust_catalog_page .source_panel_card.panel_tone_dot .catalog_action { color:#182323; }

.trust_catalog_page .catalog_card.source_panel_card:hover,
.trust_catalog_page .catalog_card.source_panel_card:focus-within {
  border-color:var(--source-hover);
  background:var(--source-hover);
  box-shadow:0 13px 27px rgba(5,32,42,.18);
  color:#fff;
  transform:translateY(-2px);
}
.trust_catalog_page .source_panel_card:is(:hover,:focus-within) :is(.source_panel_info,.source_panel_footer) { border-color:rgba(255,255,255,.52); }
.trust_catalog_page .source_panel_card:is(:hover,:focus-within) :is(.source_panel_info strong,.source_panel_detects_label,.source_panel_detects li > span,.catalog_price) { color:#fff; }
.trust_catalog_page .source_panel_card:is(:hover,:focus-within) .catalog_action { border-color:#fff; background:#fff; color:var(--source-hover); }
.trust_catalog_page .source_panel_card .catalog_action:focus-visible { outline:3px solid #fff; outline-offset:3px; }

@media (max-width:1020px) {
  .trust_catalog_page .catalog_grid.panel_showcase_grid:has(> .source_panel_card),
  .trust_catalog_page .trust_path_grid.trust_path_grid_three { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
  .trust_catalog_page .catalog_grid.panel_showcase_grid:has(> .source_panel_card),
  .trust_catalog_page .catalog_grid.panel_showcase_single:has(> .source_panel_card),
  .trust_catalog_page .trust_path_grid.trust_path_grid_three { grid-template-columns:1fr; }
  .trust_catalog_page .catalog_card.source_panel_card { padding:15px; }
  .trust_catalog_page .source_panel_card ul.source_panel_detects_two { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Screenshot-corrected card typography and checklist rhythm. */
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
}

.trust_catalog_page .catalog_card.source_panel_card h3.source_panel_title {
  margin-bottom: 15px;
  padding: 10px 6px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.35vw, 21px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.28;
  text-transform: none;
}

/* Urine & alcohol selector edges and exclusive preview state. */
.trust_catalog_page #choose-testing-path .trust_path_card {
  border-top: 4px solid var(--path_accent);
}

/* This page-scoped copy used to hard-code one dark gradient for all four
   cards, which is what kept a lit card from agreeing with the chapter it
   opens. It draws the category pair now, same as the unscoped rule. */
.trust_catalog_page #choose-testing-path .trust_path_card:is(:hover, :focus-visible, .is-selected) {
  border-color: var(--path_surface);
  border-top-color: var(--path_accent);
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.10), transparent 30%),
    linear-gradient(145deg, var(--path_surface) 0%, var(--path_surface_end) 100%);
}

.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover),
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible),
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) {
  transform: none;
  border: 1px solid #d7e3df;
  border-top: 4px solid var(--path_accent);
  background: #fbfcfa;
  color: var(--trust_ink);
  box-shadow: none;
}

.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) > span:first-child,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) > span:first-child,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) > span:first-child,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) .trust_path_copy,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) .trust_path_copy,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) .trust_path_copy,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) .trust_path_action,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) .trust_path_action,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) .trust_path_action {
  color: var(--path_accent);
}

.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) .trust_path_copy small,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) .trust_path_copy small,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) .trust_path_copy small {
  color: var(--trust_muted);
}

.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) .trust_path_action,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) .trust_path_action,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) .trust_path_action {
  border-top-color: #d7e3df;
}

.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) .trust_path_action b,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) .trust_path_action b,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) .trust_path_action b {
  transform: none;
}

/* More compact product cards without sacrificing checklist clearance. */
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card {
  padding: 15px;
  scroll-margin-top: 104px;
}

.trust_catalog_page .catalog_card.source_panel_card h3.source_panel_title {
  margin-bottom: 11px;
  padding: 8px 5px;
}

.trust_catalog_page .source_panel_card .source_panel_info {
  margin-bottom: 11px;
  padding-bottom: 10px;
}

.trust_catalog_page .source_panel_card .source_panel_info p {
  margin-bottom: 3px;
  line-height: 1.4;
}

.trust_catalog_page .source_panel_card .source_panel_detects_label {
  margin-bottom: 8px;
}

.trust_catalog_page .source_panel_card ul.source_panel_detects,
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card ul.source_panel_detects {
  gap: 5px 16px;
  padding-bottom: 13px;
}

.trust_catalog_page .source_panel_card .source_panel_detects li {
  min-height: 18px;
  font-size: 12.5px;
  line-height: 1.4;
}

.trust_catalog_page .source_panel_card .source_panel_detects li > span {
  line-height: 1.4;
}

.trust_catalog_page .source_panel_card .source_panel_detects_eleven li:nth-child(-n + 5) {
  grid-column: 1;
}

.trust_catalog_page .source_panel_card .source_panel_detects_eleven li:nth-child(n + 6) {
  grid-column: 2;
}

.trust_catalog_page .source_panel_card .source_panel_detects_eleven li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.trust_catalog_page .source_panel_card .source_panel_detects_eleven li:is(:nth-child(1), :nth-child(6)) { grid-row: 1; }
.trust_catalog_page .source_panel_card .source_panel_detects_eleven li:is(:nth-child(2), :nth-child(7)) { grid-row: 2; }
.trust_catalog_page .source_panel_card .source_panel_detects_eleven li:is(:nth-child(3), :nth-child(8)) { grid-row: 3; }
.trust_catalog_page .source_panel_card .source_panel_detects_eleven li:is(:nth-child(4), :nth-child(9)) { grid-row: 4; }
.trust_catalog_page .source_panel_card .source_panel_detects_eleven li:is(:nth-child(5), :nth-child(10)) { grid-row: 5; }
.trust_catalog_page .source_panel_card .source_panel_detects_eleven li:nth-child(11) { grid-row: 6; }

.trust_catalog_page .source_panel_card .panel_card_footer.source_panel_footer {
  padding-top: 10px;
}

/* DOT chapter: lead with the panel. The card used to sit on a deep teal of its
   own, which is why the DOT header and the DOT card disagreed. It now takes the
   gold pair set with the other tones above, so this rule only orders the body. */

.trust_catalog_page .trust_dot_body .panel_showcase_single { order: 1; }
.trust_catalog_page .trust_dot_body .trust_dot_guidance { order: 2; }
.trust_catalog_page .trust_dot_body .trust_dot_agencies { order: 3; }

.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card.panel_tone_dot:is(:hover, :focus-within) {
  border-color: #114A45;
  color: #FFFFFF;
}

.trust_catalog_page .source_panel_card.panel_tone_dot:is(:hover, :focus-within) :is(
  h3.source_panel_title,
  .source_panel_info p,
  .source_panel_info strong,
  .source_panel_detects_label,
  .source_panel_detects li,
  .source_panel_detects li > span,
  .catalog_price
) {
  color: #FFFFFF !important;
}

.trust_catalog_page .source_panel_card.panel_tone_dot:is(:hover, :focus-within) :is(
  .source_panel_common_header,
  .source_panel_info,
  .source_panel_footer
) {
  border-color: rgba(255,255,255,.45);
}

.trust_catalog_page .source_panel_card.panel_tone_dot:is(:hover, :focus-within) .catalog_action {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: #114A45;
}

.trust_catalog_closing.dot_assurance h2,
.trust_catalog_closing.dot_assurance .assurance_eyebrow,
.trust_catalog_closing.dot_assurance .rapid_assurance_grid strong {
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
}

/* Carry the approved DOT assurance type treatment across every category. */
.trust_catalog_closing.rapid_assurance h2,
.trust_catalog_closing.rapid_assurance .assurance_eyebrow,
.trust_catalog_closing.rapid_assurance .rapid_assurance_grid strong {
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
}

/* DOT product card fills its row, while its compact checklist stays natural. */
.trust_catalog_page .trust_dot_body .panel_showcase_single { align-self: stretch; }
.trust_catalog_page .trust_dot_body .panel_showcase_single .source_panel_card { height: 100%; }

.trust_catalog_page .source_panel_card.panel_tone_dot .catalog_action,
.trust_catalog_page .source_panel_card.panel_tone_dot:is(:hover, :focus-within) .catalog_action {
  background: #00313a;
  border-color: #00313a;
  color: #d49231 !important;
}

.trust_dot_who {
  margin: 0 max(var(--gut), (100% - 1320px) / 2);
  padding: clamp(26px, 3.2vw, 40px);
  border-top: 1px solid rgba(23,104,68,.26);
  background: #f3f3f0;
  color: #102b32;
}

.trust_dot_who > p {
  margin: 0 0 8px;
  color: #0f4c5c;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.trust_dot_who h2 {
  max-width: 760px;
  margin: 0;
  color: #0f4c5c;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.trust_dot_who > span {
  display: block;
  max-width: 760px;
  margin-top: 10px;
  color: #49666d;
  line-height: 1.55;
}

.trust_dot_who ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 34px;
  max-width: 940px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(23,104,68,.25);
  list-style: none;
}

.trust_dot_who li { position: relative; padding-left: 24px; line-height: 1.45; }
.trust_dot_who li::before { position: absolute; left: 0; content: '✓'; color: #d49231; font-weight: 800; }

@media (max-width: 680px) {
  .trust_dot_who { margin-inline: var(--gut); }
  .trust_dot_who ul { grid-template-columns: minmax(0, 1fr); }
}

/* Homepage industry support band. */
/* Side padding matches .chooser exactly, so the eight cards sit on the same
   left and right edges as the two chooser cards directly above them. It was
   centred on a 1120px measure before, which pulled the whole band inboard of
   everything else on the page on any wide screen. */
.home-industry-band {
  padding: clamp(42px, 5vw, 70px) clamp(26px, 4.4vw, 60px);
  background:
    radial-gradient(circle at 86% 14%, rgba(46,113,133,.32), transparent 29%),
    linear-gradient(125deg, #092d36 0%, #123e4d 100%);
  color: #fff;
}

/* The heading and standfirst run the width of the band and wrap naturally,
   rather than being held in a 700px column that made them read as a narrow
   inset block against full-width cards. */
.home-industry-intro { max-width: none; }
.home-industry-intro > p { margin: 0 0 9px; color: #9edee0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
/* The three audiences sit on one line, pushed apart to the full width of the
   band. space-between spreads all five children, so each dot lands midway
   between the two names it separates. */
.home-industry-intro h2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 0; max-width: none; color: #E8A33D; font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; font-size: clamp(22px, 2.4vw, 36px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
/* Each audience carries its own circled check, so the row reads as three
   things we do rather than one sentence broken by punctuation. The mark
   scales with the heading, hence em units and not pixels. */
.home-industry-intro h2 .industry_item { display: inline-flex; align-items: center; gap: .42em; }
.home-industry-intro h2 .industry_check { flex: none; width: .88em; height: .88em; opacity: .95; }
@media (max-width: 720px) { .home-industry-intro h2 { justify-content: flex-start; gap: 4px 10px; } }
/* The lede runs to the same width as the heading above it. At 92ch it broke
   a line early and left a short orphan under a full-width headline. */
.home-industry-intro > span { display: block; max-width: 100%; margin-top: 14px; color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.55; }

/* Equal rows, so a two-line card title does not make its row taller than
   the other one and leave the eight cards reading as two different sets. */
.home-industry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; margin-top: clamp(26px, 3vw, 34px); }
.home-industry-grid article { min-height: 142px; padding: 18px; border: 1px solid rgba(174,218,218,.28); border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform .2s ease, background .2s ease; }
/* Gold, not white. The icons were the same colour as the card title right
   under them, so the two read as one block of white and the icon carried no
   weight of its own. The site's accent separates them. */
.home-industry-grid article > span { display: block; color: #E8A33D; }
.home-industry-grid article > span svg { width: 30px; height: 30px; display: block; }
.home-industry-grid h3 { margin: 15px 0 4px; color: #fff; font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 700; }
.home-industry-grid p { margin: 0; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.35; }
@media (hover: hover) { .home-industry-grid article:hover { transform: translateY(-5px); background: rgba(255,255,255,.14); } }
@media (max-width: 800px) { .home-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .home-industry-grid { grid-template-columns: 1fr; } }

/* Footer-adjacent page navigation. */
/* This used to be a pale #f3f3f0 band, which put a bright strip between two
   dark sections and read as a piece of furniture rather than a control. It
   now carries the footer's own colour and no top rule, so the button appears
   to sit on the footer and nothing draws a line across the page. */
.page-navigator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px max(var(--gut), (100% - 1320px) / 2) 4px;
  background: #03141A;
}

.page-navigator-home { justify-content: flex-end; }
/* The footer draws its own lit top edge. With the navigator now sharing the
   footer's colour directly above it, that edge would cut the button off from
   the block it belongs to, so it comes off when the two are adjacent. */
.page-navigator + .sitefoot { box-shadow: none; }
/* The button's border was picked for a pale band. On the dark one it needs
   to be lighter than the background rather than darker. */
.page-navigator .page-nav-button { border-color: rgba(174,218,218,.34); }
.page-nav-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 5px 18px 5px 6px;
  border: 1px solid #0f4c5c;
  border-radius: 999px;
  background: linear-gradient(105deg, #0f4c5c, #00313a);
  box-shadow: 0 10px 22px rgba(5,32,42,.15);
  color: #fff;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease;
}

.page-nav-button b {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid #e5b13e;
  border-radius: 50%;
  background: #d49231;
  color: #092d36;
  font-size: 23px;
  line-height: 1;
}

.page-nav-next { padding: 5px 6px 5px 18px; }
@media (hover: hover) { .page-nav-button:hover { transform: translateY(-3px); box-shadow: 0 14px 27px rgba(5,32,42,.23); } }
.page-nav-button:focus-visible { outline: 3px solid rgba(212,146,49,.55); outline-offset: 3px; }
@media (max-width: 560px) { .page-navigator { padding-block: 18px; } .page-nav-button { min-height: 46px; } .page-nav-button b { width: 34px; height: 34px; } }

/* Product hover states: all copy and the title rule turn white together. */
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card:is(:hover, :focus-within) :is(
  h3.source_panel_title,
  .source_panel_info p,
  .source_panel_info strong,
  .source_panel_detects_label,
  .source_panel_detects li,
  .source_panel_detects li > span,
  .catalog_price
) {
  color: #fff !important;
}

.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card:is(:hover, :focus-within) :is(
  h3.source_panel_title,
  .source_panel_common_header
) {
  border-color: #fff !important;
}

/* The DOT panel runs the full height of the two columns beside it. Only the
   footer takes the slack: the detects list stays fixed above, so the extra
   height opens between the last substance and the price row rather than
   spreading the substances out. */
.trust_catalog_page .trust_dot_body .panel_showcase_single {
  align-self: stretch;
}

.trust_catalog_page .trust_dot_body .source_panel_card .panel_card_footer.source_panel_footer {
  margin-top: auto;
}

.trust_catalog_page .trust_dot_body .source_panel_card ul.source_panel_detects {
  flex: 0 0 auto;
  gap: 5px 16px;
  padding-bottom: 13px;
}

.trust_catalog_page .trust_dot_body .source_panel_card .source_panel_detects li {
  min-height: 18px;
  line-height: 1.4;
}

/* Screenshot-correct normal surface: neutral cards, with green reserved for
   true pointer hover and keyboard focus-within. */
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card:not(:hover):not(:focus-within) {
  background: #f3f3f0 !important;
  color: #102b32;
}

.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card:not(:hover):not(:focus-within) .source_panel_common_header {
  border-bottom-color: #101010;
}

.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card:not(:hover):not(:focus-within) :is(
  h3.source_panel_title,
  .source_panel_info p,
  .source_panel_info strong,
  .source_panel_detects_label,
  .source_panel_detects li,
  .source_panel_detects li > span,
  .catalog_price
) {
  color: #102b32 !important;
}

.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card:not(:hover):not(:focus-within) :is(.source_panel_info, .source_panel_footer) {
  border-color: color-mix(in srgb, var(--source-accent) 42%, #cbd4d1);
}

/* Recognizable footer marks in the established circle treatment. */
.foot-social .social-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.foot-social span {
  background: #fff;
  color: #0f4c5c;
}

.foot-social .social-icon-fill,
.foot-social .social-tiktok {
  fill: currentColor;
  stroke: none;
}

/* Homepage visit/assurance band: uppercase copy and sequential checks. */
.track,
.facts {
  text-transform: uppercase;
}

.track .stop :is(.step, .name, .desc),
.facts :is(b, i) {
  text-transform: uppercase;
}

.facts > span {
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 10px;
}

.facts > span .fact-check {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: relative;
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(232, 163, 61, .92);
  border-radius: 50%;
  align-self: start;
}

.facts > span .fact-check::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #e8a33d;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  animation: fact-check-sequence 4s steps(1, end) infinite;
  animation-delay: calc(var(--i) * 1s);
}

.facts > span > b,
.facts > span > i {
  grid-column: 2;
}

.facts > span:last-child {
  justify-self: end;
  margin-right: 9px;
}

@keyframes fact-check-sequence {
  0%, 24.999% { opacity: 1; }
  25%, 100% { opacity: 0; }
}

@media (max-width: 780px) {
  .facts > span:last-child {
    justify-self: stretch;
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .facts > span .fact-check::after {
    opacity: 1;
    animation: none;
  }
}

/* Final assurance treatment: every benefit is confirmed at once. The gold
   visit rail remains animated independently; only the benefit checks are
   deliberately static. */
.facts > span .fact-check::after {
  opacity: 1;
  animation: none;
}

/* Pull each Start Here introduction up by roughly one line while preserving
   the established spacing between its heading, explanation and cards. */
.chooser {
  padding-top: clamp(22px, 3vw, 42px);
}

.trust_path_section {
  padding-top: clamp(6px, 1vh, 16px);
}

/* Footer now begins with the two requested adjacent reference columns. */
.foot-grid {
  grid-template-columns: 1.2fr 1fr .95fr .95fr;
}

.foot-service-lists {
  display: block;
}

.foot-split-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}

.foot-services > .foot-label,
.foot-cities > .foot-label {
  width: 100%;
  text-align: center;
}

/* The label centres on its column, but 1fr tracks are wider than the link
   text inside them, so the slack on the right pushed SERVICES off the visual
   centre of the two lists. Hugging the tracks to their content makes the
   column exactly as wide as the text, so centred is actually centred. */
.foot-services {
  width: max-content;
  max-width: 100%;
}

.foot-services .foot-split-lists {
  grid-template-columns: repeat(2, max-content);
}

.foot-cities .foot-list li {
  color: rgba(228,240,226,.78);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .foot-split-lists {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* Final price face override: serif display numerals in the existing footer slot. */
.trust_catalog_page .catalog_card.source_panel_card .source_panel_footer .catalog_price {
  font-family: var(--font-panel-serif);
  font-size: clamp(23px, 1.7vw, 28px);
  font-weight: 700;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
  letter-spacing: -.025em;
  line-height: 1;
}

/* Consistent full category outline and rounded corners for every product. */
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card {
  border: 2px solid var(--source-accent);
  border-radius: 16px;
}

.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card:is(:hover, :focus-within) {
  border-color: var(--source-hover);
}

/* Rapid 10 compact left-title/right-badge header. */
.trust_catalog_page #rapid-urine-panels .source_panel_common_header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0 0 9px;
  border-bottom: 1px solid #101010;
}

.trust_catalog_page #rapid-urine-panels .source_panel_common_header h3.source_panel_title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: #102b32;
  font-family: "stilson-display-condensed", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.trust_catalog_page #rapid-urine-panels .source_panel_common_header .source_panel_recommendation {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
}

.trust_catalog_page #rapid-urine-panels .source_panel_common .source_panel_footer .catalog_price {
  font-family: "stilson-display-condensed", serif;
  font-size: calc(clamp(22px, 1.7vw, 26px) + 2px);
  font-weight: 700;
}

.trust_catalog_page #rapid-urine-panels .source_panel_common:is(:hover, :focus-within) .source_panel_common_header h3 {
  color: #fff;
}

/* Rapid catalog density and exact source-order checklist columns. */
.trust_catalog_page #rapid-urine-panels .catalog_grid.panel_showcase_grid:has(> .source_panel_card) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.trust_catalog_page #rapid-urine-panels .catalog_card.source_panel_card {
  padding: 12px;
}

.trust_catalog_page #rapid-urine-panels .source_panel_title {
  margin-bottom: 8px;
  padding: 6px 4px;
  font-size: clamp(16px, 1.1vw, 18px);
}

.trust_catalog_page #rapid-urine-panels .source_panel_info {
  margin-bottom: 8px;
  padding-bottom: 7px;
}

.trust_catalog_page #rapid-urine-panels .source_panel_info p {
  font-size: 11.5px;
  line-height: 1.35;
}

.trust_catalog_page #rapid-urine-panels .source_panel_detects_label {
  margin-bottom: 6px;
}

.trust_catalog_page #rapid-urine-panels .source_panel_detects {
  gap: 3px 10px;
  padding-bottom: 10px;
}

.trust_catalog_page #rapid-urine-panels .source_panel_detects li {
  min-height: 16px;
  font-size: 11.5px;
  line-height: 1.3;
}

.trust_catalog_page .source_panel_card ul.source_panel_detects_split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
}

.trust_catalog_page .source_panel_recommendation {
  align-self: flex-start;
  margin: 0 0 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e3f1e9;
  color: #176b4a;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
}

.trust_catalog_page .source_panel_card .source_panel_footer .catalog_price {
  color: var(--source-accent);
  font-family: var(--font-panel-serif);
  font-size: clamp(23px, 1.7vw, 28px);
  font-weight: 700;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
  letter-spacing: -.025em;
  line-height: 1;
}

.trust_catalog_page .source_panel_card:is(:hover, :focus-within) .source_panel_recommendation {
  background: rgba(255,255,255,.16);
  color: #fff;
}

.trust_catalog_page .source_panel_card:is(:hover, :focus-within) h3.source_panel_title,
.trust_catalog_page .source_panel_card:is(:hover, :focus-within) .catalog_price {
  color: #fff;
}

@media (max-width: 1180px) {
  .trust_catalog_page #rapid-urine-panels .catalog_grid.panel_showcase_grid:has(> .source_panel_card) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .trust_catalog_page #rapid-urine-panels .catalog_grid.panel_showcase_grid:has(> .source_panel_card) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .trust_catalog_page #rapid-urine-panels .catalog_grid.panel_showcase_grid:has(> .source_panel_card) {
    grid-template-columns: 1fr;
  }
}

/* Full category outlines and stronger selector hierarchy. */
.trust_catalog_page #choose-testing-path .trust_path_card,
.trust_catalog_page #choose-testing-path .trust_path_card:is(:hover, :focus-visible, .is-selected),
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover),
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible),
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) {
  border: 2px solid var(--path_accent);
  border-radius: 10px;
}

.trust_catalog_page .trust_path_card .trust_path_copy strong,
.trust_catalog_page .trust_path_card .trust_path_action {
  font-family: "stilson-display-condensed", serif;
  font-weight: 700;
}

.trust_catalog_page .trust_path_card .trust_path_copy strong {
  font-size: 24px;
}

.trust_catalog_page .trust_path_card .trust_path_action {
  font-size: 16px;
}

.trust_catalog_page .trust_path_card .trust_path_action b {
  font-family: var(--font-display);
}

.foot-social {
  flex-wrap: nowrap;
  align-items: center;
}

.foot-social span {
  flex: 0 0 34px;
}

/* Site-wide selector exclusivity: a hover preview wins over keyboard focus,
   and keyboard focus wins over the previously selected card. */
.trust_catalog_page .trust_path_card,
.trust_catalog_page .trust_path_card:is(:hover, :focus-visible, .is-selected) {
  border: 2px solid var(--path_accent);
}

.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover),
.trust_catalog_page .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible),
.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) {
  transform: none;
  border-color: var(--path_accent);
  background: #fbfcfa;
  color: var(--trust_ink);
  box-shadow: none;
}

.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) > span:first-child,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) > span:first-child,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) > span:first-child,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) .trust_path_copy,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) .trust_path_copy,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) .trust_path_copy,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) .trust_path_action,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) .trust_path_action,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) .trust_path_action {
  color: var(--path_accent);
}

.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) .trust_path_copy small,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) .trust_path_copy small,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) .trust_path_copy small {
  color: var(--trust_muted);
}

.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) .trust_path_action,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) .trust_path_action,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) .trust_path_action {
  border-top-color: #d7e3df;
}

.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) .trust_path_action b,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) .trust_path_action b,
.trust_catalog_page .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) .trust_path_action b {
  transform: none;
}

/* The homepage assurance strip uses four equal columns at full width. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 780px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.trust_catalog_page .source_panel_card .source_panel_info {
  margin-bottom: 15px;
  padding-bottom: 14px;
}

.trust_catalog_page .source_panel_card .source_panel_info p {
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.trust_catalog_page .source_panel_card .source_panel_info strong,
.trust_catalog_page .source_panel_card .source_panel_detects_label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.trust_catalog_page .source_panel_card .source_panel_detects_label {
  margin: 0 0 11px;
  padding: 0;
}

.trust_catalog_page .source_panel_card ul.source_panel_detects,
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card ul.source_panel_detects {
  gap: 8px 18px;
  margin: 0;
  padding: 0 0 18px;
  border-top: 0;
}

.trust_catalog_page .source_panel_card .source_panel_detects li {
  min-height: 20px;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

.trust_catalog_page .source_panel_card .source_panel_detects li > span {
  padding-top: 1px;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.5;
}

.trust_catalog_page .source_panel_card .source_panel_footer .catalog_price {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.7vw, 26px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.trust_catalog_page .source_panel_card .source_panel_footer .catalog_action {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

/* Final compact rhythm override (kept after the typography block). */
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card {
  padding: 15px;
  scroll-margin-top: 104px;
}

.trust_catalog_page .catalog_card.source_panel_card h3.source_panel_title {
  margin-bottom: 11px;
  padding: 8px 5px;
}

.trust_catalog_page .source_panel_card .source_panel_info {
  margin-bottom: 11px;
  padding-bottom: 10px;
}

.trust_catalog_page .source_panel_card .source_panel_info p {
  margin-bottom: 3px;
  line-height: 1.4;
}

/* Rapid 10 visual system shared by every generated product card. */
.trust_catalog_page .source_panel_card .source_panel_common_header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0 0 9px;
  border-top: 0;
  border-bottom: 1px solid #101010;
}

.trust_catalog_page .source_panel_card .source_panel_common_header h3.source_panel_title {
  flex: 1 1 150px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: #102b32;
  font-family: "stilson-display-condensed", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
}

.trust_catalog_page #rapid-urine-panels .source_panel_card .source_panel_common_header h3.source_panel_title {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "stilson-display-condensed", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.trust_catalog_page .source_panel_card .source_panel_common_header .source_panel_recommendation {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
}

.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card .source_panel_footer .catalog_price {
  font-family: "stilson-display-condensed", serif;
  font-size: calc(clamp(22px, 1.7vw, 26px) + 2px);
  font-weight: 700;
}

.trust_catalog_page .source_panel_card:is(:hover, :focus-within) .source_panel_common_header h3.source_panel_title {
  color: #fff !important;
}

/* Category-specific product-card interaction surfaces. */
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card:is(:hover, :focus-within) {
  background: var(--source-hover);
}

.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card.panel_tone_dot:is(:hover, :focus-within) {
  color: #ffffff;
}

.trust_catalog_page .source_panel_card.panel_tone_dot:is(:hover, :focus-within) :is(
  h3.source_panel_title,
  .source_panel_info p,
  .source_panel_info strong,
  .source_panel_detects_label,
  .source_panel_detects li,
  .source_panel_detects li > span,
  .catalog_price
) {
  color: #ffffff !important;
}

.trust_catalog_page .source_panel_card.panel_tone_dot:is(:hover, :focus-within) :is(
  .source_panel_common_header,
  .source_panel_info,
  .source_panel_footer
) {
  border-color: rgba(255, 255, 255, .45);
}

/* Hovering the DOT card turns its button white. The colour needs !important
   to beat the gold set with !important on the resting rule further up. */
.trust_catalog_page .source_panel_card.panel_tone_dot:is(:hover, :focus-within) .catalog_action {
  border-color: #ffffff;
  background: #ffffff;
  color: #114a45 !important;
}

/* Start Here hierarchy and product-card motion refinement. */
/* The block was capped at 800px while the cards under it run the full band,
   so the intro sat as a narrow inset column above them. It now shares their
   width and the standfirst can set on one line. */
.trust_catalog_page .trust_section_intro {
  max-width: none;
  padding-left: 18px;
  border-left: 4px solid #d49231;
}

/* Bigger and darker. At 13px in a mid teal it read as a caption rather than
   the label of the step the visitor is on. */
.trust_catalog_page .trust_section_kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #0B3B49;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .18em;
}

.trust_catalog_page .trust_section_intro h2 {
  font-size: clamp(28px, 3vw, 40px);
}

/* Runs as one continuous line rather than being held in a 720px column,
   which was folding it onto a second, much shorter line and making it look
   indented under the heading. */
.trust_catalog_page .trust_section_intro > p:last-child {
  max-width: none;
  font-size: 17px;
  line-height: 1.55;
}

.trust_catalog_page .trust_catalog_closing.rapid_assurance {
  position: relative;
  overflow: hidden;
  gap: 20px;
  padding-block: clamp(28px, 3vw, 40px);
}

.trust_catalog_page .trust_catalog_closing.rapid_assurance::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  content: '';
  background: linear-gradient(90deg, #d49231, transparent 70%);
}

.trust_catalog_page .rapid_assurance_head { gap: 16px; }
.trust_catalog_page .rapid_assurance_icon { width: 48px; height: 48px; font-size: 23px; }
.trust_catalog_page .trust_catalog_closing.rapid_assurance h2 { font-size: clamp(24px, 2.7vw, 36px); }
.trust_catalog_page .rapid_assurance_grid article { padding: 16px; border-radius: 14px; }

@media (hover: hover) {
  .trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card:hover {
    transform: translateY(-8px) scale(1.012);
    box-shadow: 0 20px 38px rgba(5, 32, 42, .22);
  }
}

.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card {
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.trust_catalog_page .source_panel_card.panel_tone_alcohol:is(:hover, :focus-within) .catalog_action {
  border-color: #fff;
  background: #fff;
  color: #00313a;
}

/* Shared interior-page Back control. It stays at the lower-right edge and
   lifts above the footer as the footer enters the viewport. */
.page-back-wrap {
  --page-back-accent: #e8a33d;
  --page-back-footer-lift: 0px;
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + var(--page-back-footer-lift));
  z-index: 88;
  transition: bottom .18s ease-out;
}

.page-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 12px 4px 5px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: #00313a;
  color: #fff;
  box-shadow: 0 7px 18px rgba(3,32,39,.18);
  font: inherit;
  cursor: pointer;
}

.page-back span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--page-back-accent);
  color: #092d36;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.page-back-wrap.page-back-accent-dark .page-back span {
  border: 1px solid rgba(255,255,255,.72);
  color: #fff;
}

.page-back b {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.page-back:is(:hover, :focus-visible) {
  background: #0f4c5c;
  outline: 3px solid rgba(232,163,61,.48);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .page-back-wrap {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--page-back-footer-lift));
  }
  .page-back { min-height: 32px; padding-right: 10px; }
}

/* Urine & Alcohol selector. This page kept a light tint for the lit card with
   black type throughout, which is why its cards could not carry the colour of
   the chapter they open. It now uses the same dark per-category treatment as
   every other selector: black type on the resting card, white on the lit one.
   The lit surface is the category pair, so the card agrees with its chapter. */
.trust_catalog_page #choose-testing-path .trust_path_card:is(:hover, :focus-visible, .is-selected) {
  border-color: var(--path_surface);
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.10), transparent 30%),
    linear-gradient(145deg, var(--path_surface) 0%, var(--path_surface_end) 100%);
  color: #FFFFFF;
  box-shadow: 0 18px 38px rgba(5,32,42,.24);
}

.trust_catalog_page #choose-testing-path .trust_path_card .trust_path_copy strong,
.trust_catalog_page #choose-testing-path .trust_path_card .trust_path_action {
  color: #000 !important;
}

.trust_catalog_page #choose-testing-path .trust_path_card:is(:hover, :focus-visible, .is-selected) .trust_path_copy strong,
.trust_catalog_page #choose-testing-path .trust_path_card:is(:hover, :focus-visible, .is-selected) .trust_path_action {
  color: #FFFFFF !important;
}

.trust_catalog_page #choose-testing-path .trust_path_card .trust_path_action b {
  color: var(--path_accent) !important;
}

.trust_catalog_page #choose-testing-path .trust_path_card:is(:hover, :focus-visible, .is-selected) .trust_path_action b,
.trust_catalog_page #choose-testing-path .trust_path_card:is(:hover, :focus-visible, .is-selected) > span:first-child {
  color: #F5C47B !important;
}

.trust_catalog_page #choose-testing-path .trust_path_card:is(:hover, :focus-visible, .is-selected) .trust_path_copy small {
  color: #DCE9E5;
}

.trust_catalog_page #choose-testing-path .trust_path_card:is(:hover, :focus-visible, .is-selected) .trust_path_action {
  border-top-color: rgba(255,255,255,.24);
}

/* Previewing another card drops the selected one back to the light resting
   surface. Its type has to drop back to black with it, or the white above
   leaves an invisible title on a white card. */
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) :is(.trust_path_copy strong, .trust_path_action),
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) :is(.trust_path_copy strong, .trust_path_action),
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) :is(.trust_path_copy strong, .trust_path_action) {
  color: #000 !important;
}

.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) :is(.trust_path_action b, > span:first-child),
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) :is(.trust_path_action b, > span:first-child),
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) :is(.trust_path_action b, > span:first-child) {
  color: var(--path_accent) !important;
}

.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card.is-selected:not(:hover) .trust_path_copy small,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:focus-visible) .trust_path_card.is-selected:not(:focus-visible) .trust_path_copy small,
.trust_catalog_page #choose-testing-path .trust_path_grid:has(.trust_path_card:hover) .trust_path_card:focus-visible:not(:hover) .trust_path_copy small {
  color: var(--trust_muted);
}

/* Compact Rapid / Instant assurance visual replacing the former generic CTA. */
.trust_catalog_closing.rapid_assurance {
  display: grid;
  gap: 18px;
  padding-block: clamp(24px, 3vw, 34px);
  background:
    radial-gradient(circle at 92% 18%, rgba(232,163,61,.18), transparent 30%),
    linear-gradient(112deg, #0A2E2B 0%, #123E39 100%);
}

.rapid_assurance_head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.rapid_assurance_icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(232,163,61,.72);
  border-radius: 50%;
  background: rgba(232,163,61,.12);
  font-size: 21px;
}

.trust_catalog_closing.rapid_assurance h2 {
  max-width: 100%;
  border: 0;
  outline: 0;
  box-shadow: none;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.rapid_assurance_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rapid_assurance_grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.075);
}

.rapid_assurance_grid article > span { font-size: 20px; }
.trust_catalog_closing.rapid_assurance .rapid_assurance_grid p {
  margin: 0;
  color: rgba(255,255,255,.84);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.48;
  text-transform: none;
}
.rapid_assurance_grid strong { color: var(--accent-lift); font-weight: 800; }
.benefit-sep::before { content: "\2014"; margin-inline: .4em; color: var(--accent-lift); }

/* The band marks are SVG masks now, not emoji, so nothing here needs a filter.
   See the .ai block at the end of this file. */
.benefit-sep.tight::before { margin-left: 0; }
.range-sep::before { content: "\2013"; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.trust_catalog_closing.dot_assurance {
  background:
    radial-gradient(circle at 90% 12%, rgba(126,201,188,.20), transparent 33%),
    linear-gradient(112deg, #114A45 0%, #1A5E57 100%);
}

.dot_assurance .assurance_eyebrow {
  margin: 0 0 5px;
  color: var(--accent-lift);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dot_assurance .rapid_assurance_icon {
  border-color: rgba(232,163,61,.78);
  background: rgba(232,163,61,.12);
}

.dot_assurance .rapid_assurance_grid article {
  border-color: rgba(232,163,61,.36);
  background: rgba(255,255,255,.055);
}

.dot_assurance .rapid_assurance_grid strong,
.dot_assurance .benefit-sep::before {
  color: var(--accent-lift);
}

/* The DOT band is dark again, so it reads light-on-dark like the others. */
.trust_catalog_closing.dot_assurance h2,
.trust_catalog_closing.dot_assurance .rapid_assurance_grid p {
  color: #FFFFFF;
}

.dot_assurance .assurance_eyebrow { color: var(--accent-lift); }

.dot_assurance .rapid_assurance_icon {
  border-color: rgba(232,163,61,.72);
  background: rgba(232,163,61,.12);
}

.dot_assurance .rapid_assurance_grid article {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
}

/* Category assurance family. Each state keeps the same editorial hierarchy
   while drawing its surface and accent from that service's established tone. */
.trust_catalog_closing.category_assurance {
  --assurance-surface: #0A2E2B;
  --assurance-surface-end: #123E39;
  --assurance-accent: var(--accent-lift);
  background:
    radial-gradient(circle at 91% 14%, color-mix(in srgb, var(--assurance-accent) 18%, transparent), transparent 31%),
    linear-gradient(112deg, var(--assurance-surface) 0%, var(--assurance-surface-end) 100%);
}

.category_assurance .rapid_assurance_icon {
  border-color: color-mix(in srgb, var(--assurance-accent) 75%, transparent);
  background: color-mix(in srgb, var(--assurance-accent) 12%, transparent);
}

.category_assurance_grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.category_assurance .category_assurance_grid article {
  border-color: color-mix(in srgb, var(--assurance-accent) 31%, transparent);
  background: rgba(255,255,255,.06);
}

.category_assurance .category_assurance_grid strong { color: var(--assurance-accent); }

/* Each assurance band is the closing half of its own chapter, so it takes
   that chapter header's exact gradient rather than a colour of its own. The
   pairs below are the same values used by .trust_chapter_* above; if a
   header's gradient changes, its band here has to change with it.
   The accent stays one gold across every band, which is what carries the
   icons and the lead-in words. */

/* dark end of the ramp, first card on its page */
.trust_catalog_closing.hair_assurance,
.trust_catalog_closing.dna_info_assurance {
  --assurance-surface: #0A2E2B;
  --assurance-surface-end: #123E39;
}

/* middle of the ramp, oral fluid */
.trust_catalog_closing.oral_assurance {
  --assurance-surface: #17574F;
  --assurance-surface-end: #226A62;
}

/* legal DNA sits a stop lower, to open the gap to prenatal above it */
.trust_catalog_closing.dna_legal_assurance {
  --assurance-surface: #114A45;
  --assurance-surface-end: #1A5E57;
}

/* non-DOT, matching .trust_chapter_nondot */
.trust_catalog_closing.nondot_assurance {
  --assurance-surface: #245E74;
  --assurance-surface-end: #337E96;
}

/* light end of the ramp, alcohol */
.trust_catalog_closing.alcohol_assurance {
  --assurance-surface: #2C8078;
  --assurance-surface-end: #3A968D;
}

/* teal, last card on the hair/nail and DNA pages */
.trust_catalog_closing.nail_assurance,
.trust_catalog_closing.dna_prenatal_assurance {
  --assurance-surface: #245E74;
  --assurance-surface-end: #337E96;
}


@media (max-width: 1100px) {
  .category_assurance_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
  .rapid_assurance_grid { grid-template-columns: 1fr; }
}

/* These headings receive focus only after a direct link or switcher action.
   Keep that focus target for assistive technology without drawing a box
   around the editorial headline. */
.trust_catalog_chapter .trust_chapter_header h2[tabindex="-1"]:focus {
  outline: 0;
}

.trust_catalog_page .source_panel_card .source_panel_detects_label {
  margin-bottom: 8px;
}

.trust_catalog_page .source_panel_card ul.source_panel_detects,
.trust_catalog_page .catalog_card.panel_showcase_card.source_panel_card ul.source_panel_detects {
  gap: 5px 16px;
  padding-bottom: 13px;
}

.trust_catalog_page .source_panel_card .source_panel_detects li {
  min-height: 18px;
  font-size: 12.5px;
  line-height: 1.4;
}

.trust_catalog_page .source_panel_card .source_panel_detects li > span {
  line-height: 1.4;
}

.trust_catalog_page .source_panel_card .panel_card_footer.source_panel_footer {
  padding-top: 10px;
}

/* ── catalog landing: keep all four category cards above the fold ──
   Arriving from the homepage Next control, the visitor must be able to see
   the four choices as four choices, not three and a sliver. Placed at the
   end of the file because it overrides rules defined further up and equal
   specificity is settled by order.

   On a short desktop screen the standfirst under the heading is the thing
   that goes. It says to pick one of the four options below, which the four
   cards themselves say more clearly, so nothing is actually lost. */
@media (min-width: 901px) and (max-height: 820px) {
  .trust_catalog_page .trust_section_intro > p:last-child { display: none; }
  .trust_catalog_page .trust_section_intro h2 { font-size: 30px; }
  .trust_path_section { padding-top: 10px; }
  .trust_path_grid { margin-top: 12px; }
  .trust_catalog_hero_content { padding-top: 16px; padding-bottom: 16px; }
  .trust_hero_actions { margin-top: 20px; }

  /* Hair/nail, oral fluid and DNA carry a different hero. The proof line
     under the buttons repeats what the page says further down, so it is what
     goes when the screen is too short to hold both it and the chooser. */
  .standardized_catalog_page > .visual_hero:first-child {
    padding-top: 14px;
    padding-bottom: 16px;
  }
  .standardized_catalog_page .proof_line { display: none; }
}

/* The chooser is the scroll anchor when a category is picked, so it must
   clear the sticky bar rather than sliding under it. --barh is published by
   site.js from the bar's measured height. */
.trust_path_section { scroll-margin-top: calc(var(--barh, 0px) + 6px); }

/* Assurance-band icons. The bands used colour emoji, which each shipped their
   own hue and could not be recoloured, only filtered. These are flat line
   vectors instead: the shape is an SVG mask and the colour is the element's
   own, so a band icon is exactly as white as the text beside it, and the DOT
   band flips them dark with one rule. */
.ai {
  display: inline-block;
  width: 21px;
  height: 21px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ai) center / contain no-repeat;
  mask: var(--ai) center / contain no-repeat;
}

.rapid_assurance_icon .ai { width: 23px; height: 23px; }
.trust_catalog_page .rapid_assurance_icon .ai { width: 25px; height: 25px; }

/* Bands are light-on-dark, so the icons are white. */
.trust_catalog_closing.rapid_assurance .ai { color: #FFFFFF; }

.ai_baby { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712.6%27%20r%3D%277.4%27%2F%3E%3Cpath%20d%3D%27M9.6%2011.4h.01M14.4%2011.4h.01%27%2F%3E%3Cpath%20d%3D%27M9.4%2015.4a3.6%203.6%200%200%200%205.2%200%27%2F%3E%3Cpath%20d%3D%27M12%205.2c1.6-1.1%203.2%200%202.6%201.6%27%2F%3E%3C%2Fsvg%3E"); }
.ai_beer { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%207.5h9.5v13H5z%27%2F%3E%3Cpath%20d%3D%27M14.5%2010.5H18a2.6%202.6%200%200%201%200%205.2h-3.5%27%2F%3E%3Cpath%20d%3D%27M5%207.5a2.6%202.6%200%200%201%204.8-1.4%202.6%202.6%200%200%201%204.7%201.4%27%2F%3E%3C%2Fsvg%3E"); }
.ai_blooddrop { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203c4%204.9%206.4%207.7%206.4%2010.6a6.4%206.4%200%200%201-12.8%200C5.6%2010.7%208%207.9%2012%203z%27%2F%3E%3Cpath%20d%3D%27M9.2%2013.8a2.8%202.8%200%200%200%202.8%202.8%27%2F%3E%3C%2Fsvg%3E"); }
.ai_bolt { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13%202%204%2014h6l-1%208%209-12h-6z%27%2F%3E%3C%2Fsvg%3E"); }
.ai_box { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207.5%2012%203l9%204.5v9L12%2021l-9-4.5z%27%2F%3E%3Cpath%20d%3D%27M3%207.5%2012%2012l9-4.5M12%2012v9%27%2F%3E%3C%2Fsvg%3E"); }
.ai_briefcase { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%2718%27%20height%3D%2713.5%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M9%207V5h6v2M3%2012.5h18%27%2F%3E%3C%2Fsvg%3E"); }
.ai_building { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%273%27%20width%3D%2716%27%20height%3D%2718%27%20rx%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M8%207h2M14%207h2M8%2011h2M14%2011h2M8%2015h2M14%2015h2%27%2F%3E%3Cpath%20d%3D%27M10.2%2021v-3.6h3.6V21%27%2F%3E%3C%2Fsvg%3E"); }
.ai_calendar { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%2010h18M8%203v4M16%203v4%27%2F%3E%3Cpath%20d%3D%27M8%2014h2M15%2014h1M11.5%2014h1M8%2017.5h2M11.5%2017.5h1%27%2F%3E%3C%2Fsvg%3E"); }
.ai_chain { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%2014.2a4.2%204.2%200%200%201%200-6l2.4-2.4a4.2%204.2%200%201%201%206%206L16.4%2014%27%2F%3E%3Cpath%20d%3D%27M14%209.8a4.2%204.2%200%200%201%200%206L11.6%2018.2a4.2%204.2%200%201%201-6-6L7.6%2010%27%2F%3E%3C%2Fsvg%3E"); }
.ai_chart { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020.5h16%27%2F%3E%3Cpath%20d%3D%27M6.5%2020.5v-7M11.5%2020.5v-12M16.5%2020.5v-9%27%2F%3E%3C%2Fsvg%3E"); }
.ai_clipboard { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%274.5%27%20width%3D%2714%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M9.5%204.5v-1h5v1%27%2F%3E%3Cpath%20d%3D%27M8.5%2010h7M8.5%2013.5h7M8.5%2017h4%27%2F%3E%3C%2Fsvg%3E"); }
.ai_clock { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%206.8V12.4l3.6%202.1%27%2F%3E%3C%2Fsvg%3E"); }
.ai_compass { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M15.8%208.2%2010%2010l-1.8%205.8L14%2014z%27%2F%3E%3C%2Fsvg%3E"); }
.ai_cross { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5.5%205.5%2018.5%2018.5M18.5%205.5%205.5%2018.5%27%2F%3E%3C%2Fsvg%3E"); }
.ai_dna { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%203c0%205%208%205%208%209s-8%204-8%209M16%203c0%205-8%205-8%209s8%204%208%209%27%2F%3E%3Cpath%20d%3D%27M9.2%206.8h5.6M9.2%2017.2h5.6%27%2F%3E%3C%2Fsvg%3E"); }
.ai_door { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275.5%27%20y%3D%273%27%20width%3D%2713%27%20height%3D%2718%27%20rx%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2712.4%27%20r%3D%271%27%2F%3E%3C%2Fsvg%3E"); }
.ai_droplet { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203c4%204.9%206.4%207.7%206.4%2010.6a6.4%206.4%200%200%201-12.8%200C5.6%2010.7%208%207.9%2012%203z%27%2F%3E%3C%2Fsvg%3E"); }
.ai_droplets { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8.8%204.2c2.6%203.1%204.1%204.9%204.1%206.7a4.1%204.1%200%200%201-8.2%200c0-1.8%201.5-3.6%204.1-6.7z%27%2F%3E%3Cpath%20d%3D%27M17.2%2011.4c1.5%201.9%202.4%203%202.4%204a2.4%202.4%200%200%201-4.8%200c0-1%20.9-2.1%202.4-4z%27%2F%3E%3C%2Fsvg%3E"); }
.ai_fingernail { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8.4%2021V9.6a3.6%203.6%200%200%201%207.2%200V21z%27%2F%3E%3Cpath%20d%3D%27M8.4%2013.4h7.2%27%2F%3E%3C%2Fsvg%3E"); }
.ai_home { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2011%2012%203.2%2021%2011%27%2F%3E%3Cpath%20d%3D%27M5.4%209.2V20.8h13.2V9.2%27%2F%3E%3Cpath%20d%3D%27M10%2020.8v-5.4h4v5.4%27%2F%3E%3C%2Fsvg%3E"); }
.ai_hourglass { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h12M6%2021h12%27%2F%3E%3Cpath%20d%3D%27M7.5%203c0%205%204.5%206%204.5%209s-4.5%204-4.5%209M16.5%203c0%205-4.5%206-4.5%209s4.5%204%204.5%209%27%2F%3E%3C%2Fsvg%3E"); }
.ai_institution { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%209.6%2012%204l9%205.6%27%2F%3E%3Cpath%20d%3D%27M5.4%209.6v8.6M9.8%209.6v8.6M14.2%209.6v8.6M18.6%209.6v8.6%27%2F%3E%3Cpath%20d%3D%27M3.5%2021h17M4.6%2018.2h14.8%27%2F%3E%3C%2Fsvg%3E"); }
.ai_lock { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2710%27%20width%3D%2716%27%20height%3D%2711%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M7.8%2010V6.8a4.2%204.2%200%200%201%208.4%200V10%27%2F%3E%3C%2Fsvg%3E"); }
.ai_microscope { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M11%203.2%2014.8%209l-3%202L8%205.2z%27%2F%3E%3Cpath%20d%3D%27M9.6%2012.4%207%2016%27%2F%3E%3Cpath%20d%3D%27M6%2020.2h13%27%2F%3E%3Cpath%20d%3D%27M12%2013.6a5.4%205.4%200%200%201%205.4%205.4%27%2F%3E%3C%2Fsvg%3E"); }
.ai_pregnancy { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712.4%27%20cy%3D%274.4%27%20r%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M11%208.4h1.4c2.7%200%204.8%202%204.8%204.6s-2.1%204.4-4.8%204.4v4.2H10V9.6%27%2F%3E%3C%2Fsvg%3E"); }
.ai_scales { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.5v17M6%2020.5h12M12%207%204.5%209.5M12%207l7.5%202.5%27%2F%3E%3Cpath%20d%3D%27M4.5%209.5%202%2015.2h5zM19.5%209.5%2017%2015.2h5z%27%2F%3E%3C%2Fsvg%3E"); }
.ai_scissors { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%276.2%27%20cy%3D%276.2%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%276.2%27%20cy%3D%2717.8%27%20r%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M20%204%208.4%2015.9M20%2020%208.4%208.1%27%2F%3E%3C%2Fsvg%3E"); }
.ai_scroll { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203h10v15a3%203%200%200%201-3%203H6a3%203%200%200%200%203-3z%27%2F%3E%3Cpath%20d%3D%27M10.2%207.6h4.6M10.2%2011.6h4.6%27%2F%3E%3C%2Fsvg%3E"); }
.ai_search { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27m16.5%2016.5%204.5%204.5%27%2F%3E%3C%2Fsvg%3E"); }
.ai_shield { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.5%2020%206v5.5c0%205-3.4%208.6-8%2010-4.6-1.4-8-5-8-10V6z%27%2F%3E%3C%2Fsvg%3E"); }
.ai_stop { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8.2%203h7.6L21%208.2v7.6L15.8%2021H8.2L3%2015.8V8.2z%27%2F%3E%3C%2Fsvg%3E"); }
.ai_stopwatch { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2713.6%27%20r%3D%277.6%27%2F%3E%3Cpath%20d%3D%27M9.5%202.6h5M12%209.6v4.2l3%201.8%27%2F%3E%3C%2Fsvg%3E"); }
.ai_target { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%275.4%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271.8%27%2F%3E%3C%2Fsvg%3E"); }
.ai_trend { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2017.4%209.6%2010.8l4%204L21%207%27%2F%3E%3Cpath%20d%3D%27M21%2012V7h-5%27%2F%3E%3C%2Fsvg%3E"); }
.ai_truck { --ai: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%206.5h11v10h-11z%27%2F%3E%3Cpath%20d%3D%27M13.5%2010h3.6l3.4%203.3v3.2h-7z%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%2718.5%27%20r%3D%271.8%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2718.5%27%20r%3D%271.8%27%2F%3E%3C%2Fsvg%3E"); }

/* =====================================================================
   Employer and contact pages: card grids, numbered steps and forms.
   The site had no form styling at all before these two pages, so the
   controls below are built from the same tokens the catalog cards use
   rather than left to the browser default. ===================================== */

.contact_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 max(var(--gut), (100% - 1320px) / 2) 22px;
}

.contact_card {
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--chapter_accent) 34%, #d8dfdc);
  border-top: 4px solid var(--chapter_accent);
  border-radius: 4px;
  background: #FBFCFA;
  color: #102b32;
}

.contact_card .contact_value {
  margin: 0 0 8px;
  font-family: "stilson-display-condensed", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.16;
}

.contact_card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.contact_card .contact_label {
  margin: 0 0 6px;
  color: var(--chapter_accent);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contact_card .contact_value a { color: inherit; }
.contact_card p + p { margin-top: 10px; }

/* Numbered steps. The counter is drawn, not typed, so the markup stays an
   ordered list and a screen reader still announces it as one. */
.employer_steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin: 0 max(var(--gut), (100% - 1320px) / 2) 22px;
  padding: 0;
  list-style: none;
}

.employer_steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.employer_step_number {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--chapter_accent) 52%, transparent);
  border-radius: 50%;
  color: var(--chapter_accent);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.employer_steps h3 {
  margin: 0 0 6px;
  font-family: "stilson-display-condensed", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.18;
}

.employer_steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

/* ---- forms ---------------------------------------------------------- */

.form_section {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(30px, 4vw, 52px) max(var(--gut), (100% - 1320px) / 2);
  background: #F1F5F4;
}

.form_kicker {
  margin: 0 0 8px;
  color: var(--teal-lift);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.form_intro h2 {
  margin: 0 0 12px;
  font-family: "stilson-display-condensed", serif;
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.08;
}

.form_intro p {
  margin: 0 0 16px;
  max-width: 46ch;
  color: #35505a;
  font-size: 16px;
  line-height: 1.6;
}

.form_assurance {
  margin: 0;
  padding: 0;
  list-style: none;
}

.form_assurance li {
  position: relative;
  padding: 7px 0 7px 22px;
  border-top: 1px solid rgba(16,43,49,.12);
  font-size: 14px;
  line-height: 1.5;
}

.form_assurance li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--teal-lift);
  font-weight: 700;
}

.site_form {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid #d8dfdc;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 10px 26px rgba(5,32,42,.07);
}

/* The honeypot. A person never sees it, so anything typed here is a bot
   and the request is dropped without an email being sent. */
.form_trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form_block {
  margin: 0;
  padding: 0;
  border: 0;
}

.form_block + .form_block { border-top: 1px solid #e4eae8; padding-top: 16px; }

.form_block legend {
  padding: 0;
  color: #0d3540;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.form_hint {
  margin: 6px 0 0;
  color: #56707a;
  font-size: 13px;
  line-height: 1.5;
}

.form_fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.form_field { margin: 0; display: grid; gap: 5px; }
.form_field_wide { margin-top: 12px; grid-column: 1 / -1; }

.form_field label {
  color: #14343d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}

.form_required {
  margin-left: 5px;
  color: #6c8189;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.site_form input,
.site_form select,
.site_form textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #c9d5d2;
  border-radius: 3px;
  background: #FBFCFA;
  color: #102b32;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.site_form textarea { resize: vertical; }

.site_form input:focus,
.site_form select:focus,
.site_form textarea:focus {
  border-color: var(--teal-lift);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-lift) 22%, transparent);
  outline: none;
}

.site_form :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--flag);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--flag) 20%, transparent);
}

.form_choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.form_choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 11px;
  border: 1px solid #d4dedb;
  border-radius: 3px;
  background: #FBFCFA;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}

.form_choice input { width: auto; margin: 2px 0 0; accent-color: var(--teal-lift); }
.form_choice:hover { border-color: var(--teal-lift); background: #F4F9F8; }
.form_choice:has(input:checked) { border-color: var(--teal-lift); background: #EAF3F2; }

.form_submit {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.form_submit .btn { cursor: pointer; }
.form_submit .btn[disabled] { opacity: .6; cursor: progress; }

.form_status {
  margin: 0;
  flex: 1 1 220px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.form_status[data-state="ok"] { color: #14634f; font-weight: 700; }
.form_status[data-state="error"] { color: #9a3722; font-weight: 700; }

@media (max-width: 900px) {
  .form_section { grid-template-columns: minmax(0, 1fr); }
}

/* The hair and nail page uses the urine page's full bleed hero, where the
   picture runs behind the words instead of sitting beside them in a frame.
   The media layer was written for the video on that page, so the still image
   needs the same fit, and the proof line, drawn for the light hero, needs
   light ink to survive on the dark ground. */
.trust_catalog_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(.78) contrast(1.04);
  /* Mirrored on purpose. The hero is far wider than the picture, so the crop
     takes a horizontal band and the whole width stays visible, and the copy
     covers the left third under the dark gradient. The collection happens on
     the left of the frame, so unflipped the subject sits under the words.
     Flipping puts it in the clear half. There is no text in the picture for
     the mirroring to give away. */
  transform: scaleX(-1);
}

.trust_catalog_hero_content .proof_line {
  border-top-color: rgba(255,255,255,.24);
}

.trust_catalog_hero_content .proof_line li {
  color: rgba(255,255,255,.74);
}

/* Employer chapters trimmed to their titles. The explanations were two full
   screens between the hero and the form, and the form is the point of the
   page. Without a paragraph the space under each heading is dead, so the
   card shrinks to the height of its own title and the row closes up. */

/* The collector is the subject of this photograph and the crop was cutting
   the top of his head. The band is taller and the frame sits higher in it. */
.employer_hero {
  min-height: clamp(400px, 56vh, 580px);
}

.employer_hero .trust_catalog_media img {
  object-position: 50% 12%;
}

.employer_steps li:not(:has(p)) {
  align-items: center;
}

.employer_steps li:not(:has(p)) h3 {
  margin: 0;
}

/* Contact hero. No photograph: a stock picture of people talking says less
   than the number itself, and the one thing a visitor came for is the
   number. So the number is the hero, sized like a headline and clickable,
   with the sentence above it explaining why calling is worth it. */
.contact_hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(232,163,61,.16), transparent 46%),
    linear-gradient(135deg, #07242B 0%, #0F4048 58%, #14545C 100%);
  color: #FFFFFF;
}

.contact_hero_inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1320px);
  margin-inline: auto;
  padding: clamp(46px, 7vh, 86px) var(--gut);
  text-align: center;
}

.contact_hero_kicker {
  margin: 0 0 14px;
  color: #9EDEE0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.contact_hero h1 {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(23px, 2.5vw, 34px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: #EAF6F1;
}

/* The number is the page. Tabular figures keep the digits on an even rhythm
   at display size, where proportional ones look loose around the 1s. */
.contact_hero_phone {
  display: inline-block;
  margin: clamp(14px, 2.4vh, 26px) 0 0;
  color: #E8A33D;
  font-size: clamp(42px, 7.4vw, 96px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}

.contact_hero_phone:hover,
.contact_hero_phone:focus-visible {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.contact_hero_note {
  max-width: 46ch;
  margin: 16px auto 0;
  color: rgba(255,255,255,.74);
  font-size: 16px;
  line-height: 1.55;
}

.contact_hero_facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  max-width: 640px;
  margin: clamp(22px, 3vh, 34px) auto 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  list-style: none;
  color: rgba(255,255,255,.72);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contact_hero_facts li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.contact_hero_facts li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6FCF97;
}

/* Calling and booking are two ways to do one thing, so they read as one
   choice with a rule between them rather than two competing buttons. The
   gold stays with the phone number: a gold button beside a gold number
   splits the eye between them, so the booking button is white. */
.contact_hero_or {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 320px;
  margin: clamp(20px, 3vh, 30px) auto 0;
  color: rgba(255,255,255,.52);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.contact_hero_or::before,
.contact_hero_or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.2);
}

.contact_hero_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(16px, 2.4vh, 22px);
}

.contact_hero_book {
  padding: 14px 30px;
  border-radius: 6px;
  background: #FFFFFF;
  color: #0B3038;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(3,22,28,.3);
  transition: background .18s ease, transform .18s ease;
}

.contact_hero_book:hover,
.contact_hero_book:focus-visible {
  background: #EAF6F1;
  transform: translateY(-2px);
}

.contact_hero_link {
  color: #9EDEE0;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(158,222,224,.42);
  transition: color .18s ease, border-color .18s ease;
}

.contact_hero_link:hover,
.contact_hero_link:focus-visible {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

/* The custom-panel promise carries the gold, tying it to the number rather
   than introducing a third colour into the band. */
.contact_hero_custom {
  display: inline-block;
  max-width: 64ch;
  margin: clamp(22px, 3vh, 30px) auto 0;
  padding: 11px 20px;
  border: 1px solid rgba(232,163,61,.36);
  border-radius: 12px;
  background: rgba(232,163,61,.1);
  color: rgba(255,255,255,.86);
  font-size: 14.5px;
  line-height: 1.5;
}

.contact_hero_custom strong { color: #F2C078; }

/* The bar carries six top-level links now, and between the 900px collapse
   and a full desktop they no longer fit on one line: the labels wrapped to
   three lines and the bar grew to match. Below 1360 the wordmark, the type
   and the gaps all come in a step, the Home link goes because the wordmark
   already leads there, and the Cart keeps its icon without the word. From
   1060 up that is enough for a single line; between 901 and 1059 the labels
   still wrap to two, which is the honest limit without a menu button. */
@media (min-width: 901px) and (max-width: 1360px) {
  .wordmark {
    --lockup: 48px;
  }

  .sitenav {
    gap: 12px;
    font-size: 12.5px;
  }

  .sitenav > a[href="/"] { display: none; }
  .cart_trigger_label { display: none; }
  .sitenav .booknow { padding: 9px 14px; }
}

@media (min-width: 1060px) and (max-width: 1360px) {
  .sitenav > a,
  .navgroup-trigger { white-space: nowrap; }
}

/* Contact cards. Four bordered boxes of small type read as a table, so each
   one now leads with an icon and gives the thing you actually came for, the
   number or the address, headline weight. The card lifts on hover so it is
   obvious which ones are live links. */
.contact_grid .contact_card {
  position: relative;
  padding: 22px 20px 20px;
  border-top-width: 1px;
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.contact_grid .contact_card::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--chapter_accent), #E8A33D);
}

.contact_grid .contact_card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--chapter_accent) 60%, #d8dfdc);
  box-shadow: 0 18px 38px rgba(16,43,49,.13);
}

.contact_card_icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 15px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--chapter_accent), #17574F);
  color: #FFFFFF;
}

.contact_card_icon svg {
  width: 21px;
  height: 21px;
}

.contact_grid .contact_card .contact_value {
  font-size: 23px;
  line-height: 1.2;
}

.contact_grid .contact_card .contact_value a {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--chapter_accent) 40%, transparent);
  transition: border-color .18s ease;
}

.contact_grid .contact_card:hover .contact_value a {
  border-bottom-color: var(--chapter_accent);
}

/* Contact hero, two columns. Centred, everything sat on one axis and the
   band ran nearly a full screen tall with the actions stranded near the
   fold. The sentence and the standing facts hold the left, the ways to
   reach us group into one panel on the right, so the band is shorter and
   the choice reads as a single object rather than a stack. */
.contact_hero_inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .8fr);
  grid-template-areas:
    "copy panel"
    "extra panel";
  gap: clamp(20px, 2.6vh, 30px) clamp(30px, 4vw, 68px);
  align-content: center;
  text-align: left;
}

.contact_hero_copy { grid-area: copy; }
.contact_hero_panel { grid-area: panel; align-self: center; }
.contact_hero_extra { grid-area: extra; min-width: 0; }

.contact_hero_copy { min-width: 0; }

.contact_hero h1 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(27px, 3.1vw, 43px);
}

.contact_hero_note {
  max-width: 44ch;
  margin: 16px 0 0;
}

.contact_hero_custom {
  display: block;
  max-width: 52ch;
  margin: clamp(18px, 2.4vh, 26px) 0 0;
}

.contact_hero_facts {
  justify-content: flex-start;
  max-width: none;
  margin: clamp(20px, 2.6vh, 28px) 0 0;
}

/* One panel holds every way to reach us, with the number as its face. */
.contact_hero_panel {
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 26px 60px rgba(3,22,28,.28);
  text-align: center;
}

.contact_hero_panel .contact_hero_phone {
  display: block;
  margin: 0;
  font-size: clamp(31px, 3.4vw, 49px);
}

.contact_hero_panel .contact_hero_or {
  max-width: none;
  margin: clamp(16px, 2vh, 22px) auto;
}

.contact_hero_panel .contact_hero_book {
  display: block;
  width: 100%;
}

.contact_hero_panel .contact_hero_link {
  display: inline-block;
  margin-top: 16px;
}

/* Stacked, the number has to come before the supporting lines, or it lands
   under the fold on a phone, which is the one place a call is likeliest. */
@media (max-width: 860px) {
  .contact_hero_inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "panel"
      "extra";
    gap: 26px;
  }

  .contact_hero_copy { text-align: center; }
  .contact_hero_facts { justify-content: center; }

  .contact_hero h1,
  .contact_hero_note,
  .contact_hero_custom { margin-inline: auto; }
}

/* The before-you-visit band. The heading was capped at 21ch and set at up to
   50px, so a two-sentence instruction broke over three short lines with half
   the band empty beside it, and the padding held it a full screen tall. The
   heading now runs the width of its column at a smaller size, which fits it
   in two lines, and the band keeps only the padding it needs. */
.signal_band_compact {
  padding-block: clamp(38px, 4vw, 58px);
}

.signal_band_compact .signal_copy h2 {
  max-width: none;
  margin-bottom: 14px;
  font-size: clamp(22px, 2.28vw, 30px);
  line-height: 1.16;
  /* balance splits the heading into two half-width lines and leaves the
     right of the band empty, which is the look this replaced. */
  text-wrap: pretty;
}

.signal_band_compact .signal_copy p {
  max-width: 92ch;
  font-size: 15.5px;
  line-height: 1.6;
}

/* The employers page runs one colour, not a ramp. Its chapters are steps in
   a single service rather than separate testing categories, so the second
   chapter header and the closing band both take the first chapter's dark
   green instead of climbing the ramp used on the catalog pages. The tone
   classes stay on the markup so the shared component rules keep applying. */
.employer_page .trust_chapter_dot .trust_chapter_header {
  background:
    radial-gradient(circle at 88% 18%, rgba(126,201,188,.20), transparent 30%),
    linear-gradient(112deg, #0A2E2B 0%, #123E39 100%);
}

.employer_page .trust_catalog_closing.nondot_assurance {
  --assurance-surface: #0A2E2B;
  --assurance-surface-end: #123E39;
}

/* The row of titles sits in the middle of its band. Without paragraphs the
   chapter body kept the padding it needs when cards carry prose, which left
   the row floating high with dead space under it. */
.employer_page .trust_chapter_body {
  padding-block: clamp(24px, 2.4vw, 30px);
}

/* The 22px the grid reserved for a paragraph below it is dead space now. */
.employer_page .employer_steps:not(:has(p)) {
  margin-bottom: 0;
}

/* On-site testing is one chapter. It used to be two, each with its own dark
   header band, which split one service across two screens and made the
   process look like a separate subject. A lead-in introduces the steps and
   they sit in the same light body under the one header. */
.employer_page .employer_steps_head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 18px;
  /* The steps row carries this inset on top of the body padding, so the
     lead-in repeats it to line up with the row it introduces. */
  margin: 0 max(var(--gut), (100% - 1320px) / 2);
  text-align: center;
}

.employer_page .employer_steps_kicker {
  flex: 0 0 100%;
  margin: 0;
  color: var(--chapter_accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.employer_page .employer_steps_title {
  margin: 0;
  font-family: "stilson-display-condensed", serif;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.15;
  color: #102b32;
}

.employer_page .employer_steps_note {
  margin: 0;
  font-size: 15px;
  color: var(--interior_muted);
}

/* The steps carry their number in the chip, so they centre as a row the way
   the outcomes above them do rather than sitting in stretched columns. */
.employer_page .employer_steps:not(:has(p)) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(18px, 2vw, 24px);
}

.employer_page .employer_steps:not(:has(p)) li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 14px;
  border: 1px solid color-mix(in srgb, var(--chapter_accent) 26%, #d8dfdc);
  border-radius: 999px;
  background: #FFFFFF;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.employer_page .employer_steps:not(:has(p)) li:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--chapter_accent) 58%, #d8dfdc);
  box-shadow: 0 14px 30px rgba(16,43,49,.13);
}

.employer_page .employer_steps:not(:has(p)) .employer_step_number {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--chapter_accent), #17574F);
  color: #FFFFFF;
  font-size: 11px;
}

.employer_page .employer_steps:not(:has(p)) h3 {
  font-size: 17px;
  text-wrap: nowrap;
}

@media (max-width: 620px) {
  .employer_page .employer_steps:not(:has(p)) h3 { text-wrap: balance; }
}

/* The overlay on this hero was the sitewide slate blue, which sat against
   the green chapter header directly beneath it and read as two different
   palettes stacked. It now uses the same two greens as that header. */
.employer_page .trust_catalog_media::after {
  background:
    linear-gradient(90deg, rgba(10,46,43,.96) 0%, rgba(10,46,43,.84) 44%, rgba(18,62,57,.36) 76%, rgba(18,62,57,.16) 100%),
    linear-gradient(0deg, rgba(10,46,43,.66) 0%, transparent 46%);
}

@media (max-width: 760px) {
  .employer_page .trust_catalog_media::after {
    background: linear-gradient(0deg, rgba(10,46,43,.97) 0%, rgba(10,46,43,.8) 64%, rgba(18,62,57,.42) 100%);
  }
}


/* The swabs sit low and left of centre in the source, so the band crops to
   their row and keeps the sitewide mirroring, which carries them into the
   clear half of the band rather than behind the headline. */
.dna_hero .trust_catalog_media img {
  object-position: 50% 58%;
}

/* That photograph is already dark and lit from one side, so the standard
   overlay, built for bright photographs, buried it. A lighter wash is
   enough to hold white type over the left half. */
.dna_hero .trust_catalog_media::after {
  background:
    linear-gradient(90deg, rgba(7,36,43,.93) 0%, rgba(7,36,43,.72) 40%, rgba(7,36,43,.22) 70%, rgba(7,36,43,.06) 100%),
    linear-gradient(0deg, rgba(7,36,43,.42) 0%, transparent 44%);
}

/* The bar takes the page gutter on both sides, which on a wide screen left
   Book Online sitting 60px in from the edge with the row of links bunched
   away from it. The left keeps the gutter, so the wordmark still lines up
   with the content below it, and only the right side tightens. */
@media (min-width: 901px) {
  .sitebar {
    padding-right: clamp(14px, 1.5vw, 22px);
  }
}

/* The legal pages swap the dark page head for a light one but kept the ink
   that went with the dark version, so the title and the standfirst were
   near-white on near-white. Only the colours change here; the light head
   is the intended look. */
.legal_document .page-head { color: var(--interior_ink); }
.legal_document .page-head .standfirst { color: var(--interior_muted); }
.legal_document .page-head .eyebrow { color: var(--interior_muted); }