:root {
  --bg-hue : 40 ;
  --bg-saturation : 30% ;
  --bg-1 : hsl(var(--bg-hue) , var(--bg-saturation) , 96%) ;
  --bg-2 : hsl(var(--bg-hue) , var(--bg-saturation) , 98%) ;
  --bg-3 : hsl(var(--bg-hue) , var(--bg-saturation) , 99%) ;

  --text-hue : 0 ;
  --text-saturation : 0% ;
  --text-1 : hsl(var(--text-hue) , var(--text-saturation) , 10%) ;
  --text-2 : hsl(var(--text-hue) , var(--text-saturation) , 20%) ;
  --text-3 : hsl(var(--text-hue) , var(--text-saturation) , 40%) ;

  --accent-hue : 28 ;
  --accent-saturation : 92% ;
  --accent-1 : hsl(var(--accent-hue) , var(--accent-saturation) , 35%) ;
  --accent-2 : hsl(var(--accent-hue) , var(--accent-saturation) , 50%) ;
  --accent-3 : hsl(var(--accent-hue) , var(--accent-saturation) , 65%) ;

  --max-width : 900px ;
}

* { box-sizing : border-box ; }

html , body {
  margin : 0 ;
  padding : 0 ;
  background : var(--bg-2) ;
  background-image : radial-gradient( circle at 25% 25% , hsla(var(--accent-hue) , var(--accent-saturation) , 42% , 0.06) 1px , transparent 3px ) , radial-gradient( circle at 75% 75% , hsla(var(--accent-hue) , var(--accent-saturation) , 42% , 0.04) 1px , transparent 3px ) ;
  background-size : 28px 28px , 36px 36px ;
  background-position : 0 0 , 10px 12px ;
  color : var(--text-1) ;
  font-family : -apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , Helvetica , Arial , sans-serif , "Apple Color Emoji" , "Segoe UI Emoji" ;
  line-height : 1.6 ;
}

a {
  color : var(--accent-2) ;
  text-decoration : none ;
  border-bottom : 2px solid transparent ;
  font-weight : 600 ;
  transition : color 120ms ease , border-color 120ms ease ;
}

a:hover {
  color : var(--accent-3) ;
  border-bottom-color : var(--accent-3) ;
}

button {
  appearance : none ;
  -webkit-appearance : none ;
  background : var(--accent-2) ;
  color : #ffffff ;
  border : 1px solid var(--accent-2) ;
  padding : 8px 12px ;
  border-radius : 6px ;
  font : inherit ;
  cursor : pointer ;
  box-shadow : 0 1px 2px rgba(0 , 0 , 0 , 0.08) ;
}

button:hover {
  background : var(--accent-3) ;
  border-color : var(--accent-3) ;
}

/* Animations */
@keyframes glow-flicker { 
  0% { opacity : 0.8 ; } 
  50% { opacity : 1 ; } 
  100% { opacity : 0.8 ; } 
}

/* Layout Components */
.page-container-with-effects {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  min-height : 100vh ;
  width : 100% ;
  position : relative ;
  overflow-x : hidden ;
}

.page-container {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  height : 100vh ;
  width : 100% ;
}

.main-content-with-effects {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  gap : 24px ;
  width : 100% ;
  padding-top : 120px ;
  position : relative ;
  z-index : 10 ;
}

.main-content {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  gap : 24px ;
  width : 100% ;
  padding-top : 56px ;
}

/* Background Effects */
.glow-orange {
  position : fixed ;
  bottom : -50px ;
  left : 50% ;
  transform : translateX(-50%) ;
  width : 60% ;
  height : 80px ;
  background : radial-gradient(ellipse at center, rgba(255,140,90,0.18) 0%, transparent 70%) ;
  filter : blur(30px) ;
  z-index : 0 ;
  pointer-events : none ;
  animation : glow-flicker 3s ease-in-out infinite ;
}

.glow-red {
  position : fixed ;
  bottom : -30px ;
  left : 50% ;
  transform : translateX(-50%) ;
  width : 100% ;
  height : 120px ;
  background : radial-gradient(ellipse at center, rgba(255,69,0,0.25) 0%, rgba(255,99,71,0.15) 40%, transparent 70%) ;
  filter : blur(40px) ;
  z-index : 0 ;
  pointer-events : none ;
  animation : glow-flicker 4s ease-in-out infinite ;
  animation-delay : 0.5s ;
}

.particles-container {
  position : fixed ;
  bottom : 0 ;
  left : 0 ;
  width : 100% ;
  height : 45% ;
  z-index : 1 ;
  pointer-events : none ;
  background : linear-gradient(to top, rgba(255,237,213,0.2) 0%, transparent 100%) ;
}

/* Hero Section */
.hero-section {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  justify-content : center ;
  text-align : center ;
  gap : 12px ;
  width : calc(100% - 32px) ;
  max-width : 760px ;
  padding : 32px 20px ;
  border : 1px solid var(--accent-2) ;
  border-radius : 12px ;
  background : linear-gradient(180deg, var(--bg-3), var(--bg-1)) ;
  box-shadow : 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04) ;
}

.hero-logo-container {
  display : flex ;
  flex-direction : row ;
  align-items : center ;
  gap : 12px ;
}

.hero-logo-link {
  display : inline-flex ;
  align-items : center ;
  border-bottom : 0 ;
}

.hero-logo {
  width : 56px ;
  height : 56px ;
  object-fit : contain ;
}

.hero-title {
  margin : 0 ;
  font-size : 42px ;
  font-weight : 800 ;
  line-height : 1.2 ;
}

.hero-subtitle {
  margin : 0 ;
  color : var(--text-2) ;
  font-weight : 500 ;
  font-size : 20px ;
}

.hero-actions {
  display : flex ;
  flex-direction : row ;
  gap : 12px ;
  flex-wrap : wrap ;
  justify-content : center ;
  margin-top : 4px ;
}

.hero-learn-more {
  display : inline-flex ;
  align-items : center ;
  border-bottom : 0 ;
  padding : 8px 12px ;
  border-radius : 6px ;
  border : 1px solid var(--accent-2) ;
  color : var(--accent-2) ;
  font-weight : 600 ;
}

/* About Section */
.about-section {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  gap : 32px ;
  max-width : 960px ;
  width : calc(100% - 32px) ;
  scroll-margin-top : 64px ;
  margin-top : 24px ;
}

.about-opening {
  text-align : center ;
  max-width : var(--max-width) ;
  margin-bottom : 8px ;
}

.about-title {
  font-size : 28px ;
  font-weight : 700 ;
  color : var(--text-1) ;
  margin : 0 0 8px 0 ;
  line-height : 1.3 ;
}

.about-subtitle {
  font-size : 18px ;
  color : var(--text-2) ;
  margin : 0 ;
  font-weight : 400 ;
}

.cards-grid {
  display : grid ;
  grid-template-columns : repeat(auto-fit, minmax(280px, 1fr)) ;
  gap : 20px ;
  width : 100% ;
}

/* people grid in the who we are page */
.people-grid {
  display : grid ;
  grid-template-columns : repeat(auto-fit , minmax(160px , 1fr)) ;
  gap : 20px ;
  width : 100% ;
}

.person-card {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  padding : 28px ;
  gap : 8px ;
}

/* bio section: one-per-row grid and simple row cards */
.bio-cards { grid-template-columns : 1fr ; }

.bio-card {
  display : flex ;
  flex-direction : row ;
  gap : 12px ;
  align-items : flex-start ;
}

.bio-avatar {
  width : 56px ;
  height : 56px ;
  object-fit : cover ;
  border-radius : 6px ;
  border : 1px solid var(--accent-2) ;
}

.bio-text { display : flex ; flex-direction : column ; }

.person-card > div {
  align-items : center ;
  text-align : center ;
}

.person-avatar {
  width : 80px ;
  height : 80px ;
  object-fit : cover ;
  border-radius : 8px ;
  border : 1px solid var(--accent-2) ;
}


.person-card .card-title {
  font-size : 20px ;
}

.person-card .card-content {
  font-size : 16px ;
}

.card {
  background : linear-gradient(180deg, var(--bg-3), var(--bg-1)) ;
  border : 1px solid var(--accent-2) ;
  border-radius : 8px ;
  padding : 24px ;
  box-shadow : 0 2px 8px rgba(0, 0, 0, 0.04) ;
  backdrop-filter : blur(10px) ;
  -webkit-backdrop-filter : blur(10px) ;
}

.card-header {
  display : flex ;
  align-items : center ;
  gap : 8px ;
  margin-bottom : 12px ;
}

.card-title {
  margin : 0 ;
  font-size : 18px ;
  font-weight : 700 ;
  color : var(--text-1) ;
  line-height : 1.2 ;
}

/* If a link is ever placed inside a card title, keep it styled as text */
.card .card-title a {
  color : var(--text-1) ;
  border-bottom : 0 ;
}

.card-content {
  margin : 0 ;
  line-height : 1.6 ;
  color : var(--text-2) ;
  font-size : 15px ;
}

/* Page Header */
.page-header {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  justify-content : center ;
  max-width : var(--max-width) ;
  text-align : center ;
  gap : 12px ;
  padding : 40px 16px ;
  border-bottom : 2px solid var(--accent-2) ;
}

.page-header-content {
  display : flex ;
  flex-direction : row ;
  align-items : center ;
  gap : 10px ;
}

.page-logo-link {
  display : inline-flex ;
  align-items : center ;
  border-bottom : 0 ;
}

.page-logo {
  width : 56px ;
  height : 56px ;
  object-fit : contain ;
  padding : 4px ;
}

.page-title {
  margin : 0 ;
  font-size : 36px ;
  font-weight : 700 ;
  line-height : 1.2 ;
}

.page-subtitle {
  margin : 0 ;
  color : var(--text-2) ;
  font-weight : 400 ;
  font-size : 20px ;
}

/* Content Sections */
.content-section {
  max-width : var(--max-width) ;
  text-align : left ;
  padding : 20px 16px 20px 20px ;
  scroll-margin-top : 64px ;
}

.content-section-center {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  justify-content : center ;
  max-width : var(--max-width) ;
  text-align : center ;
  gap : 12px ;
  padding : 40px 16px ;
  min-height : 300px ;
}

.content-section-blog {
  display : flex ;
  flex-direction : column ;
  align-items : flex-start ;
  justify-content : flex-start ;
  max-width : var(--max-width) ;
  text-align : left ;
  gap : 20px ;
  padding : 40px 16px ;
}

/* Typography */
.section-title {
  margin : 24px 0 0 0 ;
}

.content-list {
  margin : 0 ;
  padding-left : 20px ;
}

/* Dividers */
.divider {
  height : 2px ;
  width : 100% ;
  max-width : var(--max-width) ;
  background : var(--accent-2) ;
}

/* Footer */
.footer {
  display : flex ;
  flex-direction : column ;
  align-items : flex-start ;
  justify-content : flex-start ;
  max-width : var(--max-width) ;
  text-align : left ;
  gap : 8px ;
  padding : 12px 16px 24px 16px ;
  color : var(--text-2) ;
  font-size : 12px ;
}

.footer p {
  margin : 0 ;
}

.footer-spacing {
  height : 4px ;
}

.footer-bottom-spacing {
  height : 24px ;
}

/* Blog specific */
.blog-card {
  display : flex ;
  flex-direction : column ;
  gap : 12px ;
  padding : 20px ;
  border-radius : 4px ;
}

.blog-card-title {
  margin : 0 ;
  line-height : 1.2 ;
}

.blog-card-content {
  margin : 0 ;
}

.blog-card-note {
  margin : 0 ;
  font-size : 14px ;
  color : var(--text-2) ;
}

.blog-card-link {
  display : inline-block ;
  margin-top : 8px ;
}

/* Site Header Navigation Links */
site-header a {
  line-height : 1 ;
  text-align : center ;
}