/* RECO SYSTEM section — extracted verbatim from reco-immersive's
   shared Webflow CSS so the same animated 4-brand cards section can render
   on reco-psychiatry, reco-island, and (already on) reco-immersive.
   Define the CSS variables locally so it works outside the immersive theme. */
:root {
  --immersive-green: #50a63c;
  --primary-fire: #e87800;
  --primary-black: #201e10;
  --primary-cream: #f5f0eb;
}

.section.u-theme-dark{z-index:1;overflow:visible}
.u-container{padding:5.63em 7.5em}
.exploration_contain.u-container{margin-top:2rem}
.u-text-style-h2{letter-spacing:-2px;color:inherit;margin-top:0;margin-bottom:0;font-size:4em;font-weight:400;line-height:1}
.u-text-style-h4{letter-spacing:-.7px;text-wrap:balance;margin-bottom:0;font-size:1.5em;position:relative}
.u-text-style-h4.is--trauma{max-width:30ch}
.u-text-style-h4.is--braingut{max-width:24ch}
.u-text-style-h4.is--nutrient{max-width:23ch}
.u-text-style-mono{opacity:.6;letter-spacing:1.5px;text-transform:uppercase;flex-flow:wrap;margin-bottom:0;font-family:DM Mono,sans-serif}
.u-text-style-mono.is--treatment{color:var(--immersive-green);font-size:.88em}
.breakthrough_layout.u-container{padding-bottom:1rem}
.breakthrough_header.u-text-style-h2{color:inherit;text-wrap:balance;max-width:18ch}
.facility_layout.u-container{grid-column-gap:2rem;grid-row-gap:2rem;text-align:center;flex-flow:column;justify-content:flex-start;align-items:center;max-width:100ch;margin-left:auto;margin-right:auto;display:flex;position:relative}
.u-opacity70{opacity:.7}
.u-theme-dark{background-color:var(--primary-black);color:var(--white)}
.causes_layout.u-container{padding-bottom:1rem}
.causes_tabs_contain.u-container{padding-top:0}
.testimonial_layout.u-container{padding-bottom:1rem}
.system_contain.u-container{padding-left:0;padding-right:0}
.system_layout{grid-column-gap:5em;grid-row-gap:5em;flex-flow:column;justify-content:flex-start;align-items:center;display:flex}
.system_title_wrap{grid-column-gap:2em;grid-row-gap:2em;text-align:center;flex-flow:column;justify-content:flex-start;align-items:center;max-width:75ch;display:flex}
.facility_contain.u-container{padding-top:0;padding-left:0;padding-right:0}
.data_content_bg.u-theme-dark{background-color:#070c01;padding-bottom:4rem}
.footer_nav_heading.u-text-style-mono{opacity:.3;font-size:.75rem}
.footer_contain.u-container{max-width:none;padding-left:3em;padding-right:3em}
.system_animation_wrap{width:100%;height:100vh;display:block}
.system_native_wrap{grid-column-gap:1rem;grid-row-gap:1rem;justify-content:center;align-items:stretch;width:100%;display:none;position:relative}
.system_native_item{grid-column-gap:.75rem;grid-row-gap:.75rem;flex-flow:column;max-width:35ch;display:flex}
.system_native_item.is--intensive{transform:translate(55vw,-30%)}
.system_native_item.is--immersive{transform:translate(10vw)}
.system_native_item.is--institute{transform:translate(27vw,-5vh)}
.system_native_item.is--island{margin-left:auto;margin-right:auto;transform:translateY(5vh)}
.system_overline{letter-spacing:1.5px;text-transform:uppercase;flex-flow:wrap;margin-bottom:0;font-family:DM Mono,sans-serif}
.system_overline.is--intensive{color:#f03e7c}
.system_overline.is--immersive_block{letter-spacing:.5px;font-size:.5rem;font-weight:500}
.system_overline.is--island{color:var(--primary-fire)}
.system_overline.is--institute{color:#10a8ca}
.system_native_column{grid-row-gap:12rem;flex-flow:column;order:9999;width:100vw;display:flex;position:relative}
.system_native_track{opacity:0;width:0;overflow:hidden}
.system_native_img{aspect-ratio:1;object-fit:cover;border-radius:100vw;width:90%;height:90%;position:absolute;inset:auto}
.system_native_img_wrap{aspect-ratio:1;border-radius:100vw;justify-content:center;align-items:center;width:15rem;height:15rem;padding:1rem;display:flex;position:sticky;top:30vh}
.system_native_img_circle{width:100%;height:100%;position:absolute;transform:rotate(-310deg)}
.system_native_immersive_wrap{grid-column-gap:.5rem;grid-row-gap:.5rem;color:var(--immersive-green);justify-content:flex-start;align-items:center;display:flex}
.system_native_immersive_block{background-color:var(--immersive-green);color:var(--primary-black);border-radius:.25rem;padding:.2rem .33rem}
.system_native_line_wrap{pointer-events:none;color:#37362d;width:100%;position:absolute;inset:0% auto 0% 0%;overflow:clip}
.system_native_line_svg,.system_native_line_svg_skeleton{width:100%;height:100%}
.system_native_line_wrap_skeleton{pointer-events:none;color:#37362d;padding-top:4rem;padding-bottom:4rem;position:absolute;inset:0%}
.system_native_line_img{height:150%;margin:auto;position:absolute;inset:0%}
.system_animation_lottie{width:100%;height:100%}
.wwt_contain.u-container{padding-bottom:0}
.wwt_layout.u-container{padding-bottom:1rem}
.wwt_header.u-text-style-h2{color:inherit;text-wrap:balance;max-width:15ch;font-weight:300}
.wwt_banner.u-theme-dark{z-index:0}
.wwt_banner_layout.u-container{padding-bottom:1rem}
.wwt_banner_header.u-text-style-h2{color:var(--lite-black);text-wrap:balance;max-width:30ch;font-weight:300}
.treatment_layout.u-container{padding-bottom:1rem}
.wwt_main_header.u-text-style-h2{color:var(--lite-black);max-width:30ch;margin-bottom:.5rem;font-weight:300}
@media screen and (max-width:991px){.u-container{padding-left:4em;padding-right:4em}.u-text-style-h4{font-size:1.3em}.data_content_bg.u-theme-dark{margin-top:-40%}}
@media screen and (max-width:767px){.u-container{padding-left:2em;padding-right:2em}.u-text-style-h2{font-size:3.5em}.u-text-style-h4{font-size:1.2em}.facility_layout.u-container{padding-top:12em}.system_title_wrap{padding-left:1rem;padding-right:1rem}.footer_contain.u-container{padding-left:2em;padding-right:2em}.system_native_wrap{grid-column-gap:0rem;grid-row-gap:0rem;justify-content:flex-start}.system_native_item{max-width:40ch;padding:2rem 1rem}.system_native_item.is--intensive{max-width:35ch;margin-top:-5rem;margin-left:25%;transform:translate(20%,20%)}.system_native_item.is--immersive{margin-left:5%;transform:translateY(50%)}.system_native_item.is--institute{margin-left:auto}.system_native_column{grid-column-gap:12rem;grid-row-gap:12rem;width:100%}.system_native_track{opacity:0;width:0;overflow:hidden}.system_native_line_wrap{justify-content:center;align-items:center;width:100%;display:flex;overflow:clip}.system_native_line_svg{width:auto;height:200%}}
@media screen and (max-width:479px){.u-container{padding-left:1.5em;padding-right:1.5em}.facility_layout.u-container{padding-top:8em}.footer_contain.u-container{padding-left:1.5em}.system_native_wrap{display:flex}.system_native_item{max-width:40ch;padding:5rem 2rem 5rem 0}.system_native_item.is--intensive{max-width:30ch;margin-top:0;margin-left:auto;margin-right:auto;transform:translate(0%)}.system_native_item.is--immersive{max-width:30ch;margin-left:auto;margin-right:auto;padding-right:3rem;transform:translateY(-10%)}.system_native_item.is--island{max-width:30ch;transform:none}.system_native_column{z-index:1;grid-column-gap:0rem;grid-row-gap:0rem;width:100%}.system_native_line_wrap{z-index:0;width:25%;position:relative}.system_native_line_img{max-width:none;height:100%;left:auto;right:auto}.system_animation_lottie{display:none}.system_native_item_img{aspect-ratio:3/2;object-fit:cover;border-radius:.75rem}.wwt_header.u-text-style-h2{font-size:3em}}

/* Standalone Lottie player mount: when the Webflow runtime isn't available
   (i.e. psych + island), force the .system_animation_lottie wrapper visible
   so our shim can stamp a dotlottie-player into it. */
.system_animation_lottie {
  display: block !important;
  width: 100%;
  height: auto;
  min-height: 240px;
}
.system_animation_lottie dotlottie-player,
.system_animation_lottie .reco-lottie-mount {
  display: block;
  width: 100%;
  height: 100%;
}

/* ======================================================================
   Homepage blog section (island / immersive) — clean, luxury card design
   matching health/psych. Lives here so island/immersive (which only load
   reco-system.css, not reco-base.css) get the styling without the broad
   reco-base body/html/.hero rules that conflict with their Webflow CSS.
   ====================================================================== */
.section-blog-home {
  padding-top: 80px;
  padding-bottom: 96px;
  background: #fafaf7;
}
.section-blog-home .flex-24.centered { margin-bottom: 56px; }
.section-blog-home .blogs-wrapper { width: 100%; min-height: 0 !important; height: auto !important; }
.section-blog-home .blogs-wrapper > .w-dyn-list { min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; }
.section-blog-home .w-dyn-empty { display: none !important; }
.section-blog-home .flex-24.centered:last-child { margin-top: 32px !important; margin-bottom: 0 !important; }
.section-blog-home .blogs-list,
.section-blog-home .w-dyn-items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.section-blog-home .blog-list-item {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.section-blog-home .blog-list-content {
  width: 100% !important;
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(32, 30, 16, 0.08);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.section-blog-home .blog-list-content:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 18px 48px rgba(32, 30, 16, 0.10), 0 4px 6px rgba(85, 61, 0, 0.05);
}
.section-blog-home .blog-image-div {
  aspect-ratio: 16 / 10;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #f0ede6, #e8e4dc);
}
.section-blog-home .blog-image-div img,
.section-blog-home .blog-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  transition: transform .6s ease;
}
.section-blog-home .blog-list-content:hover .blog-image-div img,
.section-blog-home .blog-list-content:hover .blog-image {
  transform: scale(1.04);
}
.section-blog-home .blog-list-text {
  padding: 24px 24px 28px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-blog-home .blog-list-text .font-12 {
  font-family: 'DM Mono', monospace;
  font-size: 11px !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(32, 30, 16, 0.55) !important;
}
.section-blog-home .blog-list-text h3,
.section-blog-home .blog-list-text .font-24 {
  font-family: Figtree, sans-serif;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #201E10 !important;
  margin: 0 !important;
  letter-spacing: -0.2px;
}
.section-blog-home .blog-list-text .font-16,
.section-blog-home .blog-list-text p {
  font-family: Figtree, sans-serif;
  font-size: 14px !important;
  line-height: 1.65;
  color: rgba(32, 30, 16, 0.55) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.section-blog-home .orange-submit.w-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-decoration: none;
}
@media (max-width: 991px) {
  .section-blog-home .blogs-list,
  .section-blog-home .w-dyn-items { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .section-blog-home { padding-top: 64px; padding-bottom: 72px; }
}
@media (max-width: 600px) {
  .section-blog-home .blogs-list,
  .section-blog-home .w-dyn-items { grid-template-columns: 1fr; gap: 18px; }
}

/* Blog section header — keep title compact and refined to match the rest
   of the homepage section titles, not the giant hero font. */
.section-blog-home .flex-24.centered { gap: 12px; align-items: center; display: flex; flex-direction: column; }
.section-blog-home .font-12.dm-mono,
.section-blog-home .u-text-style-mono {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(32, 30, 16, 0.55);
  margin: 0;
}
.section-blog-home__title,
.section-blog-home h2.u-text-style-h2 {
  font-family: Figtree, sans-serif;
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 300 !important;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: #201E10;
  margin: 0 !important;
  max-width: 28ch;
  text-align: center;
}

/* ============================================================
   Island home — restored sections (We've been in your shoes,
   With you every step). The original Webflow IX2 reveal animation
   uses inline opacity:0 + data-w-id but the runtime doesn't always
   re-initialize, leaving the section invisible. Force visible.
   ============================================================ */
.team-grid-div,
.recosystem-section-div,
.flex-200.z-top,
[data-w-id][style*="opacity:0"] {
  opacity: 1 !important;
}

/* Webflow handles the layout; we only force visibility above. */

/* Tighten blog section spacing — kill the huge gap below blog cards */
.section-blog-home {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.section-blog-home > .w-layout-blockcontainer,
.section-blog-home .max-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 24px !important;
}
.section-blog-home .blogs-wrapper { margin: 0 !important; padding: 0 !important; }
.section-blog-home .blogs-wrapper > .w-dyn-list {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.section-blog-home .flex-24.centered:last-child {
  margin: 32px 0 0 !important;
  padding: 0 !important;
}

/* Health home blog section — same treatment */
.section.section--blog {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}