/* =========================================================
   MISSION, VISION & VALUES page — builds on styles.css
   A slightly more editorial feel: dark hero, oversized
   statements, numbered values with a sticky side column.
   ========================================================= */

/* ---------- Hero ---------- */
.mvhero { background: var(--charcoal); color: var(--ivory); padding: clamp(160px, 20vw, 240px) 0 clamp(70px, 9vw, 120px); }
.mvhero__title { font-weight: 900; font-size: clamp(3.2rem, 9vw, 9rem); line-height: .9; letter-spacing: -.05em; max-width: 13ch; }
.mvhero__title .w--accent { color: var(--sage); font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* ---------- Vision / Mission / Culture ---------- */
.mvtrio { background: var(--charcoal); color: var(--ivory); padding-bottom: clamp(80px, 11vw, 150px); }
.mvrow { display: grid; grid-template-columns: 220px 1fr; gap: clamp(20px, 4vw, 60px); align-items: baseline; padding: clamp(34px, 4.6vw, 60px) 0; border-top: 1px solid rgba(244, 240, 231, .16); }
.mvrow:last-child { border-bottom: 1px solid rgba(244, 240, 231, .16); }
.mvrow__label { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.mvrow__label span { display: inline-block; margin-right: 10px; color: rgba(244, 240, 231, .5); }
.mvrow__text { font-weight: 900; font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: -.04em; max-width: 20ch; }
.mvrow__text em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--sage); letter-spacing: -.01em; }

/* ---------- Marquee ---------- */
.mvmarquee { background: var(--forest); color: var(--ivory); overflow: hidden; padding: 22px 0; }
.mvmarquee__track { display: flex; align-items: center; gap: 30px; width: max-content; animation: mvmarq 45s linear infinite; }
.mvmarquee span { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.6rem); white-space: nowrap; }
.mvmarquee b { color: var(--sage); font-size: 1.1rem; }
@keyframes mvmarq { to { transform: translateX(-50%); } }

/* ---------- Values ---------- */
.mvvalues__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.mvvalues__sticky { position: sticky; top: 110px; }
.mvvalues__sticky h2 { margin-bottom: 20px; font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
.mvvalues__sticky h2 em { white-space: nowrap; }
.mvvalues__photo { margin-top: 28px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3.4; max-width: 460px; }
.mvvalues__photo img { width: 100%; height: 100%; object-fit: cover; }
.mvslides { position: relative; aspect-ratio: 1000 / 850; }
.mvslides img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.mvslides img.is-on { opacity: 1; }
.mvlist { list-style: none; margin: 0; padding: 0; }
.mvvalue { border-top: 1px solid var(--line); }
.mvvalue:last-child { border-bottom: 1px solid var(--line); }
.mvvalue summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(22px, 2.8vw, 34px) 56px clamp(22px, 2.8vw, 34px) 0;
}
.mvvalue summary::-webkit-details-marker { display: none; }
.mvvalue__num { flex: 0 0 clamp(44px, 5vw, 64px); font-family: var(--font-serif); font-style: italic; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1; color: var(--forest); }
.mvvalue h3 { font-weight: 900; font-size: clamp(1.7rem, 2.8vw, 2.6rem); letter-spacing: -.04em; line-height: 1; margin: 0; transition: color .25s; }
.mvvalue summary:hover h3 { color: var(--forest); }
.mvvalue__toggle {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--cream);
  transition: background .3s, transform .4s var(--ease);
}
.mvvalue__toggle::before, .mvvalue__toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  background: var(--forest); border-radius: 2px; transition: transform .4s var(--ease), background .3s;
}
.mvvalue__toggle::after { transform: rotate(90deg); }
.mvvalue details[open] .mvvalue__toggle { background: var(--forest); transform: translateY(-50%) rotate(180deg); }
.mvvalue details[open] .mvvalue__toggle::before, .mvvalue details[open] .mvvalue__toggle::after { background: var(--white); }
.mvvalue details[open] .mvvalue__toggle::after { transform: rotate(0deg); }
.mvvalue p {
  margin: 0; padding: 0 56px clamp(26px, 3vw, 36px) calc(clamp(44px, 5vw, 64px) + clamp(18px, 2.4vw, 32px));
  color: var(--ink-soft); max-width: 70ch;
}
.mvvalue details[open] p { animation: mvopen .45s var(--ease); }
@keyframes mvopen { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 560px) { .mvvalue p { padding-left: 0; padding-right: 0; } }

/* ---------- Culture statement ---------- */
.mvculture { background: var(--cream); padding: clamp(90px, 13vw, 180px) 0; text-align: center; }
.mvculture__title { font-weight: 900; font-size: clamp(2.8rem, 8vw, 8rem); line-height: .94; letter-spacing: -.05em; max-width: 13ch; margin: 0 auto; }
.mvculture__title .w--accent { color: var(--forest); }

/* ---------- Creeds ---------- */
.mvcreeds__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.mvcreeds__grid h2 { margin-bottom: 20px; }
.mvcreeds__grid .lede { max-width: 46ch; }
.mvcreeds__cards { display: grid; gap: 16px; }
.mvcreed {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 20px;
  padding: clamp(24px, 3vw, 36px); border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--stone); text-decoration: none; color: var(--charcoal);
  transition: background .35s, color .35s, border-color .35s, transform .5s var(--ease);
}
.mvcreed:hover { background: var(--forest); border-color: var(--forest); color: var(--ivory); transform: translateY(-3px); }
.mvcreed__tag { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--forest); transition: color .35s; }
.mvcreed:hover .mvcreed__tag { color: var(--sage); }
.mvcreed h3 { font-weight: 900; font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing: -.035em; line-height: 1; }
.mvcreed__link { font-family: var(--font-display); font-weight: 700; font-size: 14px; white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .mvrow { grid-template-columns: 1fr; gap: 14px; }
  .mvvalues__grid, .mvcreeds__grid { grid-template-columns: 1fr; }
  .mvvalues__sticky { position: static; }
  .mvvalues__photo { max-width: none; }
}
@media (max-width: 560px) { .mvcreed { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mvmarquee__track { animation: none; } }