/* ==========================================================
   TMJ Components — Consolidated from inline Code Modules
   Extracted: 2026-03-03
   Source pages: Home (8547), About (8549)
   ========================================================== */

/* ----------------------------------------------------------
   1. ANIMATE WORDS (Hero rotating text)
   Used on: Home hero, About hero
   Scoped per .hero-text container for multi-instance support
   ---------------------------------------------------------- */
.animate-words {
  display: inline-block;
  color: white;
  transform: skewX(0deg);
  transition: color 0.6s ease, transform 0.6s ease;
}

.animate-words.active {
  color: var(--accent);
  transform: skewX(-8deg);
}

/* ----------------------------------------------------------
   2. TMJ BANNER (Stats bar with logo)
   Used on: Home, About (below hero)
   ---------------------------------------------------------- */
.tmj-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 60px);
  width: 100% !important;
  box-sizing: border-box;
}

.tmj-banner-logo {
  flex-shrink: 0;
}

.tmj-banner-logo img {
  height: clamp(28px, 3.5vw, 65px);
  width: auto;
  display: block;
}

.tmj-banner-stats {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 60px);
  flex-wrap: nowrap;
  flex: 1;
}

.tmj-banner-stat {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 12px);
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

.tmj-banner-icon {
  flex-shrink: 0;
  display: flex;
}

.tmj-banner-icon svg {
  width: clamp(18px, 2.2vw, 40px);
  height: clamp(18px, 2.2vw, 40px);
}

.tmj-banner-stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-family: "Cormorant Garamond", sans-serif !important;
}

.tmj-banner-big {
  color: #e8913a;
  font-size: clamp(10px, 1.5vw, 28px);
  font-weight: 700;
  line-height: 1.15;
}

.tmj-banner-small {
  color: #ffffff;
  font-size: clamp(5px, 0.65vw, 12px);
  font-weight: 600;
  letter-spacing: clamp(0.3px, 0.08vw, 1.5px);
  text-transform: uppercase;
  line-height: 1.3;
}

@media (max-width: 600px) {
  .tmj-banner {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(6px, 2vw, 16px);
  }
  .tmj-banner-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 3vw, 20px);
  }
}

/* ----------------------------------------------------------
   3. LOGO CAROUSEL (Affiliations scrolling bar)
   Used on: Home
   Multi-instance: scoped via .ac-logo-carousel class
   ---------------------------------------------------------- */
.ac-logo-carousel {
  --ac-carousel-speed: 30s;
  --ac-logo-gap: 3rem;
  --ac-fade-width: 120px;
  --ac-logo-height: auto;
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--ac-fade-width), black calc(100% - var(--ac-fade-width)), black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black var(--ac-fade-width), black calc(100% - var(--ac-fade-width)), black 100%);
}

.ac-logo-carousel::before,
.ac-logo-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--ac-fade-width);
  z-index: 2;
  pointer-events: none;
}

.ac-logo-track {
  display: flex;
  align-items: center;
  gap: var(--ac-logo-gap);
  width: max-content;
  animation: ac-scroll var(--ac-carousel-speed) linear infinite;
}

.ac-logo-track:hover {
  animation-play-state: paused;
}

.ac-logo-item {
  flex-shrink: 0;
  height: var(--ac-logo-height);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.3s ease, filter 0.3s ease;
  filter: grayscale(100%);
}

.ac-logo-item:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.ac-logo-item img {
  height: 100%;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}

@keyframes ac-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ----------------------------------------------------------
   4. SYMPTOM CARDS (Image cards grid)
   Used on: Home, About
   ---------------------------------------------------------- */
.symptom-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.symptom-card {
  position: relative;
  background: var(--off-white);
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  aspect-ratio: 3 / 4;
  display: block;
  transition: all 0.4s ease;
}

.symptom-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(21, 59, 55, 0.15);
}

.symptom-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.symptom-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Was `bottom center`, which suited a title pinned to the TOP. The title moved to
     the bottom (client 2026-09-11) and the scrim came with it, so the crop moves the
     other way: 30% keeps each subject's face in the upper two-thirds, clear of the
     green. */
  object-position: center 30%;
  transition: transform 0.5s ease;
}

/* The scrim. These are photographs with no reserved space for type -- the old
   top-aligned title sat on whatever the picture put behind it, which on the
   pale-background cards was white serif on near-white. A gradient in the brand
   green, opaque where the words are and gone by the halfway line, gives the type a
   ground without turning the card into a colour block.
   On .symptom-card-image rather than the card so it rides above the photo and below
   the title (z-index 2), and so the hover zoom on the img does not move it. */
.symptom-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(21, 59, 55, 0.94) 0%,
    rgba(21, 59, 55, 0.88) 14%,
    rgba(21, 59, 55, 0.52) 26%,
    rgba(21, 59, 55, 0.18) 36%,
    rgba(21, 59, 55, 0) 46%);
  pointer-events: none;
}

.symptom-card:hover .symptom-card-image img {
  transform: scale(1.05);
}

/* Bottom-aligned (client 2026-09-11), sitting on the scrim above. `bottom: 0` with
   the padding as the inset, so a two-line and a three-line title both end the same
   distance from the card's edge instead of starting the same distance from its top
   -- which is what let the longest title run down over the subject's face. */
.symptom-card-title {
  position: absolute;
  /* The gap under the words is `bottom`, not padding-bottom. Divi parity leaves
     `#page-container h1..h6 { padding-bottom: 0 }` in the cascade, and an ID selector
     beats any class this component can reasonably use — a padding-bottom here is
     silently dropped (measured: computed 0px). Offsetting the absolutely-positioned
     block gives the same result without the specificity fight. */
  bottom: 1.15rem;
  left: 0;
  right: 0;
  padding: 1.5rem 1.35rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  /* White, not --light: that token is the teal #3e857c, and teal serif type over
     these photos disappears (client, 2026-09-02). Same on hover — --mid is a
     darker teal and was worse. */
  color: var(--white);
  line-height: 1.3;
  z-index: 2;
  transition: all 0.4s ease;
}

.symptom-card:hover .symptom-card-title {
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--white);
}

@media (max-width: 1024px) {
  .symptom-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .symptom-cards-grid {
    grid-template-columns: 1fr;
    max-width: 350px;
    margin: 0 auto;
  }

  .symptom-card-title {
    font-size: 1.35rem;
  }

  .symptom-card:hover .symptom-card-title {
    font-size: 1.5rem;
  }
}

/* ===== Content float image (symptom/service page body images) ===== */
/* Desktop + iPad: float right, half width, capped at 500px */
.tmj-content-img{float:right;width:50%;max-width:500px;height:auto;margin:6px 0 24px 32px;border-radius:8px;}
/* Phone: full width, centered, no float */
@media (max-width:767px){
  .tmj-content-img{float:none;width:100%;max-width:100%;margin:0 auto 20px;display:block;}
}

/* ===== FAQ Accordion (.ac-accordion) — site-wide FAQ pattern =====
   Colors mapped to theme palette (functions.php global_color_pallette). */
.ac-accordion {
  --ac-acc-bg: var(--color-bg, #ffffff);
  --ac-acc-border: var(--color-border, rgba(15, 23, 42, 0.08));
  --ac-acc-border-hover: rgba(21, 59, 55, 0.18);
  --ac-acc-text: var(--color-dark, #0f172a);
  --ac-acc-text-muted: var(--color-text, #475569);
  --ac-acc-accent: var(--color-accent, #3a8780);
  --ac-acc-accent-soft: rgba(58, 135, 128, 0.10);
  --ac-acc-radius: 14px;
  --ac-acc-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ac-acc-shadow-open: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
  --ac-acc-transition: 320ms cubic-bezier(0.22, 1, 0.36, 1);

  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  font-family: inherit;
}

/* Alignment modifiers — add alongside .ac-accordion.
   .left is applied to blog-post & symptom-page content; service pages stay centered. */
.ac-accordion.left   { margin: 0 auto 0 0; }
.ac-accordion.center { margin: 0 auto; }
.ac-accordion.right  { margin: 0 0 0 auto; }

.ac-accordion-item {
  background: var(--ac-acc-bg);
  border: 1px solid var(--ac-acc-border);
  border-radius: var(--ac-acc-radius);
  box-shadow: var(--ac-acc-shadow);
  overflow: hidden;
  transition: border-color var(--ac-acc-transition), box-shadow var(--ac-acc-transition), transform var(--ac-acc-transition);
}

.ac-accordion-item:hover { border-color: var(--ac-acc-border-hover); }

.ac-accordion-item.is-open {
  border-color: var(--ac-acc-accent);
  box-shadow: var(--ac-acc-shadow-open);
}

.ac-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 26px;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ac-acc-text);
  transition: background-color var(--ac-acc-transition), color var(--ac-acc-transition);
}

.ac-accordion-trigger:hover { background-color: var(--ac-acc-accent-soft); }
.ac-accordion-trigger:focus-visible { outline: 2px solid var(--ac-acc-accent); outline-offset: -2px; }

.ac-accordion-title {
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  flex: 1;
}

/* Plus / minus icon built in CSS — no font dependency */
.ac-accordion-icon {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ac-acc-accent-soft);
  transition: background-color var(--ac-acc-transition), transform var(--ac-acc-transition);
}

.ac-accordion-icon::before,
.ac-accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--ac-acc-accent);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--ac-acc-transition), opacity var(--ac-acc-transition);
}

.ac-accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.ac-accordion-item.is-open .ac-accordion-icon {
  background: var(--ac-acc-accent);
  transform: rotate(180deg);
}

.ac-accordion-item.is-open .ac-accordion-icon::before,
.ac-accordion-item.is-open .ac-accordion-icon::after { background: #ffffff; }

.ac-accordion-item.is-open .ac-accordion-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* Smooth height animation via grid trick — no JS measurement */
.ac-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ac-acc-transition);
}

.ac-accordion-item.is-open .ac-accordion-content { grid-template-rows: 1fr; }

.ac-accordion-content-inner {
  overflow: hidden;
  min-height: 0;
  padding-bottom: 0;
  transition: padding-bottom var(--ac-acc-transition);
}
/* Bottom padding appears only once expanded, and transitions in */
.ac-accordion-item.is-open .ac-accordion-content-inner { padding-bottom: 24px; }

.ac-accordion-content-inner p {
  margin: 0;
  padding: 0 26px;
  color: var(--ac-acc-text-muted);
  font-size: 16px;
  line-height: 1.65;
}
.ac-accordion-content-inner p + p { margin-top: 12px; }

@media (max-width: 600px) {
  .ac-accordion-trigger { padding: 18px 20px; gap: 16px; }
  .ac-accordion-content-inner p { padding: 0 20px; }
  .ac-accordion-item.is-open .ac-accordion-content-inner { padding-bottom: 20px; }
  .ac-accordion-title { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-accordion-item,
  .ac-accordion-trigger,
  .ac-accordion-icon,
  .ac-accordion-icon::before,
  .ac-accordion-icon::after,
  .ac-accordion-content { transition: none !important; }
}

/* Sub-headings (H3/H5) inside .info-content blocks — serif sub-header,
   so they read as intentional section labels (not tiny sans-serif). */
.info-content .info-subtitle{
  font-family: "Cormorant Garamond", serif;
  margin: 28px 0 12px;
  font-size: 1.45rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .005em;
}
.info-content .info-subtitle:first-child{ margin-top: 0; }
/* Slightly smaller inside the narrower comparison columns */
.ac-compare-col .info-subtitle{ font-size: 1.2rem; margin-top: 24px; }

/* ===== Service cards (.ac-cards) — replaces keyword-stuffed service lists ===== */
.ac-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
  margin:1.25rem 0 1.75rem;
}
.ac-card{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 18px;
  background:var(--color-gray-light,#f8f9fa);
  border:1px solid var(--color-border,#e0e6eb);
  border-radius:12px;
}
.ac-card-icon{ width:16px; height:16px; flex:0 0 auto; margin-top:5px; position:relative; }
.ac-card-icon::before{ content:""; position:absolute; inset:0; background:var(--accent,#3a8780); transform:rotate(45deg); }
.ac-card h4{ margin:0 0 3px; font-size:1rem; font-weight:600; line-height:1.3; }
.ac-card p{ margin:0; font-size:.82rem; line-height:1.5; color:var(--text-muted-light,#5a6b6a); }

/* ===== Comparison (.ac-compare) — two columns, stacks on mobile ===== */
.ac-compare{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin:1.75rem 0; width:100%;
  border:1px solid var(--color-border,#e0e6eb);
  border-radius:16px; overflow:hidden;
  background:var(--color-bg,#fff);
}
.ac-compare-col{ padding:30px 32px; }
.ac-compare-col + .ac-compare-col{ border-left:1px solid var(--color-border,#e0e6eb); }
.ac-compare-col .info-title{ font-size:clamp(1.45rem,2.4vw,1.95rem); margin-bottom:1rem; }
.ac-compare-col .ac-cards{ grid-template-columns:1fr; gap:10px; }
@media (max-width:860px){
  .ac-compare{ grid-template-columns:1fr; }
  .ac-compare-col + .ac-compare-col{ border-left:none; border-top:1px solid var(--color-border,#e0e6eb); }
}

/* Title-only cards: no gap beneath the title */
.ac-card h4:last-child{ margin-bottom:0; }

/* ===== Team / bios (About page) ===== */
.ac-bio{ display:grid; grid-template-columns:300px 1fr; gap:2.5rem; align-items:start; margin:0 0 1.5rem; }
.ac-bio.rev .ac-bio-photo{ order:2; }
.ac-bio-photo img{ width:100%; border-radius:16px; display:block; box-shadow:0 10px 30px -12px rgba(15,23,42,.18); }
.ac-bio-role{ display:inline-block; color:var(--accent,#3a8780); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; font-weight:600; margin:.25rem 0 1rem; }
@media (max-width:820px){
  .ac-bio,.ac-bio.rev{ grid-template-columns:1fr; gap:1.25rem; }
  .ac-bio.rev .ac-bio-photo{ order:0; }
  .ac-bio-photo img{ max-width:320px; }
}
.ac-team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; margin:1.25rem 0; }
.ac-team-card{ background:var(--color-bg,#fff); border:1px solid var(--color-border,#e0e6eb); border-radius:16px; overflow:hidden; }
.ac-team-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.ac-team-card-body{ padding:20px 22px; }
.ac-team-card-body h4{ margin:0 0 2px; font-family:"Cormorant Garamond",serif; font-size:1.4rem; font-weight:600; }
.ac-team-role{ display:block; color:var(--accent,#3a8780); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:600; margin-bottom:.75rem; }
.ac-team-card-body p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--color-text,#475569); }

/* Dark-section text overrides (when section-dark wraps content on a dark Divi section bg) */
.section-dark .section-title{ color: var(--text-light, #ffffff); }
.section-dark{ color: var(--text-light, #ffffff); }

/* Text-color-only modifier: use on inner content when section bg is light.
   Mirrors .section-dark — no background, just sets readable text color. */
.section-white{ color: var(--color-dark, #153b37); }
.section-white .section-title{ color: var(--color-dark, #153b37); }
.section-white .section-subtitle{ color: var(--text-muted-dark, #475569); }

/* ── Tab-component hover fix (ac-ofp Adults/Children + svc-tabs) ──────────────
   Non-active tabs kept a light background on hover but their text could inherit
   a light colour in some section contexts → white-on-light. Force a meshing
   hover: dark text on the subtle light hover background. */
.ac-ofp__tab:not(.ac-ofp__tab--active):hover,
.ac-ofp__tab:not(.ac-ofp__tab--active):hover i { color: var(--theme-main, #153b37) !important; }
.svc-tabs .tab-btn:not(.active):hover { background: #eef4f3 !important; color: var(--color-dark, #153b37) !important; }

/* ── Trust-bar stats row (shared anchor_block #1093895, "Over 70 Centres") ────
   Task 12 deliberately re-expressed this shared block's markup as
   .stats-row/.stat-item/.stat-value/.stat-label, citing them as "an existing,
   already-defined-but-unused primitive in assets/css/custom.css". custom.css
   is legacy Cleveland-fork CSS (934 lines: bootstrap-era blog/offer-card
   rules) that inc/enqueue.php never wires up — Task 14's pilot activation is
   the first time that omission became visible: white-on-white invisible
   .stat-value text inside the .section--inverse wrapper, no white floating
   card. Ported ONLY this block (verbatim from custom.css lines 456-499) into
   the always-enqueued component layer rather than enqueueing all of
   custom.css, whose other ~890 lines (blog cards, /implants offer cards,
   bootstrap-derived selectors) are unreviewed and out of this task's scope.
   Loads after primitives.css in the cascade, so these same-specificity rules
   correctly win over .section--inverse's white-text default, as intended.

   Task 14 fix round 2: on desktop this block holds FOUR .stat-item columns
   (the TMJ International logo + 3 real stats: "Over 70 Centres" / "Decades"
   / "Tens of Thousands"), but max-width:560px only gave each column ~120px
   -- narrower than several of the single, unbreakable words in the values
   ("Centres", "Decades", "Thousands" at 36px bold). Words can't break mid-
   word, so they overflowed their 110px-min-width flex item straight into
   the neighbouring column, reading as "Decades" colliding with "Tens of
   Thousands" and forcing "Over 70 Centres" onto 3 cramped lines. Widened
   the card and each column, and trimmed the value size so every value's
   longest single word fits inside one column without overflowing into the
   next. Mobile is untouched -- the <=575px rule below already stacks each
   item full-width and was never the reported problem. */
.stats-row{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(11, 11, 56, .10);
	padding: 24px 8px;
	margin: 30px 0;
	max-width: 920px;
}
.stats-row .stat-item{
	flex: 1;
	min-width: 160px;
	text-align: center;
	padding: 6px 20px;
}
.stats-row .stat-item + .stat-item{
	border-left: 1px solid #ececf5;
}
.stats-row .stat-value{
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--accent-color);
	margin-bottom: 8px;
}
.stats-row .stat-label{
	display: block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6a6a80;
}
@media only screen and (max-width: 575px){
	.stats-row{ max-width: 100%; }
	.stats-row .stat-item{ flex: 0 0 100%; padding: 14px 18px; }
	.stats-row .stat-item + .stat-item{ border-left: 0; border-top: 1px solid #ececf5; }
}
/* Task 12 wraps this block's <section> in .section--inverse (to approximate the
   source's dark blurb background). primitives.css's .section--inverse
   :is(...,a:not(.btn-default)) selector carries specificity (0,2,1) — one
   type-selector higher than the (0,2,0) rules above, via :not()'s argument —
   so it silently wins and forces .stat-value/.stat-label to white-on-white
   inside the white .stats-row card. Re-declare at (0,3,0) scoped to the real
   .section--inverse context so the intended colors hold there too. */
.section--inverse .stats-row .stat-value{ color: var(--accent-color); }
.section--inverse .stats-row .stat-label{ color: #6a6a80; }

/* ── Icon-blurb cards (Task 14 fix round 2, defect 3) ─────────────────
   bin/port/render/service.py's _mark_icon_blurbs() classes repeated Divi
   "Blurb" list items (icon + heading + body, e.g. laser-therapy's "When
   To Seek This Treatment" list) with these classes. The icon <img> keeps
   whatever native size attributes the source had (up to 268x369 seen so
   far) with nothing else constraining it, so cap it to a small icon and
   lay icon + text out as a horizontal row instead of the icon rendering
   at near-full prose width and pushing its own heading far below. */
.icon-blurb{
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--divider-color);
}
.icon-blurb:last-of-type{ border-bottom: none; }
.icon-blurb__media{
	flex: 0 0 56px;
	width: 56px;
}
.icon-blurb__media img{
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
}
.icon-blurb__body{ flex: 1 1 auto; min-width: 0; }
.icon-blurb__body > :is(h1,h2,h3,h4,h5,h6){ margin: 0 0 6px; }
.icon-blurb__body > div{ color: var(--text-color); }
@media (max-width: 600px){
	.icon-blurb{ gap: 14px; }
	.icon-blurb__media{ flex: 0 0 44px; width: 44px; }
	.icon-blurb__media img{ width: 44px; height: 44px; }
}

/* ---- Team bio read more/less (ported from live anchor-tmj, 2026-08-07) ----
   Inert until .ac-team-card markup with a .ac-team-bio exists; the toggle
   button is created by initTeamBios() in tmj-components.js. */
.ac-team-card.has-toggle .ac-team-bio{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;
  overflow:hidden;
}
.ac-team-card.has-toggle.is-expanded .ac-team-bio{
  display:block;
  -webkit-line-clamp:none;
  overflow:visible;
}

/* margin-top:auto pins the toggle to the bottom of the card so the
   buttons line up across a row of unequal-height grid items. */
.ac-team-more{
  align-self:flex-start;
  margin-top:auto;
  padding:.9rem 0 0;
  background:none;
  border:0;
  font-family:inherit;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dark,#153b37);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:color .2s ease;
}
.ac-team-more[hidden]{ display:none; }
.ac-team-more:hover,
.ac-team-more:focus-visible{ color:var(--accent,#e8a087); }

.ac-team-more::after{
  content:"";
  width:.4rem;
  height:.4rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-25%) rotate(45deg);
  transition:transform .2s ease;
}