@font-face { font-family: "Modak"; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/modak.ttf') format('truetype'); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/sora-400.ttf') format('truetype'); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/assets/fonts/sora-600.ttf') format('truetype'); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/sora-800.ttf') format('truetype'); }
:root { --sun: #FEB812; --sky: #56B8E8; --cream: #FEE19F; --paper: #FEFEFE; --ink: #242423; }
body, button, input, textarea, select, p, a, label, small, span, .member-intro {
  font-family: Arial, sans-serif; font-weight: 700; letter-spacing: .01em;
}
h1, h2, h3, h4, .story-node strong, .story-focus h3 { font-family: "Modak", "Sora", sans-serif !important; font-weight: 400 !important; letter-spacing: 0 !important; }
.planet-menu { background: #fff; }
.menu-balance { top: 20dvh; width: clamp(110px, 14vw, 270px); height: 60dvh; opacity: 1; }
.menu-balance-left { background: var(--sun); }
.menu-balance-right { background: var(--sky); }
.planet-menu.preview-left .menu-balance-left, .planet-menu.preview-right .menu-balance-right { width: 24vw; opacity: 1; }
.menu-composition { width: min(1100px, 96vw, calc(100dvh - 28px)); }
.menu-composition .menu-sun { background: var(--sun); }
.menu-composition .planet-link { width: 24%; height: 24%; min-height: 0; padding: 18px; align-content: center; gap: 10px; }
.planet-link strong { font-size: 28.784px; line-height: 1.05; letter-spacing: 0; overflow-wrap: normal; }
.planet-link > span { font-size: 19px; letter-spacing: 0; position: absolute; top: 7%; left: 50%; transform: translateX(-50%); }
.menu-composition .menu-sun { width: 240px; height: 240px; padding: 20px; }
.menu-composition .menu-sun img { width: 100%; max-width: 100%; transform: none; }
.planet-menu.is-open .planet-link { filter: none !important; }
.planet-link.tone-sun, .mini-planet.tone-sun { background: var(--sun); color: #48330a; }
.planet-link.tone-sky, .mini-planet.tone-sky { background: var(--sky); color: #103e54; }
.planet-link.tone-sun span, .planet-link.tone-sky span { color: inherit; }
.planet-menu.has-preview .planet-link.is-selected { background: var(--sun); color: #48330a; }
.planet-menu.has-preview .planet-link.tone-sky.is-selected { background: var(--sky); color: #103e54; }
.menu-preview h2 { font-size: 52px; line-height: 1.08; }
.menu-preview > p:not(.eyebrow) { color: #274d49; }
.menu-preview { background: rgba(255,255,255,.94); border-radius: 0; }
#menu-preview-back { border: 0; background: none; color: var(--ink); font-size: 28px; width: 44px; height: 44px; cursor: pointer; }
.team-view { background: #fff; }
body[data-view="trebas-nas"] { overflow: visible; height: auto; min-height: 100dvh; }
body[data-view="trebas-nas"] .portal-header { display: flex; }
body[data-view="trebas-nas"] .view-stage { height: auto; overflow: visible; }
body[data-view="trebas-nas"] .team-view.is-active { display: flex; flex-direction: column; position: relative; width: 100%; height: auto; min-height: 100dvh; padding: 108px 4vw 30px; overflow: hidden; }
.team-member { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 5vw; flex: 1; width: 100%; max-width: 1600px; margin: auto; }
.member-portrait { position: relative; isolation: isolate; margin: 0; width: 100%; aspect-ratio: 1; display: grid; align-items: end; }
.member-portrait::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: color-mix(in srgb, var(--sun) 28%, white); z-index: -1; }
.member-portrait img { width: 100%; height: 100%; max-height: 72dvh; object-fit: contain; object-position: center bottom; mask-image: radial-gradient(ellipse 67% 70% at 50% 38%, #000 67%, transparent 98%); }
.member-copy { padding: 20px 0; }

.member-kicker { color: #806009; font-size: 18px; margin: 0 0 18px; }
.member-copy h1 { font-size: 68px; line-height: 1.07; margin: 0 0 32px; color: #FEB812; overflow-wrap: normal; }
.member-intro { font-family: "Sora", sans-serif; font-size: 19px; line-height: 1.8; }
.member-intro p { margin: 0 0 24px; }
.member-read { border: 0; border-bottom: 2px solid #bd8607; background: none; color: #634907; min-height: 48px; padding: 8px 0; font-weight: 600; cursor: pointer; display: inline-flex; gap: 24px; align-items: center; }
.member-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; align-items: center; margin: 28px 0 0; }
.member-pagination button { min-height: 44px; border: 0; border-bottom: 2px solid transparent; padding: 8px; background: none; color: #566c69; cursor: pointer; }
.member-pagination button[aria-current="true"] { color: #174b46; border-bottom-color: var(--sun); }
.member-pagination [data-member-step] { width: 44px; font-size: 26px; }
.member-dialog { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; margin: 0; padding: 0; background: #feebbd; color: #234a45; overflow: hidden; }
.member-dialog[open] { display: grid; place-items: center;  }
.member-dialog::backdrop { background: transparent; }
.member-story { width: min(100%, 1100px); height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #b18221 transparent; scrollbar-gutter: stable; padding: 16px 64px 64px; font-size: 20px; line-height: 1.85; }
.member-story h2 { font-size: 64px; line-height: 1.1; margin: 16px 0 32px; }
.member-story:has(.privacy-title) { container-type: inline-size; }
.member-dialog .member-story h2.privacy-title { font-size: min(64px,11cqw)!important; }
.member-dialog .privacy-title > span { display: block; white-space: nowrap; overflow-wrap: normal; word-break: normal; font: inherit!important; letter-spacing: 0!important; }
.member-story h3 { font-size: 36px; line-height: 1.3; margin: 44px 0 24px; }
.member-story p { margin: 0 0 24px; }

.member-close, .member-scroll { position: absolute; display: grid; place-items: center; border: 0; background: #fff; color: #234a45; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; cursor: pointer; z-index: 2; }
.member-close { right: 24px; top: 20px; }
.member-scroll { bottom: 14px; left: calc(50% - 24px); }

.member-scroll[hidden] { display: none; }
body[data-view="trebas-nas"] .portal-footer { display: none; }

@media (min-width: 821px) and (max-height: 760px) {
  .menu-composition { width: min(850px, 94vw, 110dvh); }
  .menu-composition .planet-link { width: 23%; height: 23%; padding: 12px; }
  .member-copy h1 { font-size: 52px; }
  .member-intro { font-size: 17px; }
}
@media (max-width: 820px) {
  .planet-menu { overflow-y: auto; }
  .menu-composition { width: min(96vw, 580px); min-height: 660px; aspect-ratio: auto; padding: 110px 10px 24px; }
  .menu-composition .menu-sun { position: absolute; top: 0; left: calc(50% - 60px); width: 120px; height: 120px; padding: 10px; }
  .menu-composition .menu-sun img { width: 100%; }
  .menu-composition .planet-orbit { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px 10px; height: auto; aspect-ratio: auto; align-items: center; }
  .menu-composition .planet-orbit::before, .menu-composition .planet-orbit::after { display: none; }
  .menu-composition .planet-link { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 1; transform: none; padding: 12px 7px; gap: 7px; animation: none; opacity: 1; }
  .planet-menu.is-open .menu-composition .planet-link { animation: none; transform: none; }
  .menu-composition .menu-sun p { display: none; }
  .menu-composition .planet-link:hover, .menu-composition .planet-link:focus-visible, .menu-composition .planet-link.is-selected { transform: scale(1.03); }
  .planet-link strong { font-size: 20.048px; line-height: 1.05; }
  .planet-link > span { font-size: 14px; }
  .menu-balance { top: 22.5dvh; height: 55dvh; width: clamp(38px, 12.5vw, 75px); }
  .planet-menu.has-preview .menu-composition { transform: none; visibility: hidden; }
  .planet-menu.has-preview .menu-preview { position: absolute; top: 50%; bottom: auto; transform: translateY(-50%); }
  .planet-menu.preview-left .menu-balance-left, .planet-menu.preview-right .menu-balance-right { width: 52.5vw; height: 55dvh; opacity: 1; }
  .menu-preview h2 { font-size: 40px; }
  .menu-preview > p:not(.eyebrow) { font-size: 16px; line-height: 1.7; }
  body[data-view="trebas-nas"] .team-view.is-active { padding: 92px 24px 28px; }
  .team-member { grid-template-columns: 1fr; gap: 20px; }
  .member-portrait { max-width: 480px; margin: auto; }
  .member-portrait img { max-height: none; }
  .member-copy { padding: 0; }
  .member-copy h1 { font-size: 46px; margin-bottom: 24px; }
  .member-intro { font-size: 17px; line-height: 1.8; }
  .member-pagination { gap: 8px; }
  .member-pagination [data-member-index] { font-size: 13px; }
  .member-story { height: calc(100dvh - 140px); padding: 8px 24px 40px; font-size: 17px; line-height: 1.85; }
  .member-story h2 { font-size: 44px; }
  .member-story h3 { font-size: 30px; }
}
@media (max-width: 360px) { .planet-link strong { font-size: 18.032px; } .member-copy h1 { font-size: 40px; } }
@media (prefers-reduced-motion: reduce) { .member-dialog[open], .member-dialog[open] .member-story, .member-scroll span, .team-view.is-active .member-portrait, .team-view.is-active .member-copy { animation: none; } }

/* Shared soft background and circular layouts. */
:root {
  --portal-background: radial-gradient(ellipse at 18% 28%, #f9cf8f99, transparent 48%), radial-gradient(ellipse at 80% 66%, #74bee080, transparent 48%), radial-gradient(ellipse at 58% 8%, #a3d7ed66, transparent 42%), radial-gradient(ellipse at 42% 95%, #f6be7566, transparent 48%), linear-gradient(125deg, #fff2dd, #edf7fa 55%, #f8e8d0);
}
.portal-view, .team-view, .home-view { background: transparent; }
.menu-balance-left { background: #fbe4af; }
.menu-balance-right { background: #c5e6f4; }
.planet-orbit::before, .planet-orbit::after { display: none; }
.planet-link strong, .mini-planet.tone-sun, .mini-planet.tone-sky { color: #FEFEFE; }

@keyframes menu-circle-pulse { 0%, 100% { scale: .97; } 50% { scale: 1.055; } }
.planet-link::before { display: none; }
.planet-menu .menu-preview {
  width: min(54vw, 108dvh); height: min(54vw, 108dvh);
  border-radius: 50%; background: #fbe4af;
  padding: min(11vw, 22dvh); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.planet-menu.preview-tone-sky .menu-preview { background: #c5e6f4; }
.planet-menu.preview-tone-sun .menu-preview h2 { color: #56B8E8; }
.planet-menu.preview-tone-sky .menu-preview h2 { color: #FEB812; }
.planet-menu.preview-left .menu-preview { left: -9vw; }
.planet-menu.preview-right .menu-preview { left: auto; right: -9vw; }
.planet-menu.preview-left .menu-balance-left, .planet-menu.preview-right .menu-balance-right {
  width: min(54vw, 108dvh); height: min(54vw, 108dvh); top: 50%; transform: translateY(-50%); border-radius: 50%;
}

.menu-preview h2 { flex-shrink: 0; }
body[data-view="trebas-nas"] .portal-header { justify-content: flex-end; }
body[data-view="trebas-nas"] .header-actions { display: none; }
body[data-view="trebas-nas"] .team-view.is-active { padding: 100px 8vw 28px 2.5vw; }
.team-member { max-width: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2vw; }
.member-portrait { border-radius: 50%; overflow: hidden; background: #fbe4af; }
.member-portrait::before { display: none; }
.member-portrait img { max-height: none; aspect-ratio: 1; object-fit: contain; mask-image: none; }
.member-placeholder { place-self: center; font-size: 64px; opacity: .3; }
.member-pagination { position: fixed; right: 2.5vw; top: 60%; transform: translateY(-50%); margin: 0; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.member-pagination [data-member-index] { width: 24px; height: 24px; min-height: 24px; border: 0; padding: 8px; }
.member-pagination [data-member-index]::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: #174b4660; }
.member-pagination [aria-current="true"]::before { background: var(--sun); scale: 1.35; }
.member-pagination [data-member-step] { position: fixed; right: 0; top: -85px; width: 48px; height: 48px; font-size: 36px; border: 0; padding: 0; }
.member-pagination [data-member-step="-1"] { top: -140px; }
.member-pagination [data-member-step] span { display: inline-block; animation: member-arrow-nudge 2.4s ease-in-out infinite; }
@keyframes member-arrow-nudge { 50% { transform: translateX(5px); } }
@media (max-width: 820px) {
  .planet-menu .menu-preview { width: 110vw; height: 110vw; padding: 18vw; min-height: 0; }
  .planet-menu.preview-left .menu-preview { left: -5vw; }
  .planet-menu.preview-right .menu-preview { left: auto; right: -5vw; }
  .menu-preview h2 { font-size: clamp(28px, 8vw, 40px); margin: 8px 0 12px; }
  .menu-preview > p:not(.eyebrow) { font-size: 14px; line-height: 1.5; }
  .menu-preview a { margin-top: 12px; }
  body[data-view="trebas-nas"] .team-view.is-active { padding: 90px 54px 28px 18px; }
  .team-member { grid-template-columns: 1fr; }
  .member-pagination { right: 12px; }
  .planet-menu.is-open .menu-composition .planet-link { animation: menu-circle-pulse 3.8s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .planet-menu.is-open .menu-composition .planet-link, .member-pagination [data-member-step] span { animation: none; }
}
@media (min-width: 821px) {
  .planet-menu.preview-left .menu-preview { padding-left: 18vw; padding-right: 8vw; }
  .planet-menu.preview-right .menu-preview { padding-left: 8vw; padding-right: 18vw; }
}
@media (max-width: 820px) {
  .planet-menu.preview-left .menu-preview, .planet-menu.preview-right .menu-preview { padding: 16vw; text-align: left; }
  
}
/* One persistent circle per side; the preview contains only text. */
.planet-menu .menu-preview, .planet-menu.preview-tone-sky .menu-preview { background: transparent; }
.menu-balance {
  top: 50%; width: 60dvh; height: 60dvh; border-radius: 50%;
  transform: translateY(-50%); opacity: 1;
  transition: width 1200ms ease-in-out, height 1200ms ease-in-out, left 1200ms ease-in-out, right 1200ms ease-in-out;
}
.menu-balance-left { left: -30dvh; }
.menu-balance-right { right: -30dvh; }
.planet-menu.preview-left .menu-balance-left, .planet-menu.preview-right .menu-balance-right {
  width: min(54vw, 108dvh); height: min(54vw, 108dvh);
}
.planet-menu.preview-left .menu-balance-left { left: -9vw; }
.planet-menu.preview-right .menu-balance-right { right: -9vw; }
.menu-composition { transition: transform 1200ms ease-in-out; }
.planet-menu .menu-preview { transition: opacity 300ms ease; }
.planet-menu.preview-left .menu-preview, .planet-menu.preview-right .menu-preview { transform: translateY(-50%); }
.planet-menu.preview-left .menu-preview { padding: 8vw 7vw 8vw 12vw; }
.planet-menu.preview-right .menu-preview { padding: 8vw 12vw 8vw 7vw; }
.menu-preview h2 { font-size: clamp(48px, 4.4vw, 84px); max-width: none; margin: 16px 0 28px; }
.menu-preview > p:not(.eyebrow) { font-size: clamp(18px, 1.4vw, 27px); line-height: 1.7; max-width: none; }
.menu-preview a { font-size: clamp(18px, 1.25vw, 24px); margin-top: 32px; }
.planet-menu.is-open .planet-link { animation: menu-circle-pulse 3.8s ease-in-out infinite; }
button, a { transition: color 220ms ease, background-color 220ms ease, opacity 220ms ease, box-shadow 220ms ease, scale 220ms ease; }
button:hover, a:hover { filter: brightness(.94); }
button:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

.member-pagination button:hover, .member-close:hover, .member-scroll:hover, #menu-preview-back:hover { scale: 1.12; }
.portal-mark:hover { scale: 1.06; }
@media (max-width: 820px) {
  .planet-menu.preview-left .menu-preview, .planet-menu.preview-right .menu-preview { padding: 16vw; }
  .planet-menu.preview-left .menu-balance-left, .planet-menu.preview-right .menu-balance-right { width: 110vw; height: 110vw; }
  .planet-menu.preview-left .menu-balance-left { left: -5vw; }
  .planet-menu.preview-right .menu-balance-right { right: -5vw; }
  .menu-preview h2 { font-size: 34px; margin: 8px 0 14px; }
  .menu-preview > p:not(.eyebrow) { font-size: 15px; line-height: 1.5; }
  .menu-preview a { font-size: 17px; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .planet-menu.is-open .planet-link { animation: none; }
  .menu-balance, .menu-composition { transition: none; }
}
body, .planet-menu, .intro-stage, .member-dialog { background: var(--portal-background); background-attachment: fixed; }
.planet-menu.is-open .planet-link { opacity: 1; transform: translate(-50%, -50%); box-shadow: none; }
.planet-menu.has-preview .planet-link:not(.is-selected) { opacity: 1; }
button, a { transition-property: color, background-color, opacity, box-shadow, scale, filter; }
@media (max-width: 820px) { .planet-menu.is-open .menu-composition .planet-link { transform: none; } }

/* Text enters only after the persistent side balloon has finished growing. */
.planet-menu .menu-preview > * { visibility: hidden; opacity: 0; translate: -70px 0; transition: none; }
.planet-menu.preview-right .menu-preview > * { translate: 70px 0; }
.planet-menu.preview-text-ready .menu-preview > * {
  visibility: visible; opacity: 1; translate: 0 0;
  transition: translate 1400ms cubic-bezier(.2,.7,.2,1), opacity 1000ms ease;
}
.route-balloon { position: fixed; inset: 0; z-index: 10000; background: var(--portal-background); pointer-events: auto; }
button .letter-wipe, a .letter-wipe {
  color: var(--letter-color) !important;
  font: inherit; letter-spacing: inherit;
  background: linear-gradient(90deg, var(--letter-hover-color, #177faf) 0%, var(--letter-hover-color, #177faf) 50%, var(--letter-color) 50%, var(--letter-color) 100%);
  background-size: 200% 100%; background-position: 100% 0;
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  transition: background-position 1100ms ease;
}
button:hover .letter-wipe, a:hover .letter-wipe,
button:focus-visible .letter-wipe, a:focus-visible .letter-wipe { background-position: 0 0; }
button:hover, a:hover { filter: none; }
.member-read:hover, #menu-preview-link:hover { background-color: transparent; }
body .team-view .member-read:is(:hover,:focus-visible) { color: var(--circle-orange)!important; border-bottom-color: var(--circle-orange)!important; }
body .team-view .member-read .letter-wipe { --letter-hover-color: var(--circle-orange)!important; }
.planet-link strong .letter-wipe { --letter-color: #FEFEFE !important; }
@media (prefers-reduced-motion: reduce) {
  .planet-menu.preview-text-ready .menu-preview > *, .letter-wipe { transition: none; }
}

/* Opposing entrances when selecting another member. */
.member-changing .member-portrait { animation: member-image-enter 3000ms cubic-bezier(.2,.7,.2,1) both; }
.member-changing .member-copy { animation: member-text-enter 3000ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes member-image-enter {
  from { opacity: 0; transform: translateX(-90px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes member-text-enter {
  from { opacity: 0; transform: translateX(90px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .member-changing .member-portrait, .member-changing .member-copy { animation: none; }
}

/* Intro: white globe, five single appearances, then the full-size brand mark. */
.intro-stage { --intro-globe-size: min(48vw, 54dvh, 560px); }
.intro-stage .earth-stage, .intro-stage .logo-stage {
  position: absolute; left: 50%; top: 50%; width: var(--intro-globe-size); height: var(--intro-globe-size);
  min-width: 0; transform: translate(-50%, -50%); margin: 0;
}
.intro-stage .logo-stage { padding: 14%; padding: calc(var(--intro-globe-size) * .12); background: var(--sun); opacity: 0; clip-path: circle(0%); filter: none; box-shadow: none; transition: clip-path 1200ms ease, opacity 600ms ease; }
.intro-stage .logo-stage img { width: 100%; }
.intro-logo .intro-stage .logo-stage { opacity: 1; clip-path: circle(71%); transform: translate(-50%, -50%); }
.intro-logo .intro-stage .earth-stage { opacity: 1; filter: none; transform: translate(-50%, -50%); }
.intro-words { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.intro-word { position: absolute; font-family: 'Modak', sans-serif; font-size: clamp(40px, 6vw, 100px); line-height: 1; opacity: 0; transition: opacity 1200ms ease; color: var(--sun); }
.intro-word.is-visible { opacity: 1; }
.word-sun { left: 9%; top: 12%; }
.word-water { right: 8%; top: 23%; color: var(--sky); }
.word-air { left: 6%; top: 62%; color: var(--sky); }
.word-soil { right: 10%; top: 66%; }
.word-optimism { left: 50%; bottom: 12%; transform: translateX(-50%); white-space: nowrap; }
.intro-stage .intro-next, .intro-stage .intro-next:hover, .intro-stage .intro-next:focus-visible {
  width: auto; height: auto; min-height: 44px; padding: 6px 0; border-radius: 0; border-bottom: 2px solid currentColor;
  font-family: 'Modak', sans-serif; font-size: 22px; font-weight: 400; color: var(--ink);
  background: transparent; box-shadow: none; transform: none;
}
@media (max-width: 820px) {
  .intro-stage { --intro-globe-size: min(64vw, 38dvh); }
  .intro-word { font-size: clamp(36px, 8vw, 64px); }
  .word-sun { left: 8%; top: 10%; }
  .word-water { right: 8%; top: 23%; }
  .word-air { left: 6%; top: auto; bottom: 27%; }
  .word-soil { right: 8%; top: auto; bottom: 24%; }
  .word-optimism { bottom: 16%; }
  .intro-stage .intro-next { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .intro-word, .intro-stage .logo-stage { transition: none; } }