/* About: a human story in photographs and generous space. */
.about-opening { position: relative; isolation: isolate; height: min(820px, 92svh); min-height: 620px; overflow: hidden; background: #183a2c; color: #fff; }
.about-opening > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; z-index: -2; }
.about-opening-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.25) 54%,rgba(0,0,0,.08)); }
.inner-page:has(.about-opening) .nav:not(.is-scrolled):not(.is-menu-open) { background: transparent; border-color: transparent; backdrop-filter: none; }
.inner-page:has(.about-opening) .nav:not(.is-scrolled):not(.is-menu-open) .logo { --logo-text: #fff; }
.inner-page:has(.about-opening) .nav:not(.is-scrolled):not(.is-menu-open) .nav-links a, .inner-page:has(.about-opening) .nav:not(.is-scrolled):not(.is-menu-open) .lang summary, .inner-page:has(.about-opening) .nav:not(.is-scrolled):not(.is-menu-open) .menu-toggle { color: #fff; }
.about-opening-content { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 80px; }
.about-opening h1 { max-width: 900px; font: 500 clamp(48px,6.5vw,88px)/1.04 var(--display); letter-spacing: -.05em; }
.about-opening-content > p { max-width: 440px; margin: 30px 0 0; font-size: 19px; line-height: 1.6; }
.about-button { display: inline-flex; align-items: center; gap: 18px; padding: 16px 23px; min-height: 52px; margin-top: 30px; border-radius: 999px; background: #fff; color: var(--deep); font: 500 15px/1.2 var(--display); text-decoration: none; transition: background-color .2s; }
.about-button:hover { background: var(--lime); }
.about-button svg { width: 20px; height: 20px; }
.about-purpose { padding-block: 130px; text-align: center; }
.about-purpose h2, .about-story-copy h2, .about-invest h2 { font: 500 clamp(38px,4.5vw,62px)/1.08 var(--display); letter-spacing: -.045em; }
.about-purpose h2 span { color: var(--forest); }
.about-purpose > p { max-width: 580px; margin: 30px auto 0; font-size: 19px; line-height: 1.65; color: var(--forest); }
.about-stories { display: grid; gap: 110px; }
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px,7vw,110px); align-items: center; }
.about-story-photo { position: relative; height: 570px; overflow: hidden; border-radius: 28px; background: #fff; }
.about-story-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.about-story-reverse .about-story-photo { grid-column: 2; grid-row: 1; }
.about-story-reverse .about-story-copy { grid-column: 1; grid-row: 1; }
.about-story-copy p { max-width: 440px; margin-top: 26px; color: var(--forest); font-size: 18px; line-height: 1.65; }
.about-question { position: absolute; left: 24px; right: 24px; bottom: 24px; padding: 23px; border-radius: 20px; background: #fff; color: var(--deep); }
.about-question svg { width: 35px; height: 27px; float: right; }
.about-question p { max-width: 330px; font: 500 23px/1.25 var(--display); letter-spacing: -.03em; }
.about-stories + .founder-sec { padding-top: 145px; }
.inner-page .team-sec .team-header { justify-content: center; text-align: center; }
.inner-page .team-sec .team-header h2 { font: 500 clamp(38px,4.5vw,62px)/1.08 var(--display); letter-spacing: -.045em; }
.inner-page .team-sec .team-grid { max-width: 1120px; margin: 56px auto 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(20px,3vw,40px); }
.inner-page .team-sec .member { gap: 0; }
.inner-page .team-sec .member-photo-wrap { margin-bottom: 21px; }
.inner-page .team-sec .member img { aspect-ratio: 1; object-fit: cover; border-radius: 22px; filter: none; }
.inner-page .team-sec .member b { padding-right: 48px; font: 500 clamp(20px,2vw,25px)/1.2 var(--display); letter-spacing: -.03em; }
.inner-page .team-sec .member > span { margin-top: 8px; padding-right: 48px; font-size: 15px; }
.inner-page .team-sec .member-in { width: 40px; height: 40px; right: 0; bottom: 0; box-shadow: none; background: #f5f6f5; color: var(--deep); backdrop-filter: none; }
.inner-page .team-sec .member-in:hover, .inner-page .team-sec .member-in:focus-visible { background: var(--deep); color: #fff; transform: none; }
.inner-page .team-sec .member-in:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.team-invitation { max-width: 1120px; margin: 65px auto 0; padding: 32px 0 0; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.team-invitation h3 { font: 500 clamp(24px,2.3vw,31px)/1.2 var(--display); letter-spacing: -.035em; }
.team-invitation p { margin-top: 11px; max-width: 500px; font-size: 16px; line-height: 1.55; color: var(--forest); }
.team-invitation a { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 17px 22px; border-radius: 999px; background: var(--deep); color: #fff; font: 500 15px/1.2 var(--display); text-decoration: none; transition: background-color .2s,color .2s; }
.team-invitation a:hover { background: var(--lime); color: var(--deep); }
.team-invitation a svg { width: 20px; height: 20px; }
.about-invest { position: relative; isolation: isolate; min-height: 560px; overflow: hidden; border-radius: 28px; display: flex; align-items: center; margin-bottom: 100px; color: #fff; }
.about-invest-image, .about-invest-shade { position: absolute; inset: 0; z-index: -2; }
.about-invest-image img { width: 100%; height: 100%; object-fit: cover; }
.about-invest-shade { z-index: -1; background: linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.12)); }
.about-invest-content { max-width: 650px; padding: 65px clamp(30px,5vw,72px); }
.about-invest-content > p { max-width: 430px; margin-top: 24px; font-size: 18px; line-height: 1.6; }
@media (max-width: 820px) {
  .about-opening { min-height: 640px; height: 85svh; }
  .about-opening > img { object-position: 55% center; }
  .about-opening-shade { background: linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.16) 80%); }
  .about-opening-content { justify-content: flex-end; padding-bottom: 60px; }
  .about-purpose { padding-block: 85px; }
  .about-stories { gap: 72px; }
  .about-story { grid-template-columns: 1fr; gap: 28px; }
  .about-story-reverse .about-story-photo, .about-story-reverse .about-story-copy { grid-column: auto; grid-row: auto; }
  .about-story-photo { height: 500px; }
  .about-stories + .founder-sec { padding-top: 85px; }
  .about-invest { min-height: 480px; margin-bottom: 60px; }
}
@media (max-width: 600px) {
  .about-opening { height: 86svh; min-height: 600px; }
  .about-opening h1 { font-size: clamp(43px,10vw,58px); }
  .about-opening-content > p, .about-purpose > p, .about-story-copy p, .about-invest-content > p { font-size: 16px; }
  .about-story-photo { height: 430px; border-radius: 22px; }
  .about-question { left: 16px; right: 16px; bottom: 16px; padding: 18px; }
  .about-question p { font-size: 20px; }
  .about-invest { border-radius: 22px; min-height: 460px; }
  .about-invest-content { padding: 35px 26px; }
  .inner-page .team-sec .team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 16px; margin-top: 36px; }
  .inner-page .team-sec .member-photo-wrap { margin-bottom: 14px; }
  .inner-page .team-sec .member img { border-radius: 16px; }
  .inner-page .team-sec .member b { font-size: 18px; }
  .inner-page .team-sec .member > span { font-size: 13px; margin-top: 5px; }
  .inner-page .team-sec .member-in { width: 36px; height: 36px; right: 0; bottom: 0; }
  .team-invitation { margin-top: 45px; align-items: flex-start; flex-direction: column; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { .about-button, .team-invitation a { transition: none; } }

/* New photography is cropped for the people, rather than the old placeholders. */
.about-opening > img { object-position: center 48%; }
.about-invest-image img { object-position: center top; }
.about-story:first-child .about-story-photo img { object-position: center 38%; }
@media (max-width:820px) { .about-opening > img { object-position: 68% center; } }

/* Mobile reading order and a balanced team list. */
@media (max-width: 600px) {
 .about-opening { min-height: 560px; height: 90svh; }
 .about-opening-content { padding-bottom: 36px; }
 .about-purpose { padding-block: 56px; }
 .about-purpose > p { margin-top: 22px; }
 .about-stories { gap: 56px; }
 .about-story { gap: 24px; }
 .about-story-copy { grid-row: 1; }
 .about-story-reverse .about-story-copy { grid-row: 1; }
 .about-story-photo { height: 340px; }
 .about-story-copy p { margin-top: 18px; }
 .about-stories + .founder-sec { padding-top: 56px; }
 .inner-page .team-sec .team-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
 .inner-page .team-sec .member { display: grid; grid-template-columns: 104px minmax(0,1fr) 40px; grid-template-rows: 1fr 1fr; align-items: center; gap: 0 18px; }
 .inner-page .team-sec .member-photo-wrap { grid-row: 1 / 3; margin: 0; }
 .inner-page .team-sec .member b { grid-column: 2; grid-row: 1; align-self: end; padding: 0; font-size: 19px; }
 .inner-page .team-sec .member > span { grid-column: 2; grid-row: 2; align-self: start; padding: 0; margin-top: 8px; font-size: 13px; }
 .inner-page .team-sec .member-in { position: static; grid-column: 3; grid-row: 1 / 3; width: 40px; height: 40px; }
 .team-invitation { margin-top: 36px; padding-top: 24px; }
 .about-invest { min-height: 410px; margin-bottom: 48px; }
 .about-app-screen.about-story-photo { --about-capture-height: 380px; }
}
@media (max-width: 360px) {
 .inner-page .team-sec .member { grid-template-columns: 88px minmax(0,1fr) 36px; gap: 0 12px; }
 .inner-page .team-sec .member b { font-size: 17px; }
}
/* Show personal controls as a readable interface, rather than another feed demo. */
.about-ritual-interface { grid-column:2; grid-row:1; padding:48px 32px; background:#fafbfa; border:1px solid #e1e8e3; border-radius:28px; }
.about-ritual-interface img { display:block; width:100%; height:auto; border-radius:18px; }
@media(max-width:820px) { .about-ritual-interface { grid-column:auto; grid-row:auto; padding:32px 20px; } }
@media(max-width:600px) { .about-ritual-interface { padding:24px 16px; } }