/* Styles for elements the site runtime adds to exported pages. */
.tcp-form-notice { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: #eef6ee; color: #1f3a22; font: 600 15px/1.4 system-ui, sans-serif; }
.tcp-form-notice.is-error { background: #fde8e8; color: #8b1e25; }
.tcp-form-success { padding: 20px 22px; border-radius: 12px; font: 16px/1.5 system-ui, sans-serif; text-align: left; background: #eaf5eb; color: #1f3a22; border: 1px solid #b9dcbc; }
.tcp-form-success:focus { outline: 3px solid #284527; outline-offset: 3px; }
.tcp-managed-wrap { padding: 24px 16px; }
.tcp-managed-form { max-width: 720px; margin: 24px auto; padding: 28px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); text-align: left; color: #1f3a22; }
.tcp-managed-form h3 { margin: 0 0 8px; color: #284527; }
.tcp-managed-form .tcp-field { margin: 14px 0; }
.tcp-managed-form label { display: block; margin-bottom: 6px; font-weight: 600; }
.tcp-managed-form input, .tcp-managed-form textarea { box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid #b9c6b9; border-radius: 8px; font: inherit; }
.tcp-managed-form textarea { min-height: 120px; }
.tcp-managed-form button { margin-top: 12px; padding: 13px 22px; border: 0; border-radius: 8px; background: #be2028; color: #fff; font-weight: 700; cursor: pointer; }
.tcp-managed-form button:disabled { opacity: .6; cursor: wait; }
/* The export's scroll-in animations never start without WordPress, which left whole sections (including forms) invisible. */
.elementor-invisible { visibility: visible !important; }
.elementor-element.animated, .elementor-invisible { animation: none !important; opacity: 1 !important; }
/* The phone menu opened with no background, so page text showed between the menu buttons. */
.wpr-mobile-nav-menu { background: #284527; padding: 10px 10px 14px; box-shadow: 0 14px 28px rgba(0, 0, 0, .25); }

/* Accessibility structure (skip link + hidden h1) injected by export-fixes.js. */
.tcp-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tcp-skip-link { position: absolute; top: -60px; left: 8px; z-index: 10000; background: #284527; color: #fff; padding: 12px 18px; border-radius: 0 0 8px 8px; font: 600 15px system-ui, sans-serif; text-decoration: none; transition: top .15s ease; }
.tcp-skip-link:focus { top: 0; }

/* Home contact form labels (item 4): the form sits on a white card, so dark text reads well. */
.tcp-field-label { display: block; font: 600 14px system-ui, sans-serif; color: #284527; margin: 0 0 6px; text-align: left; }

/* Christmas countdown "it's here" message (item 3), swapped in for the day/hour/minute/second grid on Dec 25 ET. */
.tcp-xmas-message { font: 700 clamp(20px, 4vw, 32px) "Poppins", sans-serif; color: #be2028; text-align: center; padding: 10px; }
/* Contrast (item 7): the countdown numbers were white on a #FCAF00 gold circle (1.86:1); the
   Contact Us panel's description text was #F8F8F8 on #E31E25 red (4.42:1, just under AA). */
.wpr-countdown-number, .wpr-countdown-label { color: #284527 !important; }
/* Only the red Contact Us panel on the home page: every other feature list sits on white and keeps its own dark text. */
.elementor-element-e2f1903 .wpr-feature-list-description { color: #ffffff !important; }
/* FAQ accordion links (the Amazon Wish List links) relied on color alone to read as links. */
.wpr-acc-panel-content a { text-decoration: underline; }

/* Thank-you page content (item 6): previously blank between the hero and footer. */
.tcp-thankyou { max-width: 640px; margin: 0 auto; padding: 24px 16px; text-align: center; color: #1f3a22; }
.tcp-thankyou h2 { color: #284527; font-size: clamp(26px, 4vw, 36px); margin: 0 0 14px; }
.tcp-thankyou p { font-size: 17px; line-height: 1.6; margin: 0 0 28px; }
.tcp-thankyou-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.tcp-thankyou-btn { display: inline-block; padding: 13px 26px; border-radius: 8px; font-weight: 700; text-decoration: none; background: #eef3ee; color: #284527; border: 2px solid #284527; }
.tcp-thankyou-btn-primary { background: #be2028; color: #fff; border-color: #be2028; }

/* Footer: the Facebook and Instagram icons are centered under the tree logo. The tree is left-aligned in its
   column and up to 125px wide (91px on tablets, less in a narrow column), so the icons get that same width. */
.elementor-630 .elementor-element.elementor-element-be83729, .tcp-credit-column { width: min(125px, 100%); }
.elementor-630 .elementor-element.elementor-element-be83729 .elementor-widget-container { text-align: center; }
.elementor-630 .elementor-element.elementor-element-be83729 .elementor-social-icons-wrapper { display: flex; justify-content: center; flex-wrap: nowrap; gap: 30px; }
.elementor-630 .elementor-element.elementor-element-be83729 .elementor-grid-item { margin: 0; flex: none; }

/* "Designed by The Future Forge": on computers and tablets it's under the icons, centered on the tree, with the
   copyright bar pulled up so "All rights reserved" is level with it. On phones it's the last thing on the page. */
.elementor-630 a.tcp-credit { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px 0 0; color: #fff; text-decoration: none; text-align: center; white-space: nowrap; font: 700 15px/1.2 "Poppins", system-ui, sans-serif; }
.elementor-630 a.tcp-credit:hover, .elementor-630 a.tcp-credit:focus { color: #fff; text-decoration: none; }
.tcp-credit img { width: 34px; height: 34px; object-fit: contain; }
.tcp-credit small { display: block; margin-bottom: 1px; font-size: 12px; font-weight: 400; color: #dfe8df; }
.tcp-credit:hover span, .tcp-credit:focus-visible span { text-decoration: underline; }
.tcp-credit:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.elementor-630 a.tcp-credit-bottom { display: none; }
@media (min-width: 768px) {
  .tcp-snow > .elementor-element-6392c91 { margin-top: var(--tcp-credit-lift, -29px); }
}
/* Wider screens add 20px under the link columns. */
@media (min-width: 1367px) {
  .tcp-snow { --tcp-credit-lift: -60px; }
}
@media (max-width: 1024px) {
  .elementor-630 .elementor-element.elementor-element-be83729, .tcp-credit-column { width: min(91px, 100%); }
  .elementor-630 .elementor-element.elementor-element-be83729 .elementor-social-icons-wrapper { gap: 12px; }
  .elementor-630 a.tcp-credit { font-size: 13px; }
  .tcp-credit img { width: 28px; height: 28px; }
}
/* Tablets: the tree's column was squeezed to 15% of the screen, shrinking the tree until the icons were as wide
   as it and pushing the credit against the screen edge. A minimum width keeps the tree at its full 91px. */
/* The Contacts email ran off the screen on tablets too; there it wraps when it doesn't fit on one line. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-630 .elementor-element.elementor-element-94bc793 { min-width: 131px; }
  .elementor-630 .elementor-element-e0819f1 { min-width: 0; }
  .elementor-630 .elementor-element-ba97d4e .elementor-icon-list-text { overflow-wrap: anywhere; }
}
@media (max-width: 767px) {
  .elementor-630 a.tcp-credit-column { display: none; }
  .elementor-630 .elementor-element-6392c91 > .e-con-inner { flex-direction: column; align-items: center; }
  .elementor-630 a.tcp-credit-bottom { display: flex; width: auto; margin: 14px auto 28px; }
}

/* Header menu. The dropdown arrow sat pinned to the right edge of its button, so "Request Assistance" and
   "Serve With Us" looked off-center; it now follows the words, and each button's text + arrow is centered. */
.elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu > li.menu-item-has-children > .wpr-menu-item { padding-left: 14px; padding-right: 14px; }
.elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu > li > .wpr-menu-item .wpr-sub-icon { position: static; display: inline-block; margin-left: 6px; transform: none; line-height: 1; vertical-align: middle; }
/* The dropdowns are frosted glass: the page behind them shows through, blurred, behind the theme's dark green
   text. They're as wide as their longest item, so "Guidelines for Requesting Assistance" stays on one line. */
.elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu .wpr-sub-menu {
  width: max-content;
  min-width: 180px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border-color: rgba(255, 255, 255, .6);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu .wpr-sub-menu li { margin: 4px 6px; background: transparent; }
/* One green highlight that follows the pointer in every dropdown; the page you're on is shown in bold. */
.elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu .wpr-sub-menu .wpr-sub-menu-item {
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 8px;
  background-color: transparent;
  color: #284527;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu .wpr-sub-menu .wpr-sub-menu-item.wpr-active-menu-item { font-weight: 700; }
.elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu .wpr-sub-menu .wpr-sub-menu-item:hover,
.elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu .wpr-sub-menu .wpr-sub-menu-item:focus-visible { background-color: var(--e-global-color-007593e); color: #fff; }
/* Login's hover showed the menu plugin's default purple; it uses the theme's green, as the header intended. */
.elementor-996 .elementor-element.elementor-element-6c5ae5f .wpr-button-none:hover { background-color: var(--e-global-color-007593e); }
/* Seven top-level items (added "Fundraising") need to fit on one line at every width from 1025px up
   (the phone/hamburger menu takes over below that); the header only has enough native width for the
   full-size (16px) item spacing again once it reaches ~1418px. In between, the per-item padding/margins
   and the ".menu-item" pill's own min-width (set by the client's custom CSS further down in this cascade,
   normally 100px) are trimmed in graduated steps so the widest screens in this band keep as much of
   today's spacing as possible; only the tightest step (1025-1149px) also drops the font size by 1px,
   since padding/margin/min-width trims alone can't close the gap that low. Checked: dropdowns, arrow
   and centering are untouched, only the pill's own breathing room (and, above 1366px, the font size)
   shrinks.
   The 1250px+ step originally stopped at 1365px because that's where the *client's own* custom CSS
   (further down this cascade, not ours) drops the item font from 16px to 14px via its own
   "max-width:1366px" rule -- at 1366px the smaller font plus this step's trims fit fine with no help
   from us. But that client rule is a hard cliff, not a smooth scale-down: at 1367px the font jumps
   straight back to 16px while the header's own side padding *also* happens to shrink there (a second,
   unrelated client rule keyed to the same 1366px cutoff), and neither change is enough to offset the
   extra width 16px text needs. The combination left a gap from 1367px up to ~1417px where "FAQs" wraps
   to a second row (confirmed empirically: 1366px fits, 1380/1400/1410/1416px wrap, 1418px+ fits
   natively). Rather than chase that cliff with a second hand-tuned band, this step now simply runs
   through the whole gap (1250-1417px) and forces the 14px font itself instead of relying on the
   client's rule, so our own trims are the only thing that has to hold across the widened range -- and
   since they're already tighter than the native 16px spacing they replace, they fit the same or better
   at every width up to the point (1418px) where the header is wide enough to need no help at all. */
@media (min-width: 1025px) and (max-width: 1149px) {
  .elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu > li > .wpr-menu-item { padding-left: 2px; padding-right: 2px; font-size: 13px; }
  .elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu > li.menu-item-has-children > .wpr-menu-item { padding-left: 4px; padding-right: 4px; }
  .elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu > .menu-item { margin-left: 1px; margin-right: 1px; }
  .elementor-996 .elementor-element.elementor-element-4eedcfa .menu-item, .elementor-996 .elementor-element.elementor-element-4eedcfa .current_page_item { min-width: 46px; }
}
@media (min-width: 1150px) and (max-width: 1249px) {
  .elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu > li > .wpr-menu-item { padding-left: 6px; padding-right: 6px; font-size: 14px; }
  .elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu > li.menu-item-has-children > .wpr-menu-item { padding-left: 8px; padding-right: 8px; }
  .elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu > .menu-item { margin-left: 2px; margin-right: 2px; }
  .elementor-996 .elementor-element.elementor-element-4eedcfa .menu-item, .elementor-996 .elementor-element.elementor-element-4eedcfa .current_page_item { min-width: 70px; }
}
@media (min-width: 1250px) and (max-width: 1417px) {
  .elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu > li > .wpr-menu-item { padding-left: 12px; padding-right: 12px; font-size: 14px; }
  .elementor-996 .elementor-element.elementor-element-4eedcfa .wpr-nav-menu > li.menu-item-has-children > .wpr-menu-item { padding-left: 12px; padding-right: 12px; }
  .elementor-996 .elementor-element.elementor-element-4eedcfa .menu-item, .elementor-996 .elementor-element.elementor-element-4eedcfa .current_page_item { min-width: 90px; }
}

/* Client rollout (Sept 2026): Fundraising page, corporate sponsors and a couple of new content slots.
   A "slot" is an empty box the client fills in later from the page editor; hide it on the public site
   until then (the editor shows it via its own CSS so it stays clickable there). */
.tcp-slot:empty { display: none; }

/* Client rollout (Sept 2026, cont'd): a named photo slot above a fundraiser box title (e.g. the
   Fundraising page's Super Hero Day / Coin Challenge photos). Placeholder markup ships as a 1x1
   transparent gif so the block always scans as media; hide it on the public site until the client
   uploads a real photo (the editor shows its own placeholder box instead -- see editor.css). Once
   filled, it reads as a clean photo across every page that uses this class. */
.tcp-img-slot { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; border-radius: 12px; margin: 0 auto 20px; }
.tcp-img-slot[src^="data:"] { display: none; }
/* The client's Coin Challenge logo file is a 1024x1024 picture whose logo is only ~30% of it, on white, so
   at "contain" it reads tiny next to the wide Super Hero banner. This zooms in on the logo (centred, ~84% of
   the box height); the clip is the box shrunk by the same factor, so after the zoom the visible area is
   exactly the normal box and nothing spills over the text. Keyed to this one file name on purpose: if she
   uploads a different picture, it goes back to the normal "contain" fit above. */
.tcp-img-slot[src*="9697986a-untitled-design-27"] { object-fit: cover; object-position: 50% 43.75%; transform: scale(1.45); clip-path: inset(15.52% round 8.3px); }

/* Text sitting directly on a green banner (sponsor guidelines, corporate intro, fundraising intro). */
.tcp-banner-text { font: 400 22px/1.5 "Poppins", sans-serif; color: #EAEAEA; text-align: center; max-width: 900px; margin: 18px auto 0; }
@media (max-width: 767px) {
  .tcp-banner-text { font-size: 16px; }
}

/* A sub-heading on a green banner (corporate sponsors / family necessities on the Donate page), matching
   the ABeeZee-italic look every page's own hero heading uses, but sized for a second-level heading. */
.tcp-banner-heading { font: italic 600 40px/1.2 "ABeeZee", sans-serif; color: #fff; text-align: center; margin: 0; }
@media (max-width: 767px) {
  .tcp-banner-heading { font-size: 30px; }
}

/* Donate page: "Become a Corporate Sponsor", inserted between the Zeffy donation form and the Amazon Wish
   List. Cards are white so they read clearly against the green section, each with its own colored band. */
.tcp-corporate-section { margin: 48px auto; padding: 0 10px; max-width: 1157px; }
.tcp-corporate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }
.tcp-corporate-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); display: flex; flex-direction: column; }
.tcp-corporate-card-head { padding: 20px 16px; text-align: center; }
.tcp-corporate-name { display: block; font: 700 22px "Poppins", sans-serif; }
.tcp-corporate-price { display: block; font: 600 28px "Poppins", sans-serif; margin-top: 4px; }
.tcp-corporate-info { flex: 1; margin: 0; padding: 18px 20px 22px; font: 400 16px/1.6 "Poppins", sans-serif; color: #284527; text-align: left; overflow-wrap: anywhere; }
.tcp-corporate-gold .tcp-corporate-card-head { background: #E3AC36; color: #3a2a00; }
.tcp-corporate-silver .tcp-corporate-card-head { background: #B8BEC4; color: #1f2a21; }
.tcp-corporate-green .tcp-corporate-card-head { background: #284527; color: #fff; }
.tcp-corporate-red .tcp-corporate-card-head { background: #be2028; color: #fff; }
@media (max-width: 1024px) and (min-width: 768px) {
  .tcp-corporate-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .tcp-corporate-grid { grid-template-columns: 1fr; }
  .tcp-corporate-section { margin: 32px auto; }
}

/* Donate page: "Donate Family Necessities", after the Corporate Sponsor section and before the testimonials.
   The list reads as a centred note: a bold lead-in, the items running on with their "~" separators, and a
   bold call to action, with comfortable line spacing. */
.tcp-necessities-section { margin: 48px auto; padding: 0 10px; max-width: 900px; text-align: center; }
.tcp-necessities-panel { background: #fff; border-radius: 16px; padding: 30px 40px; margin-top: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.tcp-necessities-list { margin: 0; font: 400 17px/1.8 "Poppins", sans-serif; color: #284527; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .tcp-necessities-section { margin: 32px auto; }
  .tcp-necessities-panel { padding: 24px 20px; }
}

/* Fundraising page hero: a page title + intro directly on the green banner, the same treatment every
   other page's hero heading uses (see e.g. the Donate page's "Your Generosity..." heading). */
.tcp-hero-title { font: italic 600 50px/1.15 "ABeeZee", sans-serif; color: #fff; text-align: center; margin: 0; }
@media (max-width: 767px) {
  .tcp-hero-title { font-size: 30px; }
}

/* Fundraising page: "Super Hero Day" / "TCP Coin Challenge Competition", as two equal cards side by
   side (same green italic heading treatment as About Us's "How it All Began..."). The client hand-wraps
   her own paragraphs with <br> and &nbsp; runs sized for no particular screen width; left-aligned text
   in a fixed-width card reads cleanly whether or not her line breaks land where the card wraps on its
   own, where centered text would look ragged. A white card (matching the Donate page's corporate-sponsor
   cards) also gives the long hand-written text a contained, consistent box instead of running the full
   page width. !important on align-items overrides Elementor's own per-element "center" (set when this
   container was a plain flex row); without it the shorter card floats centered instead of matching the
   taller one's full height. */
.elementor-element-1a1709b > .e-con-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1157px; margin: 0 auto; padding: 0 10px 40px; align-items: stretch !important; }
.tcp-section { max-width: none; margin: 0; padding: 28px 28px 32px; text-align: center; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); display: flex; flex-direction: column; }
.tcp-section-heading { font: italic 600 32px/1.2 "ABeeZee", sans-serif; color: #284527; margin: 0 0 16px; }
.tcp-section-info { margin: 0; font: 400 17px/1.6 "Poppins", sans-serif; color: #1f3a22; text-align: left; overflow-wrap: anywhere; }
/* Side by side: every picture gets the same fixed-shape box (contain, so logos are never cropped) and every
   title the same two-line-tall box, so pictures, titles and text all start at the same height in both cards
   whatever size picture is uploaded or however many lines the title takes. */
@media (min-width: 768px) {
  .tcp-section-heading { min-height: 2.4em; align-content: center; }
}
@media (max-width: 767px) {
  .elementor-element-1a1709b > .e-con-inner { grid-template-columns: 1fr; max-width: 480px; padding: 0 10px 24px; }
  .tcp-section-heading { font-size: 26px; }
}
/* A simple form placed "in a new section" (Add a simple form dialog, "Where it goes" -> "In a new
   section"). The section spans the page edge-to-edge like the site's own green/white banners, with the
   same max content width and generous top/bottom padding; the form itself keeps the white card look
   (.tcp-managed-form, above) on either background so its labels and inputs stay readable. */
.tcp-form-section { padding: 60px 16px; font-family: "Poppins", sans-serif; }
.tcp-form-section--white { background: #ffffff; }
.tcp-form-section--green { background: #405F40; }
.tcp-form-section__inner { max-width: 1140px; margin: 0 auto; }
/* The wrap and card get their own spacing from the section around them, instead of adding their own
   on top of it (they still keep their normal spacing for a "next to a paragraph" placement, which
   never sits inside a .tcp-form-section). */
.tcp-form-section .tcp-managed-wrap { padding: 0; }
.tcp-form-section .tcp-managed-form { margin: 0 auto; }
@media (max-width: 767px) {
  .tcp-form-section { padding: 40px 16px; }
}

/* Home page "ways to give" banner: the Donate / Amazon Wish List items stay as they were, with a short
   editable note under them pointing to the Ways To Give tab (the client chose this over showing all four
   options -- cleaner on phones). The link inside is an ordinary link the editor's Link button can change. */
.tcp-give-note { max-width: 640px; margin: 32px auto 0; }
.tcp-give-note a { color: #fff; font-weight: 600; text-decoration: underline; }
.tcp-give-note a:hover, .tcp-give-note a:focus { color: #e9e9e9; }
@media (max-width: 767px) {
  .tcp-give-note { margin-top: 24px; }
}

/* Meet the Team page: a centred grid of cards, each with a round photo, a name and a short bio. Every card is
   the same width and every photo the same size, so the grid stays tidy whatever is uploaded; a partly filled
   last row is centred. A card with no photo, name or bio is hidden (the editor shows it, see editor.css). */
.tcp-team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; max-width: 1157px; margin: 0 auto; padding: 0 10px 40px; }
.tcp-team-card { flex: 0 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); padding: 28px 24px 30px; text-align: center; }
.tcp-team-card .tcp-img-slot { flex: none; width: 170px; height: 170px; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 25%; border-radius: 50%; margin: 0 auto 18px; }
.tcp-team-name { margin: 0 0 10px; font: italic 600 26px/1.2 "ABeeZee", sans-serif; color: #284527; overflow-wrap: anywhere; }
.tcp-team-bio { margin: 0; font: 400 16px/1.6 "Poppins", sans-serif; color: #1f3a22; overflow-wrap: anywhere; }
.tcp-team-card:has(.tcp-img-slot[src^="data:"]):has(.tcp-team-name:empty):has(.tcp-team-bio:empty) { display: none; }
@media (max-width: 767px) {
  .tcp-team-card { flex: 1 1 100%; max-width: 420px; }
  .tcp-team-name { font-size: 23px; }
}
/* A person with no photo yet gets a soft placeholder silhouette, so names line up across the row. */
.tcp-team-card .tcp-img-slot[src^="data:"] { display: block; background: #e4ebe2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='38' r='17' fill='%23b4c4b1'/%3E%3Cpath d='M18 88c2-18 15-28 32-28s30 10 32 28z' fill='%23b4c4b1'/%3E%3C/svg%3E") center / 100% no-repeat; }