/* CRU Brand Story · single purple-gold glass frame · 2026-09-01 */
/* CRU Story + Company · iridescent white-purple-gold gene backgrounds */

:root{
  --cru-iridescent-purple:#a678df;
  --cru-iridescent-purple-soft:#eadcff;
  --cru-iridescent-gold:#c99643;
  --cru-iridescent-gold-soft:#ead09a;
  --cru-iridescent-pearl:#fffdf8;
}

/* ===== Shared white × purple × gold biotech field ===== */
.cru-story-hero,.cru-company-hero,.cru-story-section,.cru-company-section{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
.cru-story-hero>.wrap,.cru-company-hero>.wrap,.cru-story-section>.wrap,.cru-company-section>.wrap{
  position:relative!important;
  z-index:3!important;
}

.cru-story-hero{
  color:#fff!important;
  border-bottom:1px solid rgba(166,120,205,.18)!important;
  background:linear-gradient(135deg,#fffdf9 0%,#f8f1ff 42%,#f1e5fb 73%,#fff4df 100%)!important;
}
.cru-story-hero::before{
  content:''!important;display:block!important;position:absolute!important;inset:-3%!important;z-index:0!important;pointer-events:none!important;
  background:url('/assets/cru-story-white-purple-gold-iridescent-gene-20260901.svg?v=iridescent-v1') center 48%/cover no-repeat!important;
  opacity:.96!important;filter:saturate(1.08) contrast(1.01)!important;mix-blend-mode:normal!important;
  transform:scale(1.025);transform-origin:50% 52%;animation:cruIridescentStoryDrift 18s ease-in-out infinite alternate!important;
}
.cru-story-hero::after{
  content:''!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
  background:linear-gradient(90deg,rgba(255,255,255,.10) 0%,rgba(251,247,255,.05) 38%,rgba(78,44,91,.07) 72%,rgba(65,36,77,.10) 100%),linear-gradient(180deg,rgba(255,255,255,.02) 58%,rgba(249,245,252,.26) 84%,#faf7fb 100%)!important;
}

.cru-company-hero{
  color:#31253a!important;
  border-bottom:1px solid rgba(169,120,53,.20)!important;
  background:linear-gradient(135deg,#fffdf9 0%,#faf5ff 43%,#f1e5fb 72%,#fff6e5 100%)!important;
}
.cru-company-hero::before{
  content:''!important;display:block!important;position:absolute!important;inset:-3%!important;z-index:0!important;pointer-events:none!important;
  background:url('/assets/cru-company-white-purple-gold-iridescent-gene-20260901.svg?v=iridescent-v1') center 48%/cover no-repeat!important;
  opacity:.96!important;filter:saturate(1.10) contrast(1.01)!important;mix-blend-mode:normal!important;
  transform:scale(1.025);transform-origin:56% 50%;animation:cruIridescentCompanyDrift 19s ease-in-out infinite alternate!important;
}
.cru-company-hero::after{
  content:''!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
  background:linear-gradient(90deg,rgba(255,255,255,.50) 0%,rgba(255,255,255,.28) 38%,rgba(249,242,255,.08) 64%,rgba(75,45,86,.05) 100%),linear-gradient(180deg,transparent 62%,rgba(249,245,252,.36) 85%,#faf7fb 100%)!important;
}
.cru-company-hero h1{color:#34283d!important;text-shadow:0 1px 0 rgba(255,255,255,.94),0 12px 34px rgba(93,59,111,.10)!important}
.cru-company-hero .lead{color:#675d6d!important;text-shadow:0 1px 0 rgba(255,255,255,.88)!important}
.cru-company-hero .eyebrow{color:#9d6b2d!important}

/* Long content areas stay bright, with the iridescent gene artwork fading into the page. */
.cru-story-section,.cru-company-section{
  color:#352a3c!important;
  background:radial-gradient(1000px 720px at 104% 7%,rgba(163,108,211,.18),transparent 70%),radial-gradient(880px 650px at -5% 42%,rgba(232,195,122,.18),transparent 72%),radial-gradient(900px 680px at 82% 98%,rgba(194,160,245,.14),transparent 72%),linear-gradient(180deg,#fbf9fd 0%,#f9f4fc 44%,#f5ecfa 72%,#fff9ed 100%)!important;
}
.cru-story-section::before,.cru-company-section::before{
  content:''!important;display:block!important;position:absolute!important;z-index:0!important;left:-5%!important;right:-5%!important;top:-70px!important;height:980px!important;pointer-events:none!important;
  background-repeat:no-repeat!important;background-position:center top!important;background-size:min(1680px,112vw) auto!important;
  opacity:.34!important;mix-blend-mode:normal!important;filter:saturate(1.14) contrast(1.02)!important;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.88) 54%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.88) 54%,transparent 100%)!important;
  animation:cruIridescentSectionBreathe 20s ease-in-out infinite alternate!important;
}
.cru-story-section::before{background-image:url('/assets/cru-story-white-purple-gold-iridescent-gene-20260901.svg?v=iridescent-v1')!important}
.cru-company-section::before{background-image:url('/assets/cru-company-white-purple-gold-iridescent-gene-20260901.svg?v=iridescent-v1')!important}
.cru-story-section::after,.cru-company-section::after{
  content:''!important;display:block!important;position:absolute!important;z-index:0!important;pointer-events:none!important;left:-18%!important;right:-18%!important;bottom:-260px!important;height:760px!important;border-radius:50%!important;
  background:radial-gradient(ellipse at 62% 50%,rgba(177,124,224,.18) 0%,rgba(218,189,250,.12) 33%,transparent 68%),radial-gradient(ellipse at 36% 44%,rgba(233,196,122,.20) 0%,rgba(246,226,183,.10) 34%,transparent 67%),radial-gradient(ellipse at 50% 56%,rgba(255,255,255,.72),transparent 69%)!important;
  filter:blur(6px)!important;opacity:.92!important;animation:cruIridescentHalo 15s ease-in-out infinite alternate!important;
}

/* ===== Brand Story first field: ONE visible frame only ===== */
.story-hero.cru-brand-story-luxury > .wrap{
  width:100%!important;max-width:1180px!important;margin:0 auto!important;padding:0 28px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.story-hero.cru-brand-story-luxury > .wrap::before,
.story-hero.cru-brand-story-luxury > .wrap::after{content:none!important;display:none!important}

.story-hero.cru-brand-story-luxury .cru-story-frame{
  border:1px solid rgba(230,199,137,.46)!important;
  background:radial-gradient(ellipse 68% 84% at 88% 14%,rgba(185,126,239,.25),transparent 62%),radial-gradient(ellipse 62% 72% at 10% 92%,rgba(228,182,94,.15),transparent 68%),radial-gradient(ellipse 52% 58% at 56% 48%,rgba(255,255,255,.07),transparent 72%),linear-gradient(135deg,rgba(49,29,65,.92) 0%,rgba(79,50,94,.86) 44%,rgba(42,29,53,.89) 72%,rgba(18,14,22,.94) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 90px rgba(208,172,245,.055),0 34px 90px -42px rgba(10,5,14,.82),0 0 42px rgba(152,93,195,.15),0 0 30px rgba(214,166,75,.09)!important;
  backdrop-filter:blur(15px) saturate(1.18)!important;-webkit-backdrop-filter:blur(15px) saturate(1.18)!important;
}
.story-hero.cru-brand-story-luxury .cru-story-frame::before{
  background:linear-gradient(105deg,transparent 0%,rgba(201,160,239,.035) 25%,rgba(255,255,255,.12) 42%,rgba(234,198,128,.23) 51%,rgba(191,135,235,.12) 62%,transparent 100%)!important;
}
.story-hero.cru-brand-story-luxury .cru-story-frame::after{
  inset:-18% -8% -12% 4%!important;opacity:.31!important;border:0!important;border-radius:0!important;background-position:70% 36%!important;background-size:980px auto!important;mix-blend-mode:screen!important;filter:brightness(1.52) contrast(1.08) drop-shadow(0 0 20px rgba(236,248,255,.22))!important;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 9%,rgba(0,0,0,.78) 27%,#000 49%,#000 100%)!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 9%,rgba(0,0,0,.78) 27%,#000 49%,#000 100%)!important;animation:cruStoryGeneDrift 15s ease-in-out infinite alternate!important;
}
.story-hero.cru-brand-story-luxury .cru-story-kicker,.story-hero.cru-brand-story-luxury .cru-story-title-sub{color:#ead092!important;text-shadow:0 0 18px rgba(229,193,121,.18)!important}
.story-hero.cru-brand-story-luxury .cru-story-title-main{color:#fffaf7!important;text-shadow:0 7px 30px rgba(10,4,15,.42),0 0 18px rgba(225,204,245,.10)!important}
.story-hero.cru-brand-story-luxury .cru-story-copy p{color:rgba(253,248,255,.84)!important}
.story-hero.cru-brand-story-luxury .cru-story-copy strong{color:#f2d9a5!important}
.story-hero.cru-brand-story-luxury .cru-story-rule{background:linear-gradient(90deg,#ebce8d 0%,rgba(203,150,241,.52) 54%,transparent 100%)!important;box-shadow:0 0 18px rgba(215,169,83,.18),0 0 18px rgba(174,112,219,.14)!important}
.story-hero.cru-brand-story-luxury .cru-story-art{border-top:1px solid rgba(231,202,143,.18)!important;background:radial-gradient(ellipse 52% 78% at 50% 108%,rgba(228,184,95,.16),transparent 66%),radial-gradient(ellipse 58% 92% at 82% 45%,rgba(177,116,228,.12),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.01),rgba(129,74,160,.03))!important}

/* Light glass treatment for story/company text cards so the new bright background remains visible. */
.cru-story-section .story-block .col-text,.cru-company-section .story-block .col-text{
  border-color:rgba(164,113,201,.22)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(249,242,253,.76))!important;
  box-shadow:0 24px 62px rgba(78,48,91,.11),inset 0 1px 0 rgba(255,255,255,.96),0 0 30px rgba(201,156,233,.055)!important;
}
.cru-story-section .story-divider,.cru-company-section .story-divider{background:linear-gradient(90deg,transparent,rgba(203,159,76,.44),rgba(151,98,196,.40),rgba(195,225,255,.24),transparent)!important}

@keyframes cruIridescentStoryDrift{from{transform:scale(1.025) translate3d(0,0,0)}to{transform:scale(1.065) translate3d(-18px,9px,0)}}
@keyframes cruIridescentCompanyDrift{from{transform:scale(1.025) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(16px,8px,0)}}
@keyframes cruIridescentSectionBreathe{from{transform:scale(1.01) translate3d(0,0,0);opacity:.29}to{transform:scale(1.04) translate3d(-12px,8px,0);opacity:.38}}
@keyframes cruIridescentHalo{from{transform:translate3d(0,0,0) scale(.96)}to{transform:translate3d(28px,-14px,0) scale(1.06)}}

@media(max-width:900px){
  .cru-story-section::before,.cru-company-section::before{height:800px!important;background-size:1280px auto!important;opacity:.30!important}
}
@media(max-width:760px){
  .cru-story-hero::before{background-position:36% 50%!important}
  .cru-company-hero::before{background-position:69% 50%!important}
  .story-hero.cru-brand-story-luxury > .wrap{width:100%!important;padding:0 16px!important}
  .story-hero.cru-brand-story-luxury .cru-story-frame{border-radius:22px!important;background:radial-gradient(ellipse 76% 72% at 88% 12%,rgba(186,126,239,.23),transparent 62%),radial-gradient(ellipse 72% 64% at 8% 96%,rgba(228,182,94,.14),transparent 69%),linear-gradient(140deg,rgba(48,30,63,.96),rgba(62,40,76,.91) 48%,rgba(18,15,22,.96))!important}
  .story-hero.cru-brand-story-luxury .cru-story-frame::after{inset:-10% -48% -8% -4%!important;opacity:.23!important;background-position:62% 28%!important;background-size:860px auto!important;filter:brightness(1.46) contrast(1.06) drop-shadow(0 0 15px rgba(236,248,255,.18))!important;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.26) 8%,rgba(0,0,0,.74) 28%,#000 52%,#000 100%)!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.26) 8%,rgba(0,0,0,.74) 28%,#000 52%,#000 100%)!important}
  .cru-story-section::before,.cru-company-section::before{left:-55%!important;right:-55%!important;top:-20px!important;height:650px!important;background-size:1040px auto!important;opacity:.28!important}
  .cru-story-section::after,.cru-company-section::after{height:560px!important;bottom:-190px!important;opacity:.72!important}
}
@media(prefers-reduced-motion:reduce){
  .cru-story-hero::before,.cru-company-hero::before,.cru-story-section::before,.cru-company-section::before,.cru-story-section::after,.cru-company-section::after,.story-hero.cru-brand-story-luxury .cru-story-frame::after{animation:none!important}
}