/* Souls That Care – styles */

:root {
  --cream: #F8F6EE;
  --paper: #FFFCF5;
  --sage: #E9EBD9;
  --sage-deep: #DCE3C3;
  --pill: #EAE2CB;
  --olive: #4A5335;
  --forest: #2C331F;
  --forest-ink: #1C2111;
  --ink: #26291C;
  --body: #2E3122;
  --muted: #4D5040;
  --muted-light: #C9CCB2;
  --on-dark: #E9E8D8;
  --butter: #EFD993;
  --butter-light: #F7E7AE;
  --terracotta: #A44D2A;

  --font-display: 'Bricolage Grotesque', 'DM Sans', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --container: 1240px;
  --gutter: 24px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }

/* ---------- Language switching ---------- */
html[data-lang="en"] [data-l="cz"],
html[data-lang="cz"] [data-l="en"] { display: none !important; }

/* ---------- Shared ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  align-self: flex-start;
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow--butter { background: var(--butter); color: var(--forest); }
.eyebrow--forest { background: var(--forest); color: var(--butter); }
.eyebrow--olive  { background: var(--olive); color: var(--paper); }

.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--terracotta);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--forest);
}

.accent { color: var(--terracotta); }
.accent-butter { color: var(--butter); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
}
.btn--butter { background: var(--butter); color: var(--forest); }
.btn--butter:hover { background: var(--butter-light); }
.btn--ghost { border: 2px solid rgba(255, 252, 245, 0.7); color: var(--paper); }
.btn--ghost:hover { background: rgba(255, 252, 245, 0.1); }

/* ---------- Header ---------- */
.site-header { background: var(--cream); }
.site-header__inner {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}
.site-header__logo img { width: clamp(190px, 20vw, 270px); height: auto; }

.lang-switch {
  margin-left: auto;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--pill);
}
.lang-switch button {
  font: 700 13px var(--font-body);
  letter-spacing: 0.06em;
  min-width: 44px;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--forest);
}
.lang-switch button[aria-pressed="true"] { background: var(--olive); color: var(--paper); }

.main-nav {
  flex: 0 1 420px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  font-size: 16px;
  font-weight: 500;
}
.main-nav a { color: var(--forest); text-decoration: none; padding: 10px 0; }
.main-nav a:hover { color: var(--terracotta); }
.main-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--olive);
  color: var(--paper);
  font-weight: 700;
}
.main-nav .nav-cta:hover { background: var(--forest); color: var(--paper); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(464px, max(69vh, 48vw), 780px);
  display: flex;
  align-items: flex-end;
  border-radius: 0 0 clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px);
  background: var(--forest);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 0% 38%;
  z-index: -2;
  transform-origin: 0% 55%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(28, 33, 17, 0.95) 0%, rgba(28, 33, 17, 0.84) 34%, rgba(28, 33, 17, 0.5) 60%, rgba(28, 33, 17, 0.12) 84%, rgba(28, 33, 17, 0) 100%),
    linear-gradient(to right, rgba(28, 33, 17, 0.55) 0%, rgba(28, 33, 17, 0.25) 45%, rgba(28, 33, 17, 0) 75%);
}
.hero__inner {
  width: 100%;
  padding-top: clamp(60px, 10vh, 120px);
  padding-bottom: clamp(36px, 6vw, 72px);
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  align-items: flex-end;
}
.hero__copy {
  flex: 1.6 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 5.6vw, 82px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(14, 17, 8, 0.45);
  color: var(--paper);
}
.hero__title span { display: block; }
.hero__title > [data-l] > span + span { color: var(--butter); }
.hero__lead { max-width: 34em; font-size: 19px; color: var(--on-dark); }

.hero__actions {
  flex: 1 1 260px;
  max-width: 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero__btns { display: flex; flex-direction: column; gap: 12px; }
.hero__actions .btn {
  display: flex;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 26px;
}

/* tablet (touch): text below the photo so people aren't covered */
@media (min-width: 701px) and (max-width: 1100px) and (hover: none) {
  .hero { background: var(--forest-ink); }
  .hero__inner { flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 54vw; }
  .hero__copy { flex: 0 1 auto; max-width: none; }
  .hero__lead { max-width: 34em; }
  .hero__title span { white-space: nowrap; }
  .hero__actions, .hero__btns { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; max-width: none; width: auto; }
  .hero .hero__img { --z: 1; inset: 0 auto auto 0; height: auto; width: 100%; }
  .hero__scrim { background: linear-gradient(to bottom, rgba(28,33,17,0) 0, rgba(28,33,17,0) 38vw, rgba(28,33,17,0.62) 54vw, rgba(28,33,17,0.9) 66vw, #1C2111 80vw); }
}
@media (max-width: 700px) {
  .hero { background: var(--forest-ink); }
  .hero__inner { padding-top: 84vw; }
  .hero .hero__img { --z: 1; inset: -24vw auto auto 0; height: auto; }
  .hero__scrim { background: linear-gradient(to bottom, rgba(28, 33, 17, 0) 0, rgba(28, 33, 17, 0) 60vw, rgba(28, 33, 17, 0.62) 82vw, rgba(28, 33, 17, 0.88) 104vw, #1C2111 124vw); }
}

/* ---------- Values ---------- */
.values { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.values__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-bottom: 40px;
}
.values__head p { max-width: 520px; color: var(--muted); }

.vtc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.vtc-item { display: flex; flex-direction: column; gap: 8px; }
.vtc-item::before {
  content: "";
  display: block;
  width: 33%;
  height: 2px;
  border-radius: 999px;
  background: var(--terracotta);
  margin-bottom: 12px;
  transform-origin: left center;
}
.vtc-num { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.12em; color: var(--terracotta); }
.vtc-item h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--forest);
}
.vtc-item p { font-size: 16px; color: var(--muted); }
@media (max-width: 760px) { .vtc { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- Story ---------- */
.story { background: var(--sage); }
.story__inner { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.story__body {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.story__body > p:not(.eyebrow) { color: var(--body); }
.signature { display: flex; align-items: center; gap: 14px; }
.signature img { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; object-fit: cover; }
.signature p { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--terracotta); }

/* ---------- Quote ---------- */
.quote { background: var(--forest); }
.quote__inner {
  max-width: 1040px;
  padding-top: clamp(36px, 4.5vw, 64px);
  padding-bottom: clamp(36px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.quote__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(52px, 6vw, 72px);
  line-height: 0.5;
  height: 0.3em;
  margin-bottom: -14px;
  color: var(--butter);
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.quote__cite { font-weight: 700; color: var(--muted-light); }

/* ---------- People ---------- */
.people__inner { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.people-grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  grid-template-areas: "photo title" "photo text";
  column-gap: clamp(36px, 5vw, 72px);
  row-gap: 18px;
  align-items: start;
}
.people-grid .pg-title {
  grid-area: title;
  align-self: end;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--forest);
}
.people-grid .pg-photo { grid-area: photo; }
.people-grid .pg-text { grid-area: text; display: flex; flex-direction: column; gap: 14px; }
.people-grid .pg-text p { color: var(--body); }
.pg-photo figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pg-photo img { width: 100%; max-width: 400px; height: auto; aspect-ratio: 830 / 860; border-radius: 18px; object-fit: cover; }
.pg-photo figcaption { font-size: 15px; font-weight: 500; color: var(--muted); }
@media (max-width: 860px) {
  .people-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "photo" "text"; }
}

/* ---------- How we help ---------- */
.help {
  background: var(--sage);
  box-shadow: 0 0 0 100vmax var(--sage);
  clip-path: inset(0 -100vmax);
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
.help__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 40px; }
.help__head > div { display: flex; flex-direction: column; gap: 14px; }
.help__head > p { color: var(--muted); }
.help__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 28px; }

.story-card {
  background: var(--paper);
  border-radius: 0 40px 40px 40px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(44, 51, 31, 0.1);
  display: flex;
  flex-direction: column;
}
.story-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 74%; }
.story-card__trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 4px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.story-card__trio img { width: 100%; height: 100%; object-fit: cover; }
.story-card__body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.story-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--forest);
}
.story-card__body > p:last-child { font-size: 17px; color: var(--muted); }

/* ---------- Collaboration ---------- */
.collab { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(64px, 8vw, 96px); }
.collab__card {
  background: var(--sage-deep);
  border-radius: 40px;
  padding: clamp(28px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.collab__copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.collab__copy h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--forest);
}
.collab__copy > p:last-child { font-size: 17px; color: var(--muted); }
.collab__photos {
  flex: 1.3 1 440px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.collab__photos img { width: 100%; aspect-ratio: 3 / 4; max-height: 270px; object-fit: cover; border-radius: 22px; }
.collab__photos img:nth-child(2) { margin-top: 28px; }

/* ---------- Get involved ---------- */
.involved { background: var(--forest); color: var(--paper); }
.involved__inner {
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.involved__copy { flex: 1.1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.involved__copy h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.8vw, 66px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.involved__lead { max-width: 32em; font-size: 19px; color: var(--on-dark); }
.involved__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 6px; }
.involved__actions .btn { min-height: 60px; padding: 0 30px; }
.involved__handle { color: var(--paper); font-weight: 500; }

.ways { flex: 1 1 340px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ways li {
  background: var(--paper);
  color: var(--forest);
  border-radius: 0 28px 28px 28px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.ways__icon {
  flex: 0 0 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--butter);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ways__text { display: flex; flex-direction: column; }
.ways__title { font-family: var(--font-display); font-weight: 800; font-size: 21px; }
.ways__sub { font-size: 15px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--cream); }
.site-footer__inner {
  padding-top: 40px;
  padding-bottom: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-footer img { width: 220px; height: auto; }
.site-footer p { font-size: 15px; color: var(--muted); }
.site-footer a { color: var(--forest); font-weight: 700; }

/* ---------- Motion (off with "reduce motion") ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes st-up { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
  @keyframes st-zoom { from { transform: scale(calc(var(--z, 1) * 1.06)); } to { transform: scale(var(--z, 1)); } }

  .hero__img { --z: 1.25; animation: st-zoom 2.6s cubic-bezier(.2, .6, .2, 1) both; }
  .hero__copy > :nth-child(1) { animation: st-up .9s var(--ease) .15s both; }
  .hero__copy > :nth-child(2) { animation: st-up .9s var(--ease) .3s both; }
  .hero__copy > :nth-child(3) { animation: st-up .9s var(--ease) .45s both; }
  .hero__actions { animation: st-up .9s var(--ease) .6s both; }

  @supports (animation-timeline: view()) {
    .values__head,
    .vtc-item,
    .story__body > *,
    .quote__inner > *,
    .people-grid > *,
    .help__head,
    .story-card,
    .collab__card,
    .involved__inner > * {
      animation: st-up linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 50%;
    }
    .vtc-item:nth-child(2),
    .story-card:nth-child(2) { animation-range: entry 12% entry 58%; }
    .vtc-item:nth-child(3) { animation-range: entry 20% entry 66%; }
  }

  .vtc-item,
  .story-card { transition: translate .35s var(--ease), box-shadow .35s; }
  .vtc-item:hover,
  .story-card:hover { translate: 0 -8px; }
  .story-card img { transition: transform .8s var(--ease); }
  .story-card:hover img { transform: scale(1.05); }
  .hero__actions a,
  .involved a { transition: translate .25s, background-color .25s, color .25s; }
  .hero__actions a:hover,
  .involved a:hover { translate: 0 -2px; }
  .hero__actions a svg { transition: translate .25s; }
  .hero__actions a:hover svg { translate: 5px 0; }

  /* lines above Help · Time · Connect draw in from the left, grow on hover */
  @keyframes vtc-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .vtc-item::before { transition: width .5s var(--ease); animation: vtc-line 1s var(--ease) .25s both; }
  .vtc-item:nth-child(2)::before { animation-delay: .4s; }
  .vtc-item:nth-child(3)::before { animation-delay: .55s; }
  .vtc-item:hover::before { width: 60%; }
  @supports (animation-timeline: view()) {
    .vtc-item::before { animation-timeline: view(); animation-range: entry 10% entry 60%; animation-delay: 0s !important; }
  }
}

/* touch devices: the line grows and shrinks as you scroll */
@media (prefers-reduced-motion: no-preference) and (hover: none) {
  @supports (animation-timeline: view()) {
    @keyframes vtc-scroll { 0% { width: 12%; } 50% { width: 72%; } 100% { width: 12%; } }
    .vtc-item::before { transform: none; animation: vtc-scroll linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; animation-delay: 0s !important; }
  }
}