/** Shopify CDN: Minification failed

Line 542:21 Expected identifier but found whitespace
Line 542:23 Unexpected "{"
Line 542:32 Expected ":"
Line 543:25 Expected identifier but found whitespace
Line 543:27 Unexpected "{"
Line 543:36 Expected ":"
Line 545:15 Expected identifier but found whitespace
Line 545:17 Unexpected "{"
Line 545:26 Expected ":"
Line 546:19 Expected identifier but found whitespace
... and 8 more hidden warnings

**/
/**
 * Luxury Purpose Section Styling
 * Premium design with elegant animations and refined typography
 *
 * Table of Contents:
 * 1. Base Section & Container Styles
 * 2. Typography & Text Styles
 * 3. Grid & Layout
 * 4. Icon Styling & Animations
 * 5. CTA Button Styling
 * 6. Animation Keyframes
 * 7. Hover Effects & Interactions
 * 8. Modern Typography Settings
 * 9. Responsive Styles
 * 10. Custom Properties & Theming
 */

/* ================ 1. Base Section & Container Styles ================ */
.purpose-section {
  position: relative;
  padding: 7rem 2rem;
  background-color: var(--background-color, #ffffff);
  color: var(--text-color, #333333);
  overflow: hidden;
  font-family: var(--font-primary, 'Nunito Sans', 'Helvetica Neue', sans-serif);
}

.purpose-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  pointer-events: none;
  z-index: 1;
}

.purpose-container {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ================ 2. Typography & Text Styles ================ */
.purpose-small-heading {
  text-align: left;
  align-self: flex-start;
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.journey-title {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-color, #575757);
  position: relative;
  padding-left: 3rem;
  display: inline-block;
}

.journey-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2.5rem;
  height: 1px;
  background-color: var(--text-color, #575757);
  transform: translateY(-50%);
}

/* Top Feature (Global Community) */
.purpose-top-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.purpose-top-title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 1.5rem 0 0.5rem;
  color: var(--text-color, #333333);
}

.purpose-top-description {
  font-size: 0.95rem;
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.85);
}

/* Main Heading */
.purpose-header {
  text-align: center;
  margin-bottom: 5rem;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  max-width: 800px;
}

.purpose-heading {
  font-size: 3.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 1.25rem;
  line-height: 1.2;
  font-family: var(--font-display, 'Nunito Sans', 'Helvetica Neue', sans-serif);
  color: var(--text-color, #333333);
}

.purpose-heading-accent {
  color: #9a8866;
  font-weight: 400;
}

.purpose-subtitle {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin: 1rem 0 0;
  line-height: 1.6;
  color: var(--text-color, #575757);
}

/* Item Titles and Descriptions */
.purpose-title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 1.5rem 0 0.5rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.6s ease, transform 0.6s ease, color 0.3s ease;
  font-family: var(--font-display, 'Nunito Sans', 'Helvetica Neue', sans-serif);
  color: var(--text-color, #333333);
}

.purpose-description {
  font-size: 0.95rem;
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
  max-width: 18rem;
  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.85);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: block;
  text-align: center;
}

/* ================ 3. Grid & Layout ================ */
.purpose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  width: 100%;
  margin-bottom: 5rem;
}

.purpose-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  opacity: 0;
  transform: translateY(2rem);
}

/* ================ 4. Icon Styling & Animations ================ */
.purpose-icon-wrapper {
  position: relative;
  width: 7rem;
  height: 7rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purpose-icon-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(var(--text-color-rgb, 51, 51, 51), 0.1);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.8s ease;
}

.purpose-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: rgb(248, 248, 248);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s, 
              opacity 0.8s ease 0.1s,
              background-color 0.3s ease;
}

.purpose-icon {
  width: 3rem;
  height: 3rem;
  stroke: #827868;
  stroke-width: 1.5;
  fill: none;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.6s ease 0.2s, 
              transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s,
              stroke 0.3s ease;
}

/* Icon-specific styling */
.icon-marker {
  transform-origin: bottom center;
}

.icon-shirt {
  transform-origin: center;
}

.icon-book {
  transform-origin: center;
}

.icon-globe {
  transform-origin: center;
}

/* Icon animations */
.reveal-visible .purpose-icon-border {
  transform: scale(1);
  opacity: 1;
}

.reveal-visible .purpose-icon-container {
  transform: scale(1);
  opacity: 1;
}

.reveal-visible .purpose-icon {
  opacity: 1;
  transform: scale(1);
}

.reveal-visible .icon-marker {
  animation: floatGentle 6s infinite ease-in-out alternate;
}

.reveal-visible .icon-shirt {
  animation: pulse 5s infinite ease-in-out;
}

.reveal-visible .icon-book {
  animation: glow 5s infinite ease-in-out alternate;
}

.reveal-visible .icon-globe {
  animation: rotateGently 30s linear infinite;
}

/* ================ 5. CTA Button Styling ================ */
.purpose-cta-container {
  margin-top: 1rem;
  margin-bottom: 2rem;
  text-align: center;
  opacity: 0;
  transform: translateY(2rem);
}

.purpose-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2.25rem;
  background-color: transparent;
  color: var(--text-color, #333333);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.4s ease, transform 0.4s ease;
  position: relative;
}

.purpose-cta-text {
  position: relative;
  z-index: 1;
  transition: color 0.4s ease;
}

.purpose-cta-arrow {
  display: inline-flex;
  margin-left: 1rem;
  position: relative;
  z-index: 1;
  transition: transform 0.4s ease, color 0.4s ease;
}

/* ================ 6. Animation Keyframes ================ */
@keyframes floatGentle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.9; }
}

@keyframes glow {
  0% { 
    filter: drop-shadow(0 0 0 rgba(var(--accent-color-rgb, 154, 136, 102), 0)); 
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 8px rgba(var(--accent-color-rgb, 154, 136, 102), 0.4)); 
    transform: scale(1.08);
  }
  100% { 
    filter: drop-shadow(0 0 0 rgba(var(--accent-color-rgb, 154, 136, 102), 0)); 
    transform: scale(1);
  }
}

@keyframes rotateGently {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* New enhanced animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ================ 7. Hover Effects & Interactions ================ */
.purpose-item:hover .purpose-icon-container {
  background-color: #f5f5f5;
  transform: translateY(-5px) scale(1.05);
}

.purpose-item:hover .purpose-title {
  color: #827868;
}

.purpose-item:hover .purpose-icon {
  transform: scale(1.1);
  stroke: #827868;
}

.purpose-cta-button:hover .purpose-cta-text {
  color: #827868;
}

.purpose-cta-button:hover .purpose-cta-arrow {
  transform: translateX(5px);
  color: #827868;
}

/* ================ 8. Modern Typography Settings ================ */
@font-face {
  font-family: 'Nunito Sans';
  src: url('{{ "NunitoSans-Light.woff2" | asset_url }}') format('woff2'),
       url('{{ "NunitoSans-Light.woff" | asset_url }}') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('{{ "NunitoSans-Regular.woff2" | asset_url }}') format('woff2'),
       url('{{ "NunitoSans-Regular.woff" | asset_url }}') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('{{ "NunitoSans-Medium.woff2" | asset_url }}') format('woff2'),
       url('{{ "NunitoSans-Medium.woff" | asset_url }}') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('{{ "NunitoSans-SemiBold.woff2" | asset_url }}') format('woff2'),
       url('{{ "NunitoSans-SemiBold.woff" | asset_url }}') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ================ 9. Responsive Styles ================ */
@media screen and (max-width: 1280px) {
  .purpose-grid {
    gap: 3rem;
  }
  
  .purpose-heading {
    font-size: 3rem;
  }
}

@media screen and (max-width: 1024px) {
  .purpose-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2rem;
  }
  
  .purpose-heading {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 768px) {
  .purpose-section {
    padding: 5rem 1.5rem;
  }
  
  .purpose-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .purpose-header {
    margin-bottom: 3.5rem;
  }
  
  .purpose-heading {
    font-size: 2rem;
    letter-spacing: 0.05em;
  }
  
  .purpose-subtitle {
    font-size: 1.1rem;
  }
  
  .purpose-icon-wrapper {
    width: 6rem;
    height: 6rem;
  }
  
  .purpose-icon-container {
    width: 5rem;
    height: 5rem;
  }
  
  .purpose-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media screen and (max-width: 640px) {
  .purpose-grid {
    gap: 3.5rem;
  }
  
  .purpose-description {
    max-width: none;
  }
  
  .purpose-section {
    padding: 4rem 1.25rem;
  }
  
  .purpose-heading {
    font-size: 1.75rem;
  }
}

/* ================ 10. Custom Properties & Theming ================ */
:root {
  --font-primary: 'Nunito Sans', 'Helvetica Neue', sans-serif;
  --font-display: 'Nunito Sans', 'Helvetica Neue', sans-serif;
  
  --background-color: {{ section.settings.background_color | default: '#ffffff' }};
  --background-color-rgb: {{ section.settings.background_color | default: '#ffffff' | color_to_rgb | split: ',' | join: ', ' }};
  
  --text-color: {{ section.settings.text_color | default: '#333333' }};
  --text-color-rgb: {{ section.settings.text_color | default: '#333333' | color_to_rgb | split: ',' | join: ', ' }};
  
  --accent-color: {{ section.settings.accent_color | default: '#827868' }};
  --accent-color-rgb: {{ section.settings.accent_color | default: '#827868' | color_to_rgb | split: ',' | join: ', ' }};
}

/* Animation classes for reveal effects */
.reveal-element {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.reveal-visible .purpose-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.reveal-visible .purpose-description {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}