/* =========================================================
   BELLA — INTRODUCTION TO BELLA
   Brand system: Plus Jakarta Sans + Parisienne
   White / Cool Mist / Charcoal / Sage
   ========================================================= */
.bella-introduction{
  position:relative;
  overflow:hidden;
  background:#FFFFFF;
  color:#191919;
  border-top:1px solid rgba(217,221,219,.58);
  padding:112px 0 120px;
}
.bella-introduction::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(113,128,120,.22),transparent);
}
.bella-introduction__grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(620px,1.18fr);
  gap:76px;
  align-items:stretch;
}
.bella-introduction__content{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:22px 0 8px;
}
.bella-introduction__copy{max-width:660px}
.bella-introduction__eyebrow{
  font-family:var(--font-script,"Parisienne",cursive);
  font-size:28px;
  line-height:1.2;
  font-weight:400;
  color:#718078;
  margin:0 0 20px;
}
.bella-introduction__rule{
  width:76px;
  height:1px;
  background:#718078;
  margin:0 0 34px;
  transform-origin:left center;
}
.bella-introduction h2{
  font-family:var(--font-main,"Plus Jakarta Sans",sans-serif);
  font-size:40px;
  line-height:1.16;
  font-weight:600;
  letter-spacing:-.035em;
  color:#191919;
  margin:0;
  max-width:620px;
  text-wrap:balance;
}
.bella-introduction__meta{
  margin:18px 0 0;
  font-family:var(--font-main,"Plus Jakarta Sans",sans-serif);
  font-size:13px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#46534D;
}
.bella-introduction__lead{
  margin:28px 0 0;
  max-width:650px;
  font-family:var(--font-main,"Plus Jakarta Sans",sans-serif);
  font-size:15px;
  line-height:1.78;
  font-weight:400;
  letter-spacing:0;
  color:#5F6362;
}
.bella-introduction__lead p{
  margin:0;
  font:inherit;
  color:inherit;
}
.bella-introduction__lead p + p{
  margin-top:14px;
}
.bella-introduction__cta{
  display:inline-flex;
  align-items:center;
  gap:22px;
  margin-top:36px;
  min-height:48px;
  padding:0 0 8px;
  border-bottom:1px solid #718078;
  font-family:var(--font-main,"Plus Jakarta Sans",sans-serif);
  font-size:15px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#191919;
  transition:color .22s ease,border-color .22s ease,gap .22s ease;
}
.bella-introduction__cta svg{
  width:26px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s ease;
}
.bella-introduction__cta:hover{color:#46534D;border-color:#46534D;gap:27px}
.bella-introduction__cta:hover svg{transform:translateX(4px)}

.bella-introduction__pillars{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid #D9DDDB;
  margin-top:58px;
  max-width:660px;
}
.bella-introduction__pillar{
  min-width:0;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:28px 26px 26px 0;
  border-bottom:1px solid #D9DDDB;
}
.bella-introduction__pillar:nth-child(odd){border-right:1px solid #D9DDDB;padding-right:28px}
.bella-introduction__pillar:nth-child(even){padding-left:28px}
.bella-introduction__icon{
  width:48px;height:48px;
  display:grid;place-items:center;
  border:1px solid #D9DDDB;
  color:#46534D;
  background:#FFFFFF;
}
.bella-introduction__icon svg{
  width:25px;height:25px;
  fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;
}
.bella-introduction__pillar h3{
  margin:1px 0 7px;
  font-family:var(--font-main,"Plus Jakarta Sans",sans-serif);
  font-size:14px;
  line-height:1.45;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#191919;
}
.bella-introduction__pillar p{
  margin:0;
  font-family:var(--font-main,"Plus Jakarta Sans",sans-serif);
  font-size:14px;
  line-height:1.6;
  font-weight:400;
  color:#5F6362;
}

.bella-introduction__gallery{
  min-width:0;
  min-height:720px;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(220px,.82fr);
  grid-template-rows:1.08fr .92fr;
  gap:10px;
  background:#F4F5F5;
  padding:10px;
  align-self:stretch;
}
.bella-introduction__image{
  position:relative;
  overflow:hidden;
  margin:0;
  background:#F4F5F5;
}
.bella-introduction__image::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(25,25,25,.025);
}
.bella-introduction__image img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.012);
  transition:transform 1.05s cubic-bezier(.2,.65,.25,1),filter .45s ease;
  filter:saturate(.88) contrast(.99);
}
.bella-introduction__image--1 img{object-position:50% 52%}
.bella-introduction__image--2 img{object-position:50% 48%}
.bella-introduction__image--3 img{object-position:50% 49%}
.bella-introduction__image--4 img{object-position:50% 50%}
.bella-introduction__image:hover img{transform:scale(1.045);filter:saturate(.96) contrast(1)}

/* Reveal behaviour: JS only adds the entering state after enhancement. */
.bella-introduction.is-enhanced [data-intro-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .72s ease,transform .82s cubic-bezier(.2,.68,.22,1);
}
.bella-introduction.is-enhanced .bella-introduction__image[data-intro-reveal]{
  transform:translateY(18px);
  clip-path:inset(8% 0 0 0);
  transition:opacity .72s ease,transform .9s cubic-bezier(.2,.68,.22,1),clip-path .95s cubic-bezier(.2,.68,.22,1);
}
.bella-introduction.is-enhanced.is-visible [data-intro-reveal]{opacity:1;transform:none}
.bella-introduction.is-enhanced.is-visible .bella-introduction__image[data-intro-reveal]{clip-path:inset(0 0 0 0)}
.bella-introduction.is-enhanced.is-visible [data-intro-reveal="2"]{transition-delay:.08s}
.bella-introduction.is-enhanced.is-visible [data-intro-reveal="3"]{transition-delay:.14s}
.bella-introduction.is-enhanced.is-visible [data-intro-reveal="4"]{transition-delay:.20s}
.bella-introduction.is-enhanced.is-visible [data-intro-reveal="5"]{transition-delay:.26s}

@media(max-width:1180px){
  .bella-introduction{padding:92px 0 98px}
  .bella-introduction__grid{grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);gap:48px}
  .bella-introduction__eyebrow{font-size:26px}
  .bella-introduction h2{font-size:36px}
  .bella-introduction__lead{font-size:15px;line-height:1.76}
  .bella-introduction__gallery{min-height:640px}
  .bella-introduction__pillar{grid-template-columns:46px minmax(0,1fr);gap:13px}
  .bella-introduction__icon{width:42px;height:42px}
}

@media(max-width:900px){
  .bella-introduction{padding:82px 0 88px}
  .bella-introduction__grid{grid-template-columns:1fr;gap:54px}
  .bella-introduction__content{padding:0}
  .bella-introduction__copy{max-width:760px}
  .bella-introduction h2{max-width:700px}
  .bella-introduction__lead{max-width:740px}
  .bella-introduction__pillars{max-width:none;margin-top:48px}
  .bella-introduction__gallery{min-height:650px;grid-template-columns:1.22fr .78fr}
}

@media(max-width:640px){
  .bella-introduction{padding:68px 0 72px}
  .bella-introduction__grid{gap:42px}
  .bella-introduction__eyebrow{font-size:24px;margin-bottom:16px}
  .bella-introduction__rule{width:58px;margin-bottom:26px}
  .bella-introduction h2{font-size:30px;line-height:1.2;letter-spacing:-.027em}
  .bella-introduction__meta{font-size:13px;letter-spacing:.1em;margin-top:15px}
  .bella-introduction__lead{font-size:15px;line-height:1.74;margin-top:22px}
  .bella-introduction__cta{font-size:15px;margin-top:28px;gap:17px}
  .bella-introduction__pillars{grid-template-columns:1fr;margin-top:40px}
  .bella-introduction__pillar,
  .bella-introduction__pillar:nth-child(odd),
  .bella-introduction__pillar:nth-child(even){
    border-right:0;
    padding:20px 0;
    grid-template-columns:46px minmax(0,1fr);
  }
  .bella-introduction__pillar h3{font-size:13px}
  .bella-introduction__pillar p{font-size:14px}
  .bella-introduction__gallery{
    min-height:0;
    grid-template-columns:1fr 1fr;
    grid-template-rows:280px 250px;
    gap:7px;
    padding:7px;
  }
}

@media(max-width:420px){
  .bella-introduction__gallery{grid-template-rows:245px 220px}
}

@media(prefers-reduced-motion:reduce){
  .bella-introduction *,
  .bella-introduction *::before,
  .bella-introduction *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .bella-introduction.is-enhanced [data-intro-reveal],
  .bella-introduction.is-enhanced .bella-introduction__image[data-intro-reveal]{opacity:1;transform:none;clip-path:none}
}