@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

:root{
  --bg:#fbf5f2;
  --cream:#fee6ba;
  --lilac:#db9ee9;
  --orange:#fe9653;
  --dark-orange:#a65e2c;
  --head-text: #B7591D;
  --light-cream:#FDF7EA;
  --dark-purple: #472e4d;
  --pale-lilac: #AF8BBF; 
  --light-lilac: #B888C3;
  --light-light-cream: #FFF7E9;
  --white: #ffffff;
  --container:1100px;
  --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-heading: "Geologica", "Segoe UI", sans-serif;
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family: var(--font-body);
  margin:0;
  color:var(--dark-orange);
  background:var(--white);
  -webkit-font-smoothing: antialiased;
}

.brand,
.main-nav a,
.hero h1,
.section-title,
.value h3,
.card-title,
.contact-label,
.footer-brand-name,
.large {
  font-family: var(--font-heading);
}


.container {
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px
}

.site-header {
  background-color:var(--cream);
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family: "Geologica", "Jakarta Sans", sans-serif;
  font-weight:400;
  padding: 15px 80px 15px 80px;
  max-width:1300px;
}

.brand {
  display:inline-flex;
  align-items:center;
  font-weight:0;
  font-family:"Geologica";
  color:var(--dark-orange);
  text-decoration:none;
  font-size:20px
}

.brand-logo {
  display:block;
  width:76px;
  height:76px;
  border-radius:50%;
}

.main-nav a {
  margin:0 20px;
  color:var(--head-text);
  text-decoration:none;
  font-weight:400
}

.header-cta .btn {
  padding:8px 14px;
  border-radius:20px;
  text-decoration:none;
  background: linear-gradient(135deg, #FE9653, #DB9EE9);
   color: var(--white);
}

.btn {
  display:inline-block;
  color: var(--white);
}

.btn-ghost {
  background:white;
}

.btn-primary {
  padding:8px 14px;
  border-radius:20px;
  text-decoration:none;
  background: linear-gradient(135deg, #FE9653, #DB9EE9);
   color: var(--white);
}

.hero {
  position:relative;
  min-height:360px;
  display:flex;
  align-items:center
}

.hero-bg {
  position:absolute;
  inset:0;
  background-image:url('https://images.unsplash.com/photo-1549893076-5a2b266b5fa3?w=1800&q=80&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
  filter:brightness(0.55);
  
  /* Gradient *

/* Auto layout */
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 62.3546px;
gap: 14.5px;
isolation: isolate;

position: absolute;
width: 683px;
height: 683px;
left: -208px;
top: 433px;

background: rgba(219, 158, 233, 0.3);
filter: blur(150px);
border-radius: 341.5px;


flex: none;
order: 2;
flex-grow: 0;
z-index: 3;

}

.hero-content {
  position:relative;
  padding:48px 20px;
  color:white;
  text-align:left
}

.hero h1{
  font-size:40px;
  line-height:1.05;
  margin:0 0 12px;
  font-weight:700;
  font-family:"Geologica";
}

.hero .lead{
  max-width:720px;
  color:rgba(255,255,255,0.9);
  font-size:16px
}

.image-container {
  display:flex;
  justify-content:center;
  align-items:center;
  margin:20px 0;
  height: 100%;
  width: 100%;
  margin-top: 60px;
}

 
 
.section-title-two {
  font: size 32px;
  margin:28px 0;
  text-align:center;
  color:var(--dark-purple);
  font-family:var(--font-heading)
}

.section-title-three {
  font: size 32px;
  margin:28px 0;
  text-align:center;
  color:var(--orange);
  font-family:var(--font-heading)
}

/*.impact {
  padding:34px 20px
}

.impact-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}

.impact-card {
  background:white;
  border-radius:12px;
  padding:18px;
  text-align:center;
  box-shadow:0 6px 20px rgba(35,20,15,0.04)
}

.impact-number {
  font-weight:700;
  font-size:22px;
  color:var(--orange)
}

.impact-desc {
  color:var(--muted);
  margin-top:6px
}
*/
.values {
  padding:40px 0;
  background:var(--light-light-cream);
}

.values-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:start
}

.value {
background:transparent;
  text-align:center;
  padding:18px;
  margin: 6px;
  color:var(--light-lilac);
}


.value-icon {
  font-size:28px;
  background:var(--cream);
  border-radius:50%;
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  box-shadow:0 6px 12px rgba(40,20,10,0.04);
}

.value-desc p {
  color:var(--dark-purple);
  font-size:14px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.recent {
  padding:40px 20px
}

.recent-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px
}

.coming-soon-recently-tracked {
  background:white;
  border-radius:20px;
  border: 1px solid var(--orange);
  padding:18px;
  text-align:center;
  box-shadow:0 6px 20px rgba(35,20,15,0.04)
}



.cards-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px
}
.card{
  background:white;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(30,20,20,0.04);
  display:flex;
  flex-direction:column
}
.card img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block
}
.card-body{
  padding:14px
}
.card-meta{
  font-size:12px;
  color:var(--accent);
  margin-bottom:6px
}
.card-title{
  margin:0 0 6px;
  font-size:16px
}
.card-excerpt {
  margin:0;
  color:var(--muted);
  font-size:14px
}

.card-foot {
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.author {
  font-size:12px;
  color:var(--muted)
}

.site-footer {
  background: #f3e3bb;
  padding: 54px 0 30px;
}

.footer-inner {
  display: grid;
  grid-template-columns: auto minmax(440px, 1.2fr) auto;
  align-items: center;
  gap: 28px;
  max-width: 1126px;
}

.brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.footer-logo {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #f4e6c8;
}

.footer-brand-name {
  margin-top: 10px;
  font-size: clamp(2.2rem, 2.8vw, 4.1rem);
  letter-spacing: -0.08em;
  line-height: 0.9;
  color: #d77a41;
  font-family:"Geologica";
  text-align: center;
  white-space: nowrap;
}

.brand-copy-wrap {
  min-width: 0;
}

.small {
  color: #5f3f33;
  font-family: var(--font-body);
  max-width: 450px;
  margin: 0;
  font-size: clamp(14px);
  line-height: 1.45;
  font-weight: 500;
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-left: auto;
}

.contact-label {
  margin: 0 0 14px;
  color: #8f4d2d;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.contact a {
  color: #5d3a2e;
  text-decoration: none;
  font-size: clamp(1.15rem, 1.55vw, 1.8rem);
  font-weight: 500;
}

.socials {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}

@media (max-width:900px) {
  .impact-grid {
    grid-template-columns:repeat(2,1fr)
  }
  
  .values-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .cards-grid {
    grid-template-columns:1fr
  }

  .hero h1 {
    font-size:32px
  }

}
@media (max-width:560px) {
  .main-nav {
    display:none
  }

  .footer-inner {
    flex-direction:column;
    gap:12px
  }
  .impact-grid{
    grid-template-columns:1fr
  }
  .values-grid{
    grid-template-columns:1fr
  }
  .hero{
    min-height:300px
  }
  .hero-content{
    padding:28px 12px
  }
}