/* ==========================================================================
   S-04 TICKER TRUST BAR, Financial X-Ray rebuild (2026-09-13, redirected)
   The Tooth Place trust bar as an infinite ticker, built from the only
   cleared words there are: four deletion-only slices of the reassure line.
   Redirect the same day: no licensing marks, the icon sits BEHIND the words,
   the Arbor tree mark separates the items, bigger type, and the strip pops:
   it is now a GOLD band in the CTA's own ramp with navy type, lit like the
   button (warm inset highlight on top, dark inset below, a lift shadow), so
   the strip and the button read as one material. Auto-loop (LP rule).
   Tokens only; the gold ramp tokens live in hero.css :root.
   ========================================================================== */
.lp-ticker {
  --lp-ticker-gap: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem);
  position: relative; z-index: 1; overflow: hidden;
  /* darker than the CTA (Quinten 2026-09-13): the brand gold pulled toward navy */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--lp-gold) 96%, var(--lp-navy)) 0%,
    color-mix(in srgb, var(--lp-gold) 86%, var(--lp-navy)) 40%,
    color-mix(in srgb, var(--lp-gold) 78%, var(--lp-navy)) 100%);
  color: var(--lp-navy);
  padding-block: clamp(1.125rem, 0.8rem + 1.3vw, 1.75rem);
  margin-block: 0; border-top: 0;
  font-family: var(--font-body);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c-white) 52%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--lp-navy) 30%, transparent),
    0 14px 34px color-mix(in srgb, var(--lp-navy) 42%, transparent),
    0 3px 6px color-mix(in srgb, var(--lp-navy) 28%, transparent);
}
/* the bare reset rules every div; the strip's wrappers are not sections */
.lp-ticker div { border-top: 0; margin-block: 0; padding-top: 0; }
.lp-ticker__track {
  display: flex; align-items: center; width: max-content;
  animation: lp-ticker-run 28s linear infinite;
}
/* each run carries its own gaps plus one trailing gap: track = 2 runs exactly */
.lp-ticker__run {
  display: flex; align-items: center; flex: 0 0 auto;
  gap: var(--lp-ticker-gap); padding-inline-end: var(--lp-ticker-gap);
}
.lp-ticker__item {
  position: relative; flex: 0 0 auto;
  display: inline-grid; place-items: center;
  padding-block: 0.3em; padding-inline: 0.6em;
  white-space: nowrap; text-wrap: nowrap;
}
.lp-ticker__txt {
  position: relative; z-index: 1;
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 800; letter-spacing: 0.08em; line-height: 1;
  text-transform: uppercase; color: var(--lp-navy-deep);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--c-white) 30%, transparent);
}
/* the icon, large and faint, centred behind the words */
.lp-ticker__ico {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1;
  font-size: clamp(2.5rem, 2.1rem + 1.5vw, 3.5rem);
  letter-spacing: normal; text-transform: none;
  white-space: nowrap; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
  color: var(--lp-navy); opacity: 0.14;
  pointer-events: none;
  /* Centred by PIXELS, not by font metrics: canvas measureText said the
     glyph ink was centred, a screenshot said the ink rows ran 18..61 against
     the word's 19..40, ten px low. The Symbols face sits low in its line box
     at this size. 0.2em lifts the ink centre onto the word's. */
  transform: translateY(-0.2em);
}
/* the separator: the Arbor tree, navy, the same mask file as the hero field */
.lp-ticker__sep { flex: 0 0 auto; display: inline-grid; place-items: center; }
.lp-ticker__mark {
  display: block; width: 21px; height: 21px;
  background-color: var(--lp-navy); opacity: 0.72;
  -webkit-mask: url(_img/mark.svg) center / contain no-repeat;
          mask: url(_img/mark.svg) center / contain no-repeat;
}
/* The run is duplicated in the markup (aria-hidden), so -50% lands on the copy. */
@keyframes lp-ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* no pause on hover (Quinten 2026-09-13): the strip never stops */
/* Hover, per item (Quinten 2026-09-13): the icon behind the word wakes up,
   brighter and a touch larger, and the word lifts 1px. Symmetric 0.3s curves
   in and out (taste rule 6). The strip keeps moving underneath. */
.lp-ticker__ico { transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
.lp-ticker__txt { transition: transform 0.3s ease-out; }
@media (hover: hover) {
  .lp-ticker__item:hover .lp-ticker__ico { opacity: 0.42; transform: translateY(-0.2em) scale(1.14); }
  .lp-ticker__item:hover .lp-ticker__txt { transform: translateY(-1px); }
}
@media (max-width: 900px) {
  .lp-ticker__track { animation-duration: 21s; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-ticker__track { animation: none; }
  .lp-ticker__ico, .lp-ticker__txt { transition: none; }
}

/* ---- S-13 THE STRIP (2026-09-13): the closing line on the same gold band,
   ALL CAPS, OUTLINED in navy (Quinten: "all caps outlined, gold strip, navy
   outline"), display face, one line, the tree mark between repeats. No icon
   behind the words here. Outline via text-stroke; solid navy where a
   browser cannot stroke. --------------------------------------------------- */
/* Fraunces is a variable face and its glyphs are built from OVERLAPPING
   contours (the stem of an N, the bowl of a P, the arms of a K), so a stroke
   on a transparent fill draws every internal contour edge as a line inside
   the letter (Quinten 2026-09-13). The cure: the band goes FLAT gold, the
   letters are FILLED with that same gold and painted stroke-then-fill, so
   the fill covers every interior line and only the outer edge shows. */
.lp-strip {
  --lp-ticker-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --lp-strip-gold: color-mix(in srgb, var(--lp-gold) 86%, var(--lp-navy));
  background: var(--lp-strip-gold);
}
.lp-strip .lp-strip__item { display: inline-flex; align-items: center; gap: var(--lp-ticker-gap); padding-inline: 0; padding-block: 0.2em; }
.lp-strip .lp-strip__txt {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase;
  color: var(--lp-strip-gold); text-shadow: none;
  -webkit-text-stroke: 3px var(--lp-navy-deep);   /* half sits outside the fill: a 1.5px outline */
  paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px black) { .lp-strip .lp-strip__txt { color: var(--lp-navy-deep); } }
.lp-strip .lp-strip__mark { width: 34px; height: 34px; opacity: 0.85; }
@media (max-width: 900px) { .lp-strip .lp-strip__txt { -webkit-text-stroke-width: 2.4px; } }