/** Shopify CDN: Minification failed

Line 123:0 All "@import" rules must come first

**/
.ci-about{
  --void:#0E0D11; --panel:#17151B; --bone:#EDE8DF; --stone:#9C968C;
  --violet:#8A6FFF; --bronze:#C08A4E;
  background:var(--void); color:var(--bone);
  font-family:'Inter',sans-serif;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  z-index:0;
  width:100%;
  margin:0;
  padding:0;
}
.ci-about *{box-sizing:border-box;}

/* ---------- HERO ---------- */
.ci-hero{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  min-height:80vh; padding:0 6vw; gap:40px; flex-wrap:wrap;
}
.ci-hero__text{ max-width:620px; z-index:2; }
.ci-hero__title{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2.2rem,4.6vw,3.8rem);
  line-height:1.1; margin:0 0 24px; color:var(--bone);
}
.ci-hero__sub{ font-size:1.05rem; line-height:1.7; color:var(--stone); max-width:480px; }

.ci-hero__illusion{
  position:relative; width:min(40vw,440px); aspect-ratio:1/1; flex-shrink:0;
}
.ci-rings{
  position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.7;
}
.ci-ring{ animation:ci-pulse 5s ease-in-out infinite; transform-origin:300px 300px; }
@keyframes ci-pulse{ 0%,100%{ stroke-opacity:.15; } 50%{ stroke-opacity:.6; } }
.ci-hero__img{
  position:relative; z-index:2; width:100%; height:100%;
  border-radius:20px; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(138,111,255,.35);
  border:1px solid rgba(255,255,255,.08);
}
.ci-hero__img img,
.ci-hero__img .ci-pillar__placeholder{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- REVEAL ---------- */
.ci-reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s ease, transform .9s ease; }
.ci-reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- BODY: full width, no outer margin/padding ---------- */
.ci-body{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}
.ci-para{
  width:100%;
  max-width:780px;
  margin:0 auto 36px auto;
  padding:0 6vw;
  font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.75; color:var(--stone);
}
.ci-quote{
  width:100%;
  max-width:900px;
  margin:8vh auto;
  padding:0 6vw;
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.4;
  color:var(--bronze); border:none; text-align:left;
}

/* ---------- FEATURES ROW: 3 cards, image top + content below, full width ---------- */
.ci-features-row{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:10vh 0;
}
.ci-feature-card{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border-right:1px solid rgba(255,255,255,.06);
}
.ci-feature-card:last-child{ border-right:none; }
.ci-feature-card__img{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
}
.ci-feature-card__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.ci-feature-card:hover .ci-feature-card__img img{ transform:scale(1.06); }
.ci-feature-card__text{
  padding:28px 32px;
  font-size:.98rem; line-height:1.75; color:var(--stone); margin:0;
  flex:1;
}
.ci-pillar__placeholder{ width:100%; height:100%; }
.ci-placeholder--violet{ background:linear-gradient(135deg,#8A6FFF,#3a2e6e); }
.ci-placeholder--bronze{ background:linear-gradient(135deg,#C08A4E,#5c3c1c); }
.ci-placeholder--mix{ background:linear-gradient(135deg,#8A6FFF,#C08A4E); }

/* ---------- CLOSING ---------- */
.ci-closing{
  text-align:center; padding:10vh 6vw 14vh; max-width:760px; margin:0 auto;
}
.ci-closing__quote{
  font-family:'Fraunces',serif; font-size:clamp(1.4rem,2.8vw,2rem); line-height:1.5;
  color:var(--bone);
}

/* ---------- FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Inter:wght@400;500&family=Space+Mono&display=swap');

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .ci-features-row{ grid-template-columns:1fr; }
  .ci-feature-card{ border-right:none; border-bottom:1px solid rgba(255,255,255,.06); }
  .ci-hero{ flex-direction:column; padding:10vh 6vw; text-align:left; }
  .ci-hero__illusion{ width:100%; max-width:420px; margin:0 auto; }
}
@media (prefers-reduced-motion:reduce){
  .ci-ring{ animation:none; }
  .ci-reveal{ transition:none; opacity:1; transform:none; }
}

/* ---------- BODY: boxed container ---------- */
.ci-body{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 6vw;
}
.ci-para{
  width:100%;
  max-width:780px;
  margin:0 0 36px 0;
  padding:0;
  font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.75; color:var(--stone);
}
.ci-quote{
  width:100%;
  max-width:900px;
  margin:8vh 0;
  padding:0;
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.4;
  color:var(--bronze); border:none; text-align:left;
}

/* ---------- FEATURES ROW: 3 boxed cards, 20px gap, bordered ---------- */
.ci-features-row{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:10vh 0;
}
.ci-feature-card{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.ci-feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px -20px rgba(138,111,255,.25);
  border-color:rgba(138,111,255,.3);
}
.ci-feature-card__img{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
}
.ci-feature-card__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.ci-feature-card:hover .ci-feature-card__img img{ transform:scale(1.06); }
.ci-feature-card__text{
  padding:24px 24px 28px;
  font-size:.96rem; line-height:1.7; color:var(--stone); margin:0;
  flex:1;
}
/* ---------- BODY: full width, aligned with hero ---------- */
.ci-body{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 6vw;
}
.ci-para{
  width:100%;
  max-width:780px;
  margin:0 0 36px 0;
  padding:0;
  font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.75; color:var(--stone);
}
.ci-quote{
  width:100%;
  max-width:900px;
  margin:8vh 0;
  padding:0;
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.4;
  color:var(--bronze); border:none; text-align:left;
}

/* ---------- FEATURES ROW: 3 boxed cards in one row, aligned with hero, 20px gap ---------- */
.ci-features-row{
  width:100%;
  max-width:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:10vh 0;
}
.ci-feature-card{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.ci-feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px -20px rgba(138,111,255,.25);
  border-color:rgba(138,111,255,.3);
}
.ci-feature-card__img{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
}
.ci-feature-card__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.ci-feature-card:hover .ci-feature-card__img img{ transform:scale(1.06); }
.ci-feature-card__text{
  padding:24px 24px 28px;
  font-size:.96rem; line-height:1.7; color:var(--stone); margin:0;
  flex:1;
}


@media (max-width:600px){
  .ci-body{
    padding:0 5vw;
  }
  .ci-features-row{
    grid-template-columns:1fr;
    gap:24px;
    margin:8vh 0;
    width:100%;
  }
  .ci-feature-card{
    width:100%;
  }
  .ci-feature-card__img{
    aspect-ratio:16/10;
  }
  .ci-feature-card__text{
    font-size:1rem;
    padding:20px 20px 24px;
  }
}
