/* Home page in the Coropuna layout: a pale hero with a sage diamond behind the
   headline, the photo running to the edge with a see-through dark box laid
   over it and a sage block beneath, square boxes overlapping the hero, figures
   between ruled lines over a faded photo, a dark band, cause cards with a bar
   across the photo, a dark donation panel that rises into the section above,
   a handprint band and a half-photo section. */

/* ---- Hero -------------------------------------------------------------- */

.dwt-hero {
  position: relative;
  background: var(--dwt-paper);
  padding-bottom: 150px;
  overflow: hidden;
}

.dwt-hero__shape {
  position: absolute;
  left: -220px;
  top: 150px;
  width: 560px;
  height: 560px;
  background: var(--dwt-sage-soft);
  transform: rotate(45deg);
  z-index: 0;
}

.dwt-hero__block {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  height: 330px;
  background: var(--dwt-sage);
  z-index: 0;
}

.dwt-hero .carousel { position: relative; z-index: 1; }

/* Slide changes: every slide sits in the same grid cell, so the hero is always as tall as its
   tallest slide and the page below never jumps. The outgoing slide's words and box vanish at
   once while its photo cross fades, so two sets of text never overlap. The incoming words rise
   once as the slide fades in; the animation is set on the incoming state too, so it doesn't
   start again when the slide becomes active. */
.dwt-hero .carousel-inner { display: grid; }
.dwt-hero .carousel-item { display: block; grid-area: 1 / 1; float: none; margin-right: 0; }
.dwt-hero .carousel-item:not(.active):not(.carousel-item-next):not(.carousel-item-prev) { visibility: hidden; }
.dwt-hero .carousel-item.active.carousel-item-start :is(.dwt-hero__copy, .dwt-hero__glass),
.dwt-hero .carousel-item.active.carousel-item-end :is(.dwt-hero__copy, .dwt-hero__glass) { visibility: hidden; }

.dwt-hero__slide { position: relative; min-height: 640px; }

.dwt-hero__photo { position: absolute; top: 0; bottom: 0; left: 40%; right: 0; overflow: hidden; }
.dwt-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
:is(.carousel-item.active, .carousel-item-next, .carousel-item-prev) .dwt-hero__photo img { animation: dwt-zoom 9s ease-out both; }
@keyframes dwt-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

.dwt-hero__inner { display: flex; align-items: flex-start; min-height: 640px; }
.dwt-hero__inner--plain { min-height: 480px; }

/* Words start at the same height on every slide; the label line keeps its space when empty */
.dwt-hero__copy { position: relative; z-index: 2; max-width: 440px; padding: 88px 0 176px; }
.dwt-hero__copy .dwt-eyebrow { min-height: 1.4em; }
:is(.carousel-item.active, .carousel-item-next, .carousel-item-prev) .dwt-hero__copy { animation: dwt-rise 0.6s ease-out both; }
@keyframes dwt-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.dwt-hero__title {
  font-family: var(--dwt-heading);
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dwt-deep);
  margin: 0;
}
.dwt-hero__title::after {
  content: "";
  display: block;
  width: 190px;
  height: 5px;
  margin-top: 24px;
  background: var(--dwt-deep);
}
.dwt-hero__sub {
  font-family: var(--dwt-heading);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  color: var(--dwt-deep);
  margin: 22px 0 34px;
}

.dwt-hero__glass {
  position: absolute;
  z-index: 2;
  left: calc(40% + 56px);
  bottom: 70px;
  width: min(430px, 40%);
  padding: 32px 36px;
  background: var(--dwt-deep);
  color: var(--dwt-white);
}
.dwt-hero__glass p { font-size: 15px; line-height: 1.75; margin: 0 0 18px; color: rgba(255, 255, 255, 0.92); }
.dwt-hero__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--dwt-heading);
  font-weight: 500;
  color: var(--dwt-sage);
  text-decoration: none;
}
.dwt-hero__more span { text-decoration: underline; text-underline-offset: 5px; }
.dwt-hero__more:hover { color: var(--dwt-white); }

.dwt-hero__controls-wrap { position: absolute; left: 0; right: 0; bottom: 100px; z-index: 3; pointer-events: none; }
.dwt-hero__controls { display: flex; gap: 8px; pointer-events: auto; }
.dwt-hero__controls button {
  width: 52px;
  height: 52px;
  border: 2px solid var(--dwt-deep);
  background: transparent;
  color: var(--dwt-deep);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.dwt-hero__controls button:hover { background: var(--dwt-deep); color: var(--dwt-white); }

/* ---- Quick boxes ------------------------------------------------------- */

.dwt-quick { position: relative; z-index: 2; margin-top: -110px; }
.dwt-quick__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.dwt-quick__box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 190px;
  padding: 26px 12px 36px;
  background: var(--dwt-white);
  border: 4px solid var(--dwt-deep);
  text-align: center;
  font-family: var(--dwt-heading);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--dwt-deep);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.dwt-quick__box::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 66px;
  height: 10px;
  background: var(--dwt-sage);
  transform: translateX(-50%);
}
.dwt-quick__box .dwt-icon { width: 70px; height: 70px; }
.dwt-quick__box:hover { background: var(--dwt-sage-soft); color: var(--dwt-deep); }

/* ---- About and figures ------------------------------------------------- */

.dwt-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }

/* Figures on a plain paper panel, inside the page grid, with the theme's sage bar */
.dwt-stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--dwt-paper); }
.dwt-stats::after { content: ""; position: absolute; left: 40px; bottom: 0; width: 66px; height: 8px; background: var(--dwt-sage); }
.dwt-stat { padding: 44px 40px; }
.dwt-stat:nth-of-type(1) { border-right: 1px solid var(--dwt-line); border-bottom: 1px solid var(--dwt-line); }
.dwt-stat:nth-of-type(2) { border-bottom: 1px solid var(--dwt-line); }
.dwt-stat:nth-of-type(3) { border-right: 1px solid var(--dwt-line); }
.dwt-stat strong {
  display: block;
  font-family: var(--dwt-heading);
  font-size: clamp(40px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--dwt-deep);
}
.dwt-stat span { display: block; margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--dwt-ink-soft); }

.dwt-about__copy .dwt-heading { margin-bottom: 22px; }
.dwt-about__copy p { font-size: 15px; line-height: 1.85; margin: 0 0 16px; }
.dwt-about__copy .dwt-link { margin-top: 12px; }

/* ---- Band -------------------------------------------------------------- */

/* The photo in full colour, the words on a solid deep panel inside the grid */
.dwt-band {
  background: var(--band-image, none) center 40% / cover no-repeat, var(--dwt-deep);
  color: var(--dwt-white);
}
.dwt-band .dwt-band__inner { padding: 110px 20px; }
.dwt-band__panel { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 560px; padding: 44px 48px; background: var(--dwt-deep); }
.dwt-band h2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--dwt-white);
}
.dwt-band h2 .dwt-icon { width: 56px; height: 56px; }

/* Cause cards and .dwt-center live in pages.css, shared with the projects pages. */

/* ---- Volunteer and the donation panel ---------------------------------- */

.dwt-join__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 80px; align-items: start; }
.dwt-join__copy { padding-top: 30px; }
.dwt-join__copy .dwt-heading { margin-bottom: 22px; }
.dwt-join__copy p { font-size: 15px; line-height: 1.85; margin: 0 0 16px; }
.dwt-join__copy .dwt-btn { margin-top: 14px; }

.dwt-give {
  position: relative;
  z-index: 2;
  margin-top: -120px;
  padding: 46px 44px;
  background: var(--dwt-deep);
  color: var(--dwt-white);
}
.dwt-give__title {
  font-family: var(--dwt-heading);
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--dwt-white);
  margin: 6px 0 12px;
}
.dwt-give__text { font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, 0.85); margin: 0 0 26px; }
.dwt-give__label { display: block; font-size: 13px; color: var(--dwt-sage); margin-bottom: 8px; }
.dwt-give__select {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: var(--dwt-white);
  font-family: var(--dwt-heading);
  font-size: 16px;
  color: var(--dwt-deep);
}
.dwt-give__submit { width: 100%; margin-top: 14px; }
.dwt-give__alt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.dwt-give__alt a { color: var(--dwt-sage); text-underline-offset: 4px; }
.dwt-give__alt a:hover { color: var(--dwt-white); }

/* ---- Values ------------------------------------------------------------ */

.dwt-section.dwt-join { padding-bottom: 40px; }
.dwt-section.dwt-values-wrap { padding-top: 40px; }
.dwt-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.dwt-value {
  position: relative;
  border: 3px solid var(--dwt-deep);
  padding: 40px 34px 44px;
  transition: background-color 0.2s ease;
}
.dwt-value::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 34px;
  width: 66px;
  height: 10px;
  background: var(--dwt-sage);
}
.dwt-value:hover { background: var(--dwt-sage-soft); }
.dwt-value .dwt-icon { width: 76px; height: 76px; }
.dwt-value h3 { font-size: 21px; font-weight: 600; margin: 22px 0 10px; }
.dwt-value p { font-size: 15px; line-height: 1.75; margin: 0; }

/* ---- Handprint band ---------------------------------------------------- */

.dwt-words .dwt-section-head { margin-bottom: 36px; }
.dwt-words__quotes { max-width: 780px; margin: 0 auto; }
.dwt-words__actions { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; margin-top: 40px; }
.dwt-words__call { display: inline-flex; align-items: center; gap: 14px; color: var(--dwt-deep); text-decoration: none; }
.dwt-words__call .dwt-icon { width: 52px; height: 52px; }
.dwt-words__call span { font-family: var(--dwt-heading); font-size: 22px; font-weight: 600; line-height: 1.1; }
.dwt-words__call small { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.dwt-words__call:hover { color: var(--dwt-forest); }

/* ---- Half-photo section ------------------------------------------------ */

.dwt-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.dwt-split__photo { background: var(--dwt-deep) center / cover no-repeat; }
.dwt-split__panel { background: var(--dwt-paper); display: flex; align-items: center; }
.dwt-split__inner { max-width: 580px; padding: 80px 60px; }
.dwt-split__inner .dwt-heading { margin-bottom: 20px; }
.dwt-split__inner p { font-size: 15px; line-height: 1.85; margin: 0; }
.dwt-split__inner .dwt-chips { margin: 24px 0 28px; }

/* ---- Disclaimer -------------------------------------------------------- */

.dwt-disclaimer { background: var(--dwt-white); border-top: 1px solid var(--dwt-line); }
.dwt-disclaimer p { margin: 0; padding: 26px 0; font-size: 14px; line-height: 1.7; }
.dwt-disclaimer strong { color: var(--dwt-deep); }

/* ---- Smaller screens --------------------------------------------------- */

@media (max-width: 1199.98px) {
  .dwt-hero__photo { left: 44%; }
  .dwt-hero__glass { left: calc(44% + 32px); width: min(380px, 44%); }
  .dwt-hero__copy { max-width: 380px; }
  .dwt-quick__grid { gap: 12px; }
  .dwt-quick__box { font-size: 15px; min-height: 170px; }
  .dwt-about__grid, .dwt-join__grid { gap: 50px; }
}

@media (max-width: 991.98px) {
  .dwt-hero { padding-bottom: 90px; }
  .dwt-hero__shape { display: none; }
  .dwt-hero__slide { min-height: 0; display: flex; flex-direction: column; }
  .dwt-hero__photo { position: relative; left: auto; height: 340px; order: -1; }
  .dwt-hero__inner { min-height: 0; }
  .dwt-hero__copy { max-width: none; padding: 36px 0 110px; }
  .dwt-hero__glass { display: none; }
  .dwt-hero__controls-wrap { top: 16px; bottom: auto; }
  .dwt-hero__controls { justify-content: flex-end; }
  .dwt-hero__controls button { width: 44px; height: 44px; background: var(--dwt-white); border-color: var(--dwt-white); }
  .dwt-hero__block { width: 60%; height: 140px; }
  .dwt-quick { margin-top: -60px; }
  .dwt-quick__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .dwt-quick__box { min-height: 150px; padding: 18px 8px 26px; font-size: 14px; }
  .dwt-quick__box .dwt-icon { width: 52px; height: 52px; }
  .dwt-about__grid, .dwt-join__grid { grid-template-columns: 1fr; }
  .dwt-give { margin-top: 0; }
  .dwt-values { grid-template-columns: 1fr; }
  .dwt-split { grid-template-columns: 1fr; }
  .dwt-split__photo { min-height: 300px; }
  .dwt-split__inner { padding: 60px 20px; }

}

@media (max-width: 767.98px) {
  .dwt-band .dwt-band__inner { padding: 180px 0 0; }
  .dwt-band__panel { max-width: none; padding: 32px 20px 36px; gap: 22px; }
  .dwt-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dwt-quick__box:last-child { grid-column: span 2; }
  .dwt-quick__box { min-height: 0; padding: 22px 10px 28px; gap: 10px; font-size: 15px; }
  .dwt-quick__box .dwt-icon { width: 56px; height: 56px; }
  .dwt-hero__copy { padding: 28px 0 96px; }
  .dwt-stat { padding: 26px 16px; }
  .dwt-hero__photo { height: 260px; }
  .dwt-give { padding: 36px 24px; }
}

/* ---- Motion and the causes slider ---------------------------------------- */
.dwt-causes-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
.dwt-causes-head .dwt-lede { margin: 12px 0 0; }
.dwt-causes-head .dwt-slider__nav { margin: 0; }
.dwt-slider .dwt-cause { height: 100%; }
.dwt-cause__kind::before { content: ""; width: 8px; height: 8px; background: var(--dwt-leaf); }
.dwt-words__ring { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--dwt-white); }
.dwt-words__ring .dwt-icon { width: 40px; height: 40px; }
.dwt-split__photo { background-size: cover; background-repeat: no-repeat; }
@media (max-width: 767.98px) {
  .dwt-causes-head { flex-direction: column; align-items: flex-start; }
}