/* ==========================================================================
   S-06 MEET THE TEAM, Financial X-Ray rebuild (2026-09-13)
   The Tooth Place "meet your dentist" section (light, name + bio + cards)
   with Arbor's cleared who-we-are copy from the live site, the client's own
   office photograph, and the eight live headshots as cards. First paper
   surface after the navy gap. Left on desktop, centred under 900 (6C).
   Reveals: ag-motion (.reveal-cinematic on the photo, .reveal-stagger cards).
   Tokens only.
   ========================================================================== */
.lp-team {
  position: relative; z-index: 0;
  /* 2026-09-13 Quinten: navy here, the gap above went paper */
  background: var(--lp-navy);
  color: color-mix(in srgb, var(--c-white) 80%, var(--lp-navy));
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  padding-inline: clamp(21px, 2vw + 7px, 42px);
  margin-block: 0; border-top: 0;
  font-family: var(--font-body);
  text-align: left;
}
.lp-team div, .lp-team p, .lp-team ul, .lp-team li, .lp-team figure { border-top: 0; margin-block: 0; padding-top: 0; }
.lp-team__inner { max-width: 900px; margin-inline: auto; }

/* COMPACT (Quinten 2026-09-13): the lead row is copy beside the photo, then
   the eight as ONE row of avatars. Two paragraphs that restated Why Us row
   03 are cut (lock render list), so the copy column is the heading and the
   intro paragraph only. */
/* 2026-09-14 (Quinten, phones: "the picture first after the title, then the
   text"): heading, photo and copy are three siblings placed by grid area, so
   the desktop keeps heading-over-copy beside the photo and a phone runs
   heading, photo, copy with nothing duplicated. The heading hugs the bottom
   of its row and the copy the top of its own, so the pair sits together at
   the photo's middle exactly as the old single column did. */
.lp-team__lead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "h photo" "copy photo";
  column-gap: clamp(21px, 2vw + 7px, 42px); row-gap: clamp(0.875rem, 0.7rem + 0.8vw, 1.25rem);
  align-items: center;
}
.lp-team__h { grid-area: h; align-self: end; }
.lp-team .lp-team__photo { grid-area: photo; align-self: center; }
.lp-team__copy { grid-area: copy; align-self: start; }
.lp-team__h {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem);
  line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance;
  color: var(--c-white);
}
.lp-team__h::before {
  content: ""; display: block; width: 42px; height: 3px;
  background: var(--lp-gold); margin-bottom: 14px; border-radius: 3px;
}
.lp-team__copy {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(0.875rem, 0.7rem + 0.8vw, 1.25rem);
}
.lp-team__p {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6; text-wrap: pretty; color: color-mix(in srgb, var(--c-white) 80%, var(--lp-navy)); max-width: 100%;
}
.lp-team__p b { font-weight: 700; color: var(--c-white); }
/* the three sentences: inline on desktop (one paragraph), each its own block
   under 900 with a gold mark between them (Quinten 2026-09-14, "iconography
   to slash it up so it's not hard to read"). The marks are aria-hidden
   Material Symbols inside the one copy run, so the gate reads the block. */
.lp-team__s { display: inline; }
.lp-team__ico { display: none; }

/* the office photograph: the right half of the lead row */
.lp-team .lp-team__photo {
  width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 21px 42px color-mix(in srgb, var(--lp-navy-deep) 60%, transparent);
  background: var(--lp-navy-deep);   /* paints while the image loads */
}
.lp-team__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
}

/* THE STRIP (Quinten 2026-09-13): the eight as a full-bleed marquee, the
   ticker's mechanics moving RIGHT, edge to edge, no edge fade, at the
   ticker's speed (marquee.js sets the duration from the run width). The run
   holds the eight twice so it outspans any viewport; the copy run is
   aria-hidden and the -50% loop lands on it to the pixel. */
/* THE TAP HINT, under the avatars and in a pill (Quinten 2026-09-14: "under
   the profile icons ... in a pill container so its easier to read"). The
   reviews pager's pill, same recipe: a quiet navy ground, a gold hairline,
   the label brighter than the section's body colour so it reads as a control
   and not as copy. team-ping.js taps the glyph and pings a face on one beat. */
.lp-team .lp-team__hint {
  margin-top: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  width: fit-content; margin-inline: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--arbor-navy-deep) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--lp-gold) 30%, transparent);
  font-size: var(--lp-t-small); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lp-gold);
}
.lp-team__hint-ico {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; font-size: 21px; line-height: 1;
  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' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  color: var(--lp-gold-light);
}
/* the glyph presses like a finger on glass: down, a touch smaller, back */
.lp-team__hint-ico.is-press { animation: lp-hint-press 0.63s var(--ease-settle, ease-out) 1; }
@keyframes lp-hint-press {
  0%   { transform: translateY(0) scale(1); }
  28%  { transform: translateY(2px) scale(0.86); }
  60%  { transform: translateY(0) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
/* and a face answers: a gold ring opens out of the circle and fades */
.lp-team__card.is-ping .lp-team__face {
  box-shadow: 0 0 0 2px var(--lp-navy), 0 0 0 3px var(--lp-gold);
  animation: lp-face-ping 1.4s ease-out 1;
}
@keyframes lp-face-ping {
  0%   { box-shadow: 0 0 0 2px var(--lp-navy), 0 0 0 3px var(--lp-gold),
                     0 0 0 0 color-mix(in srgb, var(--lp-gold) 70%, transparent); }
  70%  { box-shadow: 0 0 0 2px var(--lp-navy), 0 0 0 3px var(--lp-gold),
                     0 0 0 14px color-mix(in srgb, var(--lp-gold) 0%, transparent); }
  100% { box-shadow: 0 0 0 2px var(--lp-navy), 0 0 0 3px color-mix(in srgb, var(--c-white) 30%, transparent),
                     0 0 0 14px color-mix(in srgb, var(--lp-gold) 0%, transparent); }
}
.lp-team .lp-team__stripwrap { margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
/* one line on a phone: the label is 33 characters, so under 430 the tracking
   and size come in rather than letting the pill grow to two rows */
@media (max-width: 430px) {
  .lp-team .lp-team__hint { padding: 8px 14px; gap: 8px; font-size: 0.75rem; letter-spacing: 0.04em; }
  .lp-team__hint-ico { font-size: 18px; }
}
.lp-team .lp-team__strip {   /* .lp-team div zeroes margins; this wins on specificity */
  --lp-strip-gap: clamp(14px, 1vw + 7px, 28px);   /* closer still (Quinten 2026-09-13, third pass) */
  position: relative; overflow: hidden;
  /* 2026-09-13: not edge to edge; the strip runs inside the 900 measure, from
     the heading's left edge to the photo's right edge, with the ticker's
     soft ends so cards slide in and out rather than cut */
  width: 100%; margin-inline: 0;
  padding-block: 7px; padding-inline: 21px;
  /* the fade runs over 16% of the width each side with an eased curve, so a
     card takes its time leaving instead of vanishing in a few pixels */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,0.15) 4%, rgba(0,0,0,0.55) 9%, var(--c-white) 16%,
    var(--c-white) 84%, rgba(0,0,0,0.55) 91%, rgba(0,0,0,0.15) 96%, transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,0.15) 4%, rgba(0,0,0,0.55) 9%, var(--c-white) 16%,
    var(--c-white) 84%, rgba(0,0,0,0.55) 91%, rgba(0,0,0,0.15) 96%, transparent 100%);
}
/* the gates: a hairline gold post at each end of the strip, so the run has
   somewhere to come from and go to (outside the mask, so they never fade) */
.lp-team__gate {
  /* the post spans the FACE exactly: top = strip padding + card padding,
     height = the face's own clamp (Quinten 2026-09-13, "match the height of
     the pictures"; the first build was 62% of the strip, centred on the
     whole card, so it sat lower and read shorter than the circles) */
  position: absolute; top: 14px;
  width: 1px; height: clamp(84px, 7vw + 44px, 140px);
  background: linear-gradient(180deg, transparent, var(--lp-gold) 6%, var(--lp-gold) 94%, transparent);
  opacity: 0.56; pointer-events: none;
}
.lp-team__gate::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--lp-gold);
}
.lp-team__gate--l { left: 0; }
.lp-team__gate--r { right: 0; }
.lp-team__stripwrap { position: relative; }
.lp-team__track {
  display: flex; align-items: flex-start; width: max-content;
  /* own compositor layer: the images rasterise once at device scale and only
     move, so the strip never resamples them at a subpixel offset (sharpness) */
  will-change: transform; backface-visibility: hidden;
  animation: lp-team-run 21s linear infinite;   /* duration overwritten per run width */
}
.lp-team__run {
  display: flex; align-items: flex-start; flex: 0 0 auto;
  gap: var(--lp-strip-gap); padding-inline-end: var(--lp-strip-gap);
}
/* rightward: the track starts pulled back one run and slides to rest */
@keyframes lp-team-run { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* this strip pauses under the pointer so a card can be read and clicked (the
   trust ticker does not; Quinten 2026-09-13) */
@media (hover: hover) { .lp-team__strip:hover .lp-team__track { animation-play-state: paused; } }
.lp-team__card {
  display: grid; justify-items: center; text-align: center;
  width: clamp(140px, 10vw + 70px, 200px); flex: 0 0 auto;
  padding: 7px 0; border-radius: 14px;
  /* a <button> now: it opens the bio modal */
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s ease-out;
}
.lp-team__card:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 3px; }
.lp-team__card:active { transform: translateY(0); opacity: 0.63; transition-duration: 0.21s; }
.lp-team__face { display: block; }
.lp-team__face {
  width: clamp(84px, 7vw + 44px, 140px); aspect-ratio: 1 / 1; border-radius: 50%;   /* bigger (third pass) */
  overflow: hidden; background: var(--lp-navy-deep);
  box-shadow: 0 0 0 2px var(--lp-navy), 0 0 0 3px color-mix(in srgb, var(--c-white) 30%, transparent);
  transition: box-shadow 0.3s ease-out;
}
/* Every avatar is a pre-cut 400x400 face crop (head and shoulders, centred),
   cut from the live portraits at build time, so the circle shows the face
   at full sharpness with no CSS zoom and no transform. A transformed image
   gets its own layer, rasterised at 1x, and reads soft on a 1.25x or 1.5x
   Windows display ("pixelly", Quinten 2026-09-13). */
.lp-team__face img {
  vertical-align: top; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
/* Jason's crop comes from his studio original (2729px), not the small live crop */
.lp-team__meta { padding: 9px 2px 0; display: grid; gap: 2px; justify-items: center; }
.lp-team__name {
  font-weight: 700; color: var(--c-white);
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.0625rem); line-height: 1.2; text-wrap: balance;
}
.lp-team__title {
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); line-height: 1.3; color: color-mix(in srgb, var(--c-white) 66%, var(--lp-navy)); text-wrap: balance;
}
@media (hover: hover) {
  .lp-team__card:hover { transform: translateY(-3px); }
  .lp-team__card:hover .lp-team__face { box-shadow: 0 0 0 2px var(--lp-navy), 0 0 0 3px var(--lp-gold); }
}

/* THE PRINCIPLES AS THE GROUND (Quinten 2026-09-13, second pass): the ten
   plaque lines tile the WHOLE section behind the content, all caps, faint
   outlines, staggered rows. The fill is a radial gold gradient clipped to
   the text and centred on the pointer (flashlight.js), so the glow lives
   inside the letterforms only and the ground never lights. Subtle by
   design: the attention stays on the section. Every width. */
.lp-team { overflow: clip; }
.lp-team__side {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.lp-team__inner { position: relative; z-index: 1; }
/* One flowing block of the ten lines, wrapping at the edge (never cut off),
   bigger and tighter (Quinten 2026-09-13), laid TWICE: the base carries the
   outline with a navy fill painted over the stroke, so Fraunces' overlapping
   contours never draw lines inside the letters (the gold strip's fix); the
   glow, identical text with no stroke, carries the flashlight as a gold
   radial clipped to the letters, centred on --fx/--fy from flashlight.js. */
.lp-team__row {
  --fx: -999px; --fy: -999px;
  position: absolute; inset: 0; padding: 14px clamp(14px, 1.5vw, 28px);
  display: block; text-align: justify; text-align-last: justify;   /* every line runs edge to edge (Quinten 2026-09-14) */
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.75rem); line-height: 1.08; letter-spacing: 0.05em;
  border-top: 0; margin-block: 0; padding-top: 14px;
}
/* the lines flow as text, so a long line breaks at a word and comes back on
   the next row; a little air between one line and the next */
.lp-team__word { display: inline; }
.lp-team__row { word-spacing: 0.5em; }   /* air between lines as SPACE, not a trailing margin, so justification lands on the edge */
.lp-team__row--base .lp-team__word {
  color: var(--lp-navy);                                  /* the section's own ground, painted OVER the stroke */
  -webkit-text-stroke: 2px color-mix(in srgb, var(--c-white) 13%, transparent);
  paint-order: stroke fill;
}
.lp-team__row--glow {
  color: transparent;
  background-image: radial-gradient(circle 260px at var(--fx) var(--fy),
    color-mix(in srgb, var(--lp-gold-light) 92%, transparent) 0%,
    color-mix(in srgb, var(--lp-gold) 72%, transparent) 40%,
    transparent 100%);
  -webkit-background-clip: text; background-clip: text;
}
.lp-team__track { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .lp-team { text-align: center; }
  /* title, then the picture, then the text, then the eight (Quinten 2026-09-14) */
  .lp-team__lead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "photo" "copy"; row-gap: 21px; }
  .lp-team__h, .lp-team__copy { align-self: auto; }
  .lp-team__h::before { margin-inline: auto; }
  .lp-team__copy { align-items: center; }
  .lp-team__face { width: clamp(64px, 18vw, 84px); }
  .lp-team__gate { height: clamp(64px, 18vw, 84px); }
  .lp-team__card { width: clamp(108px, 30vw, 140px); }
  /* the photo holds its 450px-mark size from there up to 900 (Quinten
     2026-09-14: "the picture is big at the 800 mark"): 408 x 255, centred;
     under 450 it is the column's full width as before */
  .lp-team .lp-team__photo { aspect-ratio: 16 / 10; width: min(100%, 408px); justify-self: center; }
  /* the sentences one under the other, a gold mark on a hairline between them */
  .lp-team__s { display: block; text-wrap: pretty; }
  .lp-team__ico {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-block: 14px; height: 28px;
    font-family: 'Material Symbols Rounded';
    font-weight: normal; font-style: normal; font-size: 28px; line-height: 1;
    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' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    color: var(--lp-gold);
  }
  .lp-team__ico::before, .lp-team__ico::after {
    content: ""; flex: 0 0 42px; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lp-gold) 55%, transparent));
  }
  .lp-team__ico::after { background: linear-gradient(90deg, color-mix(in srgb, var(--lp-gold) 55%, transparent), transparent); }
  /* THE PULSE (Quinten 2026-09-14): no pointer on a phone, so the flashlight
     never lights the wall and the wrapped caps read as loose words. Instead a
     gold light runs through ONE principle at a time, first word to last,
     across its wrapped rows, so each reads as the sentence it is. The row's
     radial is off; each line carries its own band, clipped to its letters,
     parked off its left end until wall-pulse.js lights it. The band is 90%
     of the line's own width, so it sweeps the whole sentence in one 2.1s
     pass whatever its length. */
  .lp-team__row--glow { background-image: none; }
  .lp-team__row--glow .lp-team__word {
    color: transparent;
    background-image: linear-gradient(90deg,
      transparent 0%, transparent 36%,
      color-mix(in srgb, var(--lp-gold) 55%, transparent) 44%,
      var(--lp-gold-light) 50%,
      color-mix(in srgb, var(--lp-gold) 55%, transparent) 56%,
      transparent 64%, transparent 100%);
    background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text;
  }
  .lp-team__row--glow .lp-team__word.is-lit { animation: lp-wall-pulse 2.1s ease-in-out both; }
}
@keyframes lp-wall-pulse { from { background-position-x: 100%; } to { background-position-x: 0%; } }
@media (prefers-reduced-motion: reduce) {
  .lp-team__card, .lp-team__face { transition: none; }
  .lp-team__track { animation: none; }
}
/* readability over the word field: a soft navy scrim behind the copy column,
   and one behind the heading now that it stands on its own (2026-09-14) */
.lp-team__copy, .lp-team__h { position: relative; }
.lp-team__copy::before, .lp-team__h::after {
  content: ""; position: absolute; inset: -10% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 70% at 50% 50%,
    color-mix(in srgb, var(--lp-navy) 92%, transparent) 0%,
    color-mix(in srgb, var(--lp-navy) 78%, transparent) 55%, transparent 100%);
}