/* =========================================================
   OUR VISION (about)
   ========================================================= */

/* ---------- 1 · hero ---------- */
.vhero__pin { position: relative; height: 100svh; overflow: hidden; }
.vhero__media, .vhero__shade { position: absolute; inset: 0; }
.vhero__media { clip-path: inset(20% 4% 10% 53% round 22px); will-change: clip-path; } /* top aligns with the headline */
.vhero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
/* desktop: shift the photo so the courtyard, not a plain wall, sits in the frame; it glides back as the frame opens */
@media (min-width: 768px) { .vhero__media img { transform: translateX(26%) scale(1.12); } }
.vhero__shade { background: linear-gradient(180deg, rgba(36, 35, 35, 0.55), transparent 45%, rgba(36, 35, 35, 0.5)); opacity: 0; pointer-events: none; }
.vhero__copy { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 5vh); display: grid; gap: 22px; }
.vhero__title { font-size: clamp(44px, 7vw, 124px); font-weight: 300; line-height: 0.98; letter-spacing: -0.03em; max-width: min(14ch, 47vw); }
/* sits on the frame's bottom edge from the start, so the lower-left isn't empty */
.vhero__caption { position: absolute; left: 0; right: 0; bottom: 10%; z-index: 2; letter-spacing: 0.28em; }
.vhero__caption span { opacity: 0.5; margin-inline: 0.5em; }

/* ---------- 2 · founders ---------- */
.founders__grid { display: grid; grid-template-columns: 1fr 2.2fr; gap: 32px; }
.founders__body { display: grid; gap: clamp(48px, 6vw, 88px); justify-items: start; }
.founders__lead { font-size: clamp(28px, 3.6vw, 60px); line-height: 1.12; letter-spacing: -0.02em; }
.founders__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; width: 100%; }
.founders .stat i { display: block; height: 1px; background: var(--line-dark); margin-bottom: 22px; }
.founders .stat__num { font-size: clamp(56px, 6vw, 108px); line-height: 1; letter-spacing: -0.04em; margin-bottom: 12px; }
.founders .stat .label { opacity: 0.65; line-height: 1.5; max-width: 24ch; }

/* ---------- 3 · pillars ---------- */
.pillars { background: var(--ink); padding-block: clamp(96px, 12vw, 180px); }
.pillars__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 120px); }
.pillars__side { position: sticky; top: calc(var(--header-h) + 6vh); align-self: start; display: grid; gap: 28px; }
.pillars__words { height: 1.1em; overflow: hidden; font-size: clamp(40px, 4.8vw, 92px); line-height: 1.1; letter-spacing: -0.03em; }
.pillars__track { display: grid; will-change: transform; }
.pillars__track span { height: 1.1em; }
.pillars__meter { height: 1px; background: var(--line-light); position: relative; max-width: 360px; }
.pillars__meter i { position: absolute; inset: 0; background: var(--brick); transform-origin: 0 50%; transform: scaleX(0); }
.pillars__chapters { display: grid; gap: clamp(120px, 18vh, 220px); }
.chapter { display: grid; gap: 22px; }
.chapter__tag { opacity: 0.6; }
.chapter__media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.chapter__media img { position: relative; top: -9%; width: 100%; height: 118%; object-fit: cover; } /* headroom for parallax */
.chapter__title { font-size: clamp(28px, 2.8vw, 46px); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; margin-top: 12px; }
.chapter p:not(.label) { opacity: 0.8; max-width: 56ch; }

/* ---------- 4 · principles ---------- */
.principles__head { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-bottom: clamp(48px, 6vw, 90px); }
.principles__head .h2 { max-width: 16ch; }
.principles__list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.principle {
  display: grid; align-content: start; gap: 14px; min-height: 340px;
  padding: clamp(22px, 2vw, 32px); border-radius: var(--radius);
  background: rgba(36, 35, 35, 0.28); border: 1px solid var(--line-light);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 0.7s var(--ease-out), background 0.5s;
}
.principle:hover { transform: translateY(-10px); background: rgba(36, 35, 35, 0.5); }
.principle__num { font-size: clamp(44px, 4vw, 72px); line-height: 1; letter-spacing: -0.04em; margin-bottom: auto; padding-bottom: 36px; transition: color 0.5s; }
.principle:hover .principle__num { color: var(--terra); }
.principle h3 { font-size: clamp(20px, 1.6vw, 26px); font-weight: 400; line-height: 1.2; }
.principle p { font-size: 15px; line-height: 1.6; opacity: 0.9; }
.principles__quote { margin-top: clamp(64px, 8vw, 120px); font-size: clamp(26px, 3.2vw, 54px); line-height: 1.15; letter-spacing: -0.02em; max-width: 24ch; }

/* ---------- 5 · story ---------- */
.story { overflow: hidden; }
.story .wrap { display: grid; gap: clamp(28px, 4vw, 56px); }
.story__text { font-size: clamp(30px, 4.4vw, 76px); line-height: 1.08; letter-spacing: -0.02em; max-width: 22ch; }
.story__sub { max-width: 52ch; font-size: clamp(17px, 1.3vw, 20px); opacity: 0.75; }
.story__marquee {
  margin-top: clamp(72px, 9vw, 140px); font-size: clamp(56px, 9vw, 170px); line-height: 1.05; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(36, 35, 35, 0.45);
}
.story__marquee i { -webkit-text-stroke: 0; color: var(--brick); }

/* ---------- 6 · cta ---------- */
.page-about .cta { background: var(--ink); }

@media (max-width: 767px) {
  .vhero__media { clip-path: inset(48% 6% 8% 6% round 16px); }
  .vhero__caption { bottom: clamp(24px, 4vh, 40px); opacity: 0; } /* phones: the frame fills the lower half */
  .vhero__title { max-width: none; } /* the frame sits below the text here, not beside it */
  .founders__grid, .pillars__grid, .principles__head { grid-template-columns: 1fr; }
  .founders__stats { grid-template-columns: 1fr 1fr; }
  .founders__stats .stat:last-child { grid-column: 1 / -1; }
  .pillars__side { display: none; }
  .principles__list { grid-template-columns: 1fr; }
  .principle { min-height: 0; }
}