/** Shopify CDN: Minification failed

Line 465:1 Unexpected "*"

**/
.about-page {
  background: linear-gradient(180deg, rgba(8, 4, 18, 0.98) 0%, rgba(12, 8, 26, 1) 18%, rgba(17, 11, 34, 0.98) 50%, rgba(8, 4, 18, 1) 100%);
  color: var(--home-white);
}

.about-page section {
  position: relative;
  overflow: hidden;
}

.about-page__hero {
  padding-top: 116px;
  padding-bottom: 88px;
  background:
    radial-gradient(circle at 78% 8%, rgba(222, 194, 122, 0.14), transparent 28%),
    radial-gradient(circle at 16% 78%, rgba(94, 67, 184, 0.16), transparent 28%);
}

.about-page__hero::before,
.about-page__story::before,
.about-page__journey::before,
.about-page__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-page__hero::before {
  background: radial-gradient(circle at 50% 0%, rgba(222, 194, 122, 0.08), transparent 48%);
}

.about-page__hero-inner,
.about-page__story-grid,
.about-page__journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.about-page__hero-copy {
  max-width: 640px;
}

.about-page__eyebrow,
.about-page__section-label {
  margin: 0 0 18px;
  color: var(--home-gold);
  font-size: var(--home-font-size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

.about-page__title,
.about-page__section-title {
  margin: 0;
  font-family: var(--home-font-sans);
  color: var(--home-white);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.about-page__title {
  max-width: 9ch;
  font-size: clamp(4.8rem, 9vw, 8.8rem);
}

.about-page__section-title {
  font-size: clamp(3rem, 4vw, 5.2rem);
  max-width: 13ch;
}

.about-page__lede {
  margin: 24px 0 0;
  color: var(--home-gold-light);
  font-size: var(--home-font-size-lg);
  line-height: 1.55;
  max-width: 34ch;
}

.about-page__intro,
.about-page__story-copy p,
.about-page__journey-intro p,
.about-page__cta-copy p {
  color: var(--home-text-soft);
  font-size: var(--home-font-size-base);
  line-height: 1.78;
}

.about-page__intro {
  margin: 24px 0 0;
  max-width: var(--home-max-copy);
}

.about-page__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.about-page__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}

.about-page__fact-card,
.about-page__principle-card,
.about-page__journey-step,
.about-page__quote-card,
.about-page__deep-panel,
.about-page__cta-panel {
  border: 1px solid rgba(222, 194, 122, 0.14);
  border-radius: var(--home-radius-md);
  background: linear-gradient(180deg, rgba(18, 12, 36, 0.84) 0%, rgba(11, 8, 24, 0.96) 100%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.about-page__fact-card {
  padding: 18px;
}

.about-page__fact-card span,
.about-page__image-caption span {
  display: block;
  margin-bottom: 8px;
  color: var(--home-gold);
  font-size: var(--home-font-size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-page__fact-card strong,
.about-page__image-caption strong {
  display: block;
  color: var(--home-white);
  font-size: var(--home-font-size-base);
  font-weight: 500;
  line-height: 1.45;
}

.about-page__image-frame {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--home-radius-lg) + 6px);
  border: 1px solid rgba(222, 194, 122, 0.16);
  background: linear-gradient(180deg, rgba(19, 12, 39, 0.9) 0%, rgba(11, 7, 22, 0.96) 100%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.about-page__image-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(222, 194, 122, 0.12) 0%, transparent 30%),
    linear-gradient(180deg, transparent 50%, rgba(9, 6, 20, 0.7) 100%);
  pointer-events: none;
  z-index: 1;
}

.about-page__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.about-page__image-frame--hero .about-page__image {
  aspect-ratio: 14 / 9.8;
}

.about-page__image-frame--secondary .about-page__image {
  aspect-ratio: 11 / 13.2;
}

.about-page__image-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 14px 16px;
  border-radius: var(--home-radius-sm);
  border: 1px solid rgba(222, 194, 122, 0.14);
  background: rgba(10, 7, 22, 0.58);
  backdrop-filter: blur(16px);
}

.about-page__story {
  padding: 88px 0;
  background: linear-gradient(180deg, rgba(11, 7, 23, 0.98) 0%, rgba(16, 10, 34, 0.98) 100%);
}

.about-page__story::before {
  background: radial-gradient(circle at 15% 50%, rgba(222, 194, 122, 0.08), transparent 32%);
}

.about-page__story-copy p + p {
  margin-top: 18px;
}

.about-page__quote-card {
  margin-top: 28px;
  padding: 26px;
}

.about-page__quote {
  margin: 0;
  color: var(--home-white);
  font-family: var(--home-font-serif);
  font-size: 2.1rem;
  line-height: 1.65;
  font-style: italic;
}

.about-page__quote-meta {
  display: inline-flex;
  margin-top: 18px;
  color: var(--home-gold-light);
  font-size: var(--home-font-size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-page__principles {
  padding: 88px 0;
}

.about-page__section-head {
  margin-bottom: 42px;
}

.about-page__section-head--centered {
  text-align: center;
}

.about-page__section-head--centered .about-page__section-title {
  margin: 0 auto;
}

.about-page__principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.about-page__principle-card,
.about-page__journey-step {
  padding: 28px;
}

.about-page__card-index,
.about-page__journey-step-index {
  display: inline-flex;
  margin-bottom: 20px;
  color: var(--home-gold-light);
  font-size: var(--home-font-size-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about-page__principle-card h3,
.about-page__journey-step h3 {
  margin: 0 0 12px;
  color: var(--home-white);
  font-size: var(--home-font-size-xl);
  line-height: 1.2;
}

.about-page__principle-card p,
.about-page__journey-step p {
  margin: 0;
  color: var(--home-text-soft);
  font-size: var(--home-font-size-base);
  line-height: 1.72;
}

.about-page__journey {
  padding: 88px 0;
  background: linear-gradient(180deg, rgba(15, 10, 32, 0.98) 0%, rgba(8, 4, 18, 0.98) 100%);
}

.about-page__journey::before {
  background: radial-gradient(circle at 85% 22%, rgba(94, 67, 184, 0.14), transparent 32%);
}

.about-page__journey-intro {
  max-width: 520px;
}

.about-page__journey-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.about-page__deep {
  padding: 0 0 88px;
}

.about-page__deep-panel {
  padding: 24px 26px;
}

.about-page__deep-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.about-page__deep-panel summary::-webkit-details-marker {
  display: none;
}

.about-page__deep-panel summary span {
  color: var(--home-gold);
  font-size: var(--home-font-size-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about-page__deep-panel summary strong {
  color: var(--home-white);
  font-size: var(--home-font-size-lg);
  line-height: 1.4;
  font-weight: 500;
}

.about-page__deep-content {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(222, 194, 122, 0.12);
  color: var(--home-text-soft);
}

.about-page__deep-content h2,
.about-page__deep-content h3,
.about-page__deep-content h4,
.about-page__deep-content strong {
  color: var(--home-white);
}

.about-page__deep-content a {
  color: var(--home-gold-light);
}

.about-page__cta {
  padding: 0 0 116px;
}

.about-page__cta::before {
  background: radial-gradient(circle at 50% 0%, rgba(222, 194, 122, 0.12), transparent 52%);
}

.about-page__cta-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 34px;
}

.about-page__cta-copy p {
  margin: 18px 0 0;
  max-width: 58ch;
}

.about-page__cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .about-page__hero-inner,
  .about-page__story-grid,
  .about-page__journey-grid,
  .about-page__cta-panel {
    grid-template-columns: 1fr;
  }

  .about-page__hero-copy,
  .about-page__journey-intro {
    max-width: none;
  }

  .about-page__principles-grid,
  .about-page__facts {
    grid-template-columns: 1fr;
  }

  .about-page__cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .about-page__hero {
    padding-top: 94px;
    padding-bottom: 72px;
  }

  .about-page__story,
  .about-page__principles,
  .about-page__journey,
  .about-page__deep,
  .about-page__cta {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .about-page__journey-steps {
    grid-template-columns: 1fr;
  }

  .about-page__deep-panel summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .about-page__actions,
  .about-page__cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .about-page__actions .btn-primary,
  .about-page__actions .btn-ghost,
  .about-page__cta-actions .btn-primary,
  .about-page__cta-actions .btn-ghost {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .about-page__image-caption,
  .about-page__deep-panel,
  .about-page__quote-card,
  .about-page__principle-card,
  .about-page__journey-step,
  .about-page__cta-panel {
    padding: 22px;
  }
}
*** Add File: c:\development\assets\about-hero-pyramid-flow.svg
<svg width="1400" height="980" viewBox="0 0 1400 980" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="1400" height="980" rx="44" fill="url(#bg)"/>
  <g filter="url(#blurLarge)" opacity="0.66">
    <ellipse cx="1112" cy="166" rx="252" ry="186" fill="#D9B65E"/>
  </g>
  <g filter="url(#blurLarge)" opacity="0.56">
    <ellipse cx="244" cy="782" rx="308" ry="220" fill="#4B2F8C"/>
  </g>
  <g opacity="0.4">
    <path d="M194 724C328 604 468 546 614 548" stroke="url(#flowLeft)" stroke-width="3" stroke-linecap="round"/>
    <path d="M1206 734C1066 596 924 536 778 536" stroke="url(#flowRight)" stroke-width="3" stroke-linecap="round"/>
    <path d="M348 224C486 316 584 412 648 514" stroke="url(#arcLeft)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="1 16"/>
    <path d="M1052 202C914 308 820 406 754 514" stroke="url(#arcRight)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="1 16"/>
  </g>
  <g opacity="0.84">
    <circle cx="700" cy="478" r="248" stroke="url(#ringOuter)" stroke-width="2"/>
    <circle cx="700" cy="478" r="184" stroke="url(#ringMid)" stroke-width="1.5"/>
    <circle cx="700" cy="478" r="124" stroke="url(#ringInner)" stroke-width="1.5"/>
  </g>
  <g filter="url(#pyramidGlow)">
    <path d="M700 246L886 658H514L700 246Z" fill="url(#pyramidFill)"/>
  </g>
  <path d="M700 246L886 658H514L700 246Z" stroke="url(#pyramidEdge)" stroke-width="2.5"/>
  <path d="M700 246V658" stroke="url(#centerLine)" stroke-width="1.5"/>
  <path d="M604 456H796" stroke="url(#crossLine)" stroke-width="1.5" stroke-opacity="0.64"/>
  <g filter="url(#beamGlow)">
    <path d="M700 112V244" stroke="url(#beam)" stroke-width="10" stroke-linecap="round"/>
  </g>
  <g opacity="0.92">
    <path d="M584 596C642 560 694 552 740 574C786 596 836 586 892 544" stroke="url(#ribbonOne)" stroke-width="3" stroke-linecap="round"/>
    <path d="M544 518C600 484 654 476 706 490C760 504 816 496 872 456" stroke="url(#ribbonTwo)" stroke-width="2.5" stroke-linecap="round"/>
    <path d="M622 360C662 390 702 400 740 388C780 376 822 386 862 422" stroke="url(#ribbonThree)" stroke-width="2.5" stroke-linecap="round"/>
  </g>
  <rect x="62" y="62" width="1276" height="856" rx="34" stroke="url(#frameSoft)" stroke-opacity="0.38"/>
  <defs>
    <filter id="blurLarge" x="-220" y="-220" width="1840" height="1500" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feGaussianBlur stdDeviation="110" result="effect1_foregroundBlur"/>
    </filter>
    <filter id="pyramidGlow" x="430" y="182" width="540" height="556" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur"/>
    </filter>
    <filter id="beamGlow" x="630" y="42" width="140" height="272" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feGaussianBlur stdDeviation="30" result="effect1_foregroundBlur"/>
    </filter>
    <linearGradient id="bg" x1="112" y1="42" x2="1228" y2="922" gradientUnits="userSpaceOnUse">
      <stop stop-color="#120A24"/>
      <stop offset="0.42" stop-color="#090515"/>
      <stop offset="0.72" stop-color="#171038"/>
      <stop offset="1" stop-color="#0A0612"/>
    </linearGradient>
    <linearGradient id="flowLeft" x1="194" y1="724" x2="614" y2="548" gradientUnits="userSpaceOnUse">
      <stop stop-color="#5E43B8" stop-opacity="0"/>
      <stop offset="0.48" stop-color="#DEC27A" stop-opacity="0.92"/>
      <stop offset="1" stop-color="#FFF7E1" stop-opacity="0.24"/>
    </linearGradient>
    <linearGradient id="flowRight" x1="1206" y1="734" x2="778" y2="536" gradientUnits="userSpaceOnUse">
      <stop stop-color="#5E43B8" stop-opacity="0"/>
      <stop offset="0.48" stop-color="#DEC27A" stop-opacity="0.92"/>
      <stop offset="1" stop-color="#FFF7E1" stop-opacity="0.24"/>
    </linearGradient>
    <linearGradient id="arcLeft" x1="348" y1="224" x2="648" y2="514" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFF7E1" stop-opacity="0.42"/>
      <stop offset="1" stop-color="#5E43B8" stop-opacity="0.1"/>
    </linearGradient>
    <linearGradient id="arcRight" x1="1052" y1="202" x2="754" y2="514" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFF7E1" stop-opacity="0.42"/>
      <stop offset="1" stop-color="#5E43B8" stop-opacity="0.1"/>
    </linearGradient>
    <linearGradient id="ringOuter" x1="452" y1="230" x2="948" y2="726" gradientUnits="userSpaceOnUse">
      <stop stop-color="#DEC27A" stop-opacity="0.72"/>
      <stop offset="1" stop-color="#5E43B8" stop-opacity="0.28"/>
    </linearGradient>
    <linearGradient id="ringMid" x1="516" y1="294" x2="884" y2="662" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFF7E1" stop-opacity="0.84"/>
      <stop offset="1" stop-color="#5E43B8" stop-opacity="0.2"/>
    </linearGradient>
    <linearGradient id="ringInner" x1="576" y1="354" x2="824" y2="602" gradientUnits="userSpaceOnUse">
      <stop stop-color="#DEC27A"/>
      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.18"/>
    </linearGradient>
    <linearGradient id="pyramidFill" x1="700" y1="246" x2="700" y2="658" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFF7E1" stop-opacity="0.86"/>
      <stop offset="0.26" stop-color="#DEC27A" stop-opacity="0.54"/>
      <stop offset="0.68" stop-color="#392768" stop-opacity="0.3"/>
      <stop offset="1" stop-color="#120A24" stop-opacity="0.16"/>
    </linearGradient>
    <linearGradient id="pyramidEdge" x1="514" y1="658" x2="886" y2="246" gradientUnits="userSpaceOnUse">
      <stop stop-color="#DEC27A" stop-opacity="0.62"/>
      <stop offset="0.5" stop-color="#FFF7E1" stop-opacity="0.96"/>
      <stop offset="1" stop-color="#DEC27A" stop-opacity="0.62"/>
    </linearGradient>
    <linearGradient id="centerLine" x1="700.5" y1="246" x2="700.5" y2="658" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFF7E1"/>
      <stop offset="1" stop-color="#DEC27A" stop-opacity="0.12"/>
    </linearGradient>
    <linearGradient id="crossLine" x1="604" y1="456.5" x2="796" y2="456.5" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFF7E1" stop-opacity="0"/>
      <stop offset="0.5" stop-color="#FFF7E1" stop-opacity="0.72"/>
      <stop offset="1" stop-color="#FFF7E1" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="beam" x1="700.5" y1="112" x2="700.5" y2="244" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFF7E1"/>
      <stop offset="1" stop-color="#DEC27A" stop-opacity="0.72"/>
    </linearGradient>
    <linearGradient id="ribbonOne" x1="584" y1="596" x2="892" y2="544" gradientUnits="userSpaceOnUse">
      <stop stop-color="#DEC27A" stop-opacity="0.18"/>
      <stop offset="0.5" stop-color="#FFF7E1"/>
      <stop offset="1" stop-color="#DEC27A" stop-opacity="0.2"/>
    </linearGradient>
    <linearGradient id="ribbonTwo" x1="544" y1="518" x2="872" y2="456" gradientUnits="userSpaceOnUse">
      <stop stop-color="#5E43B8" stop-opacity="0.14"/>
      <stop offset="0.5" stop-color="#DEC27A"/>
      <stop offset="1" stop-color="#FFF7E1" stop-opacity="0.2"/>
    </linearGradient>
    <linearGradient id="ribbonThree" x1="622" y1="360" x2="862" y2="422" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFF7E1" stop-opacity="0.18"/>
      <stop offset="0.5" stop-color="#DEC27A"/>
      <stop offset="1" stop-color="#5E43B8" stop-opacity="0.22"/>
    </linearGradient>
    <linearGradient id="frameSoft" x1="62" y1="62" x2="1338" y2="918" gradientUnits="userSpaceOnUse">
      <stop stop-color="#DEC27A"/>
      <stop offset="1" stop-color="#DEC27A" stop-opacity="0.08"/>
    </linearGradient>
  </defs>
</svg>