.elementor-11672 .elementor-element.elementor-element-8c8744a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-fd8ff7f *//* =========================================================
   CRASSULA PHARMACEUTICALS — facilities.css
   Facilities page (/facilities/) add-on. Requires about.css
   (base design system) loaded before it.
   ========================================================= */

/* ---------------------------------------------------------
   07.2 FACILITIES (/facilities/) — v1 (pending approval)
   --------------------------------------------------------- */
/* Hero background video (YouTube, muted loop) over a poster image */
.cr-hero__video { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--cr-ease); }
.cr-hero__video.is-ready { opacity: 1; }
.cr-hero__video iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%); border: 0; }
.cr-hero__toggle { position: absolute; right: var(--cr-gutter); bottom: var(--cr-s5); width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,248,207,.7); background: rgba(18,35,13,.35); color: var(--cr-cream); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--cr-t-med) var(--cr-ease), border-color var(--cr-t-med) var(--cr-ease); }
.cr-hero__toggle:hover { background: rgba(18,35,13,.7); border-color: var(--cr-lime); }
.cr-hero__toggle[hidden] { display: none; }
.cr-display--long { font-size: clamp(2rem, 0.9rem + 3.9vw, 4.75rem) !important; line-height: 1 !important; max-width: 18ch; }

/* 01 Facility: spec sheet + photo */
.cr-spec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--cr-s8); align-items: start; margin-top: var(--cr-s8); }
.cr-spec__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cr-ink); }
.cr-spec__rows li { display: grid; grid-template-columns: 56px 1fr; gap: var(--cr-s4); padding: var(--cr-s5) 0; border-bottom: 1px solid var(--cr-line); }
.cr-spec__rows li > span:first-child { font-size: var(--cr-fs-label); letter-spacing: var(--cr-tracking-label); font-weight: 500; color: var(--cr-green); padding-top: 4px; }
.cr-spec__rows li > * { transition: transform var(--cr-t-med) var(--cr-ease); }
@media (hover: hover) { .cr-spec__rows li:hover > * { transform: translateX(8px); } }
.cr-spec .cr-figure { margin: 0; position: sticky; top: calc(var(--cr-sticky-offset, 0px) + 88px); }
.cr-spec .cr-figure__frame { aspect-ratio: 4 / 3; }
.cr-datarow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--cr-s9) 0 0; border-top: 1px solid var(--cr-ink); }
.cr-datarow div { padding: var(--cr-s5) var(--cr-s5) 0 0; }
.cr-datarow div + div { border-left: 1px solid var(--cr-line); padding-left: var(--cr-s5); }
.cr-datarow dt { font-size: var(--cr-fs-label); letter-spacing: var(--cr-tracking-label); text-transform: uppercase; font-weight: 500; color: var(--cr-ink-70); }
.cr-datarow dd { margin: var(--cr-s3) 0 0; font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem); font-weight: 200; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
.cr-datarow dd small { white-space: normal; }
.cr-datarow dd strong { font-weight: 700; }
.cr-datarow dd small { display: block; margin-top: var(--cr-s3); font-size: var(--cr-fs-small); letter-spacing: 0; font-weight: 400; color: var(--cr-ink-70); line-height: 1.5; }

/* 02 Capabilities: heading scrolls normally (same top padding as other sections); only the cards pin */
.cr-hs { padding: var(--cr-s10) 0 0; }
.cr-hs__head { display: flex; justify-content: space-between; align-items: end; gap: var(--cr-s6); flex-wrap: wrap; }
.cr-hs__head .cr-lead { margin: 0; max-width: 46ch; }
.cr-hs__pin { position: relative; }
.cr-hs__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: var(--cr-s6); overflow: hidden; padding: calc(var(--cr-sticky-offset, 0px) + 56px) 0 var(--cr-s5); } /* 56px clears the sticky sub-nav */
.cr-hs__meter { height: 2px; background: var(--cr-line-dark); position: relative; overflow: hidden; }
.cr-hs__meter span { position: absolute; inset: 0; background: var(--cr-lime); transform: scaleX(0); transform-origin: left; }
.cr-hs__track { list-style: none; margin: 0; padding: 0 0 0 max(var(--cr-gutter), calc((100vw - var(--cr-container)) / 2 + var(--cr-gutter))); display: flex; gap: var(--cr-s5); will-change: transform; }
.cr-hs__track::after { content: ""; flex: 0 0 var(--cr-gutter); }
.cr-cap { flex: 0 0 min(420px, 80vw); height: min(380px, calc(100svh - 56px - 140px)); min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; padding: var(--cr-s6); border: 1px solid var(--cr-line-dark); border-radius: var(--cr-r-card); transition: border-color 700ms var(--cr-ease), background-color 700ms var(--cr-ease), transform 700ms var(--cr-ease); }
.cr-cap__n { font-size: clamp(3.5rem, 2.2rem + 3.5vw, 6rem); font-weight: 100; letter-spacing: -0.06em; line-height: .85; color: var(--cr-lime); transition: transform 900ms var(--cr-ease); transform-origin: left bottom; }
.cr-cap h3 { margin: 0; font-size: var(--cr-fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.cr-cap p { margin: var(--cr-s3) 0 0; color: rgba(255,248,207,.86); }
.cr-cap--key { background: var(--cr-green); border-color: transparent; }
.cr-cap--key .cr-cap__n, .cr-cap--key p { color: var(--cr-cream); }
@media (hover: hover) { .cr-cap:hover { border-color: rgba(255,248,207,.5); transform: translateY(-4px); } .cr-cap:hover .cr-cap__n { transform: scale(1.06); } }
.cr-hs--static .cr-hs__sticky { position: static; height: auto; overflow: visible; padding: var(--cr-s7) 0 var(--cr-s10); }
.cr-hs--static .cr-hs__track { flex-wrap: wrap; transform: none !important; max-width: var(--cr-container); margin: 0 auto; padding: 0 var(--cr-gutter); }
.cr-hs--static .cr-hs__track::after { display: none; }
.cr-hs--static .cr-cap { flex: 1 1 300px; height: auto; min-height: 0; gap: var(--cr-s6); }
.cr-hs--static .cr-hs__meter { display: none; }

/* 03 Quality & certifications */
.cr-certs { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--cr-s8); align-items: center; margin-top: var(--cr-s8); }
.cr-certs__card { background: #FFFFFF; border-radius: var(--cr-r-card); padding: var(--cr-s6); box-shadow: 0 24px 48px -36px rgba(18,35,13,.55); transition: transform 700ms var(--cr-ease); }
.cr-certs__card img { width: 100%; height: auto; }
@media (hover: hover) { .cr-certs__card:hover { transform: translateY(-4px); } }
.cr-chips { list-style: none; margin: var(--cr-s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cr-s2); }
.cr-chips li { padding: 10px 18px; border-radius: var(--cr-r-pill); border: 1px solid var(--cr-ink); font-weight: 500; font-size: var(--cr-fs-small); transition: background-color var(--cr-t-med) var(--cr-ease), color var(--cr-t-med) var(--cr-ease); }
@media (hover: hover) { .cr-chips li:hover { background: var(--cr-ink); color: var(--cr-cream); } }
.cr-certs__seal { display: flex; align-items: center; gap: var(--cr-s5); margin-top: var(--cr-s7); padding-top: var(--cr-s5); border-top: 1px solid var(--cr-line); }

/* 05 CTA on green */
.cr-green-bg .cr-btn--primary { background: var(--cr-cream); color: var(--cr-ink); }
.cr-green-bg .cr-btn--primary .cr-btn__icon { background: var(--cr-green); color: var(--cr-cream); }
.cr-green-bg .cr-btn--primary:hover { color: var(--cr-cream); }


@media (max-width: 900px) {
  .cr-spec, .cr-certs { grid-template-columns: 1fr; gap: var(--cr-s6); }
  .cr-spec .cr-figure { position: static; }
  .cr-datarow { grid-template-columns: 1fr; }
  .cr-datarow div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--cr-line); margin-top: var(--cr-s4); }
  .cr-hs { padding-top: var(--cr-s9); }
}/* End custom CSS */