/* =========================================================
   Care — greener places, cleaner air (care-lb.com)
   Botanical-arch stylesheet: soft mist ground, deep evergreen
   panels, garden-arch imagery, organic serif display.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Albert+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --mist:    #F2F6EF;   /* page ground            */
  --sage:    #E2EBDD;   /* soft panel             */
  --forest:  #123524;   /* deep evergreen panels  */
  --canopy:  #1C4A32;   /* mid green              */
  --moss:    #A9C46C;   /* fresh accent           */
  --amber:   #E0A458;   /* warm sun accent        */
  --ink:     #16241C;
  --ink-soft:#4E5E53;
  --on-dark: #EAF2E6;

  --display: 'Fraunces', serif;
  --body:    'Albert Sans', sans-serif;

  --arch: 999px 999px 26px 26px;  /* signature garden-arch shape */
  --max:  1160px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

img{ display: block; max-width: 100%; }

::selection{ background: var(--moss); color: var(--forest); }

:focus-visible{
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* -------------------- shared type -------------------- */
.kicker{
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--canopy);
  margin: 0 0 14px;
}

.kicker-light{ color: var(--moss); }

.section-title{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  max-width: 24ch;
}

/* -------------------- buttons -------------------- */
.btn{
  display: inline-block;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 999px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover{ transform: translateY(-2px); }

.btn-solid{
  background: var(--forest);
  color: var(--on-dark);
}

.btn-solid:hover{ background: var(--canopy); }

.btn-ghost{
  color: var(--forest);
  border: 2px solid var(--forest);
}

.btn-ghost:hover{ background: var(--sage); }

.btn-lg{ padding: 16px 34px; font-size: 1.02rem; }

/* -------------------- topbar -------------------- */
.topbar{
  padding: 20px 0;
}

.topbar-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wordmark{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--forest);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.wordmark-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px 999px 3px 3px; /* tiny arch, echoes the signature */
  background: var(--moss);
}

.topbar-domain{
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* -------------------- hero -------------------- */
.hero{ padding: 34px 0 70px; }

.hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}

@media (min-width: 960px){
  .hero-grid{ grid-template-columns: 1.05fr 0.95fr; }
}

.hero-copy h1{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}

.lede{
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 30px;
}

.hero-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* the signature: garden-arch imagery */
.arch{
  margin: 0;
  overflow: hidden;
  border-radius: var(--arch);
  background: var(--sage);
}

.arch img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-arches{
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: center;
}

.arch-tall { width: 34%; height: 430px; }
.arch-mid  { width: 34%; height: 350px; }
.arch-short{ width: 32%; height: 280px; }

@media (max-width: 560px){
  .arch-tall { height: 300px; }
  .arch-mid  { height: 245px; }
  .arch-short{ height: 195px; }
}

/* -------------------- stat band -------------------- */
.statband{
  background: var(--forest);
  color: var(--on-dark);
  padding: 52px 0;
}

.statband-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 28px;
}

@media (min-width: 900px){
  .statband-grid{ grid-template-columns: repeat(4, 1fr); }
}

.stat-value{
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.2rem;
  color: var(--moss);
  line-height: 1;
  margin-bottom: 10px;
}

.stat-label{
  font-size: 0.9rem;
  color: var(--on-dark);
  opacity: 0.85;
  max-width: 24ch;
  display: block;
}

/* -------------------- pillars -------------------- */
.pillars{ padding: 84px 0 70px; }

.pillar-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 28px;
  margin-top: 42px;
}

@media (min-width: 820px){
  .pillar-grid{ grid-template-columns: repeat(3, 1fr); }
}

.arch-card{ height: 300px; margin-bottom: 22px; }

.pillar-card h3{
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 10px;
}

.pillar-card p{
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* -------------------- actions (pollution) -------------------- */
.actions{
  background: var(--forest);
  color: var(--on-dark);
  padding: 90px 0;
}

.actions-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: start;
}

@media (min-width: 960px){
  .actions-grid{ grid-template-columns: 0.85fr 1.15fr; }
}

.actions-media{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.arch-feature{ width: 58%; height: 420px; }
.arch-feature-small{ width: 42%; height: 320px; margin-top: 70px; }

@media (max-width: 560px){
  .arch-feature{ height: 280px; }
  .arch-feature-small{ height: 215px; margin-top: 46px; }
}

.actions .section-title{ color: var(--on-dark); }

.actions-lede{
  color: var(--on-dark);
  opacity: 0.85;
  max-width: 54ch;
  margin: 0 0 30px;
}

.action-list{
  list-style: none;
  counter-reset: action;
  margin: 0;
  padding: 0;
}

.action-list li{
  counter-increment: action;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 6px 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(234, 242, 230, 0.18);
}

.action-list li::before{
  content: counter(action, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--amber);
  grid-row: 1 / span 2;
  padding-top: 2px;
}

.action-name{
  font-weight: 700;
  font-size: 1.02rem;
  grid-column: 2;
}

.action-text{
  grid-column: 2;
  font-size: 0.94rem;
  opacity: 0.85;
}

/* -------------------- gallery -------------------- */
.gallery{ padding: 84px 0 30px; }

.gallery-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 40px;
}

@media (min-width: 660px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}

.gallery-item{
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  position: relative;
  background: var(--sage);
}

/* every other tile gets the arch — a rhythm, not a wall of arches */
.gallery-item:nth-child(odd){ border-radius: var(--arch); }

.gallery-item img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gallery-item:hover img{ transform: scale(1.04); }

.gallery-item figcaption{
  position: absolute;
  left: 14px; bottom: 14px;
  background: var(--mist);
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 7px 14px;
  border-radius: 999px;
}

/* -------------------- cta -------------------- */
.cta{ padding: 70px 0 90px; }

.cta-inner{
  background: var(--sage);
  border-radius: 34px;
  padding: 64px 34px;
  text-align: center;
}

.cta-inner h2{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin: 0 0 16px;
}

.cta-inner p{
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 auto 30px;
}

/* -------------------- footer -------------------- */
.footer{
  background: var(--forest);
  color: var(--on-dark);
  padding: 34px 0;
}

.footer-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.footer-inner > span{ opacity: 0.8; }

.wordmark-footer{ color: var(--on-dark); font-size: 1.15rem; }