:root {
  color-scheme: light;
  --background: #f2f2f2;
  --foreground: #385950;
  --brand: #385950;
  --brand-hover: #2e4a42;
  --secondary-text: #385950;
  --teal-surface: #f2f2f2;
  --mint-gradient: linear-gradient(135deg, #ffffff 0%, #f5f5f5 34%, #e9e9e9 70%, #f2f2f2 100%);
  --local-nav-height: 48px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--local-nav-height); }
body { margin: 0; background: var(--background); color: var(--foreground); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--brand); outline-offset: 5px; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 30; padding: 12px 18px; background: white; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.global-header { position: sticky; top: 0; z-index: 20; height: var(--local-nav-height); background: #ffffff; border-bottom: 1px solid rgb(56 89 80 / 7%); }
.global-nav { width: min(1480px, calc(100% - 24px)); margin: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.brand { width: 150px; height: 37px; display: flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3vw, 58px); margin-inline: auto; white-space: nowrap; }
.nav-links a { color: var(--brand); font-size: 16px; line-height: 1; letter-spacing: .005em; transition: opacity .2s ease; }
.nav-links a:hover { opacity: .65; }
.nav-actions { display: flex; align-items: center; gap: 21px; color: var(--brand); flex: 0 0 auto; }
.icon-button, .language-button { display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; }
.icon-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.language-button { gap: 9px; font-size: 16px; }
.language-button > svg:first-child { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.language-button .chevron { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feature-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; border-radius: 999px; color: #fff; background: var(--brand); padding: 14px 26px; font-size: 16px; line-height: 1.25; white-space: nowrap; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; cursor: pointer; }
.feature-button:hover { background: var(--brand-hover); box-shadow: 0 5px 16px rgb(54 84 70 / 10%); }
.feature-button:active { transform: scale(.975); }
.hero { position: relative; isolation: isolate; height: calc(100svh - var(--local-nav-height)); min-height: calc(100svh - var(--local-nav-height)); max-height: none; overflow: hidden; background: var(--teal-surface); }
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--mint-gradient); }
.hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgb(242 242 242 / 0%) 59%, rgb(242 242 242 / 15%) 67%, rgb(242 242 242 / 88%) 87%, var(--background) 100%); }
.hero-content { position: absolute; bottom: clamp(35px, 5.4vh, 70px); left: 6%; right: 6%; max-width: 1540px; margin-inline: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.hero-copy { max-width: 820px; animation: copy-arrive .8s cubic-bezier(.22, 1, .36, 1) both; }
h1 { margin: 0; font-size: clamp(38px, 4.05vw, 66px); line-height: 1.06; font-weight: 650; letter-spacing: -.047em; text-wrap: balance; }
.hero-copy p { max-width: 660px; margin: 20px 0 0; font-size: clamp(17px, 1.42vw, 21px); line-height: 1.5; font-weight: 400; color: var(--secondary-text); text-wrap: pretty; }
.feature-button-hero { margin-bottom: 5px; padding: 16px 29px; font-size: 17px; animation: copy-arrive .8s .08s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes copy-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.video-story { position: relative; height: 150svh; background: #18231f; color: #f7fbf5; }
.video-stage { position: sticky; top: var(--local-nav-height); height: calc(100svh - var(--local-nav-height)); min-height: 560px; overflow: hidden; background: #18231f; }
.story-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #18231f; filter: brightness(.62) saturate(.92); will-change: filter; }
.video-wash { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(11 27 22 / 34%) 0%, rgb(11 27 22 / 5%) 46%, rgb(11 27 22 / 42%) 100%), rgb(3 14 10 / var(--video-dim, .46)); will-change: opacity; }
.video-copy { position: absolute; top: 50%; left: 50%; width: min(740px, calc(100% - 48px)); text-align: center; transform: translate3d(-50%, calc(-50% - var(--copy-shift, 0px)), 0) scale(calc(1 - var(--copy-progress, 0) * .08)); transform-origin: center; opacity: clamp(0, calc((1 - var(--copy-progress, 0)) / .45), 1); will-change: transform, opacity; }
.video-eyebrow { margin: 0 0 18px; color: rgb(247 251 245 / 80%); font-size: 15px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.video-copy h2 { margin: 0; color: #f7fbf5; font-size: clamp(42px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -.055em; font-weight: 650; text-wrap: balance; }
.video-copy p:last-child { max-width: 520px; margin: 22px auto 0; color: rgb(247 251 245 / 82%); font-size: clamp(17px, 1.55vw, 22px); line-height: 1.45; }
.video-status { position: absolute; right: 28px; bottom: 24px; margin: 0; color: rgb(247 251 245 / 72%); font-size: 13px; letter-spacing: .04em; opacity: .85; }
/* Keep the banner edge-to-edge on wide displays as well. */
@media (min-width: 1800px) { .hero-image { object-fit: cover; } }
@media (max-width: 900px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 13px; }
  .nav-actions { gap: 13px; }
  .hero-content { gap: 28px; left: 5%; right: 5%; }
  .hero-copy { max-width: 610px; }
  h1 { font-size: clamp(36px, 4.5vw, 44px); }
  .hero-copy p { max-width: 540px; font-size: 17px; }
  .feature-button-hero { font-size: 15px; padding: 15px 23px; }
}
@media (max-width: 650px) {
  :root { --local-nav-height: 54px; }
  .global-nav { width: calc(100% - 28px); gap: 16px; }
  .brand { width: 83px; height: 34px; }
  .nav-links { display: none; }
  .nav-actions { gap: 14px; }
  .icon-button svg { width: 22px; height: 22px; }
  .language-button { gap: 5px; font-size: 14px; }
  .hero { height: auto; min-height: 0; max-height: none; padding-top: clamp(330px, 57svh, 510px); }
  .hero-media { height: clamp(420px, 70svh, 620px); }
  .hero-image { width: 170%; max-width: none; margin-left: -35%; object-position: center top; }
  .hero::after { background: linear-gradient(to bottom, rgb(242 242 242 / 0%) 37%, rgb(242 242 242 / 55%) 51%, var(--background) 67%); }
  .hero-content { position: relative; inset: auto; margin: 0 24px; padding: 0 0 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
  h1 { max-width: 420px; font-size: clamp(38px, 9.3vw, 52px); letter-spacing: -.045em; }
  .hero-copy p { margin-top: 17px; max-width: 440px; font-size: 17px; line-height: 1.5; }
  .feature-button-hero { font-size: 16px; padding: 15px 25px; margin: 0; }
  .video-story { height: 135svh; }
  .video-stage { min-height: 480px; }
  .video-copy { width: calc(100% - 40px); }
  .video-copy h2 { font-size: clamp(40px, 12vw, 62px); }
  .video-copy p:last-child { font-size: 17px; }
  .video-status { right: 18px; bottom: 17px; }
}
.talk-story { position: relative; height: 185svh; background: var(--background); }
.talk-stage { position: sticky; top: var(--local-nav-height); height: calc(100svh - var(--local-nav-height)); overflow: hidden; isolation: isolate; background: var(--mint-gradient); }
.talk-image { position: absolute; z-index: 1; left: 50%; top: 51%; transform: translate(-50%, -50%); width: min(80vw, 100svh, 1120px); height: min(80vw, 100svh, 1120px); object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.025) contrast(1.01) saturate(1.02); }
.talk-title { position: absolute; z-index: 2; top: 50%; left: 0; width: 100%; margin: 0; text-align: center; color: var(--brand); font-size: clamp(48px, 7.2vw, 108px); line-height: 1.05; letter-spacing: -.05em; font-weight: 650; transform: translateY(calc(-50% - var(--talk-shift, 0px))); opacity: var(--talk-title-opacity, 1); pointer-events: none; will-change: transform, opacity; }
.talk-interface { position: absolute; z-index: 3; inset: 0; opacity: var(--talk-ui-opacity, 0); visibility: hidden; pointer-events: none; will-change: opacity; }
.talk-interface.is-ready { visibility: visible; pointer-events: auto; }
.talk-transcript { position: absolute; inset: 0; pointer-events: none; }
.talk-card { position: absolute; top: 9%; width: min(36vw, 520px); padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--brand); opacity: 0; transition: opacity .2s ease; }
.talk-card.is-shown { opacity: 1; }
.selected-question { right: 5%; top: 21%; text-align: right; }
.moya-answer { left: 5%; text-align: left; }
.talk-card-label { display: block; margin-bottom: 13px; font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: .14em; opacity: .62; }
.talk-card p { margin: 0; font-size: clamp(28px, 2.3vw, 42px); line-height: 1.16; font-weight: 580; letter-spacing: -.025em; text-wrap: pretty; }
.talk-line { display: block; opacity: 0; transform: translateY(18px); filter: blur(3px); animation: talk-line-arrive .62s calc(var(--line-order, 0) * .16s) cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes talk-line-arrive { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.question-list { position: absolute; z-index: 4; left: 50%; bottom: 24%; width: min(700px, calc(100% - 48px)); display: grid; gap: 13px; transform: translateX(-50%); }
.question-option { display: grid; grid-template-columns: 1fr 30px; align-items: center; gap: 14px; min-height: 72px; padding: 13px 22px 13px 27px; border: 1px solid rgb(255 255 255 / 92%); border-radius: 999px; background: rgb(237 244 240 / 72%); backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%); box-shadow: 0 12px 38px rgb(56 89 80 / 11%), inset 0 1px 0 #fff; color: var(--brand); cursor: pointer; text-align: left; transition: background .24s ease, transform .24s ease, opacity .2s ease; }
.question-option:hover { background: rgb(193 229 217 / 86%); transform: translateY(-2px); }
.question-text { font-size: 18px; line-height: 1.3; }
.question-arrow { justify-self: end; font-size: 21px; opacity: .45; }
.question-option.is-leaving { opacity: 0; transform: translateY(32px); pointer-events: none; }
.question-option.is-entering { opacity: 0; transform: translateY(-28px); }
.meet-story { position: relative; height: 400svh; background: #2a211b; color: #fff; }
.meet-stage { position: sticky; top: var(--local-nav-height); height: calc(100svh - var(--local-nav-height)); min-height: 560px; overflow: hidden; isolation: isolate; background: #2a211b; }
.meet-images { position: absolute; inset: 0; z-index: -3; }
.meet-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; opacity: var(--meet-image-opacity, 0); filter: brightness(var(--meet-brightness, .74)) saturate(.94); will-change: opacity, filter; }
.meet-image:first-child { --meet-image-opacity: 1; }
.meet-image-work { object-position: center 50%; }
.meet-image-rest { object-position: center 52%; }
.meet-image-night { object-position: center 50%; }
.meet-wash { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(18 14 11 / 58%) 0%, rgb(18 14 11 / 30%) 31%, transparent 62%), linear-gradient(180deg, rgb(24 18 13 / 14%), transparent 45%, rgb(24 18 13 / 22%)), rgb(16 12 9 / var(--meet-dim, .2)); pointer-events: none; }
.meet-title { position: absolute; top: 50%; left: 50%; width: min(1000px, calc(100% - 48px)); margin: 0; color: #fff; font-size: clamp(48px, 7.2vw, 108px); line-height: 1.05; letter-spacing: -.05em; font-weight: 650; text-align: center; text-wrap: balance; text-shadow: 0 3px 28px rgb(20 14 10 / 22%); transform: translate3d(-50%, calc(-50% - var(--meet-shift, 0px)), 0); opacity: var(--meet-title-opacity, 1); pointer-events: none; will-change: transform, opacity; }
.meet-copy-stack { position: absolute; inset: 0; }
.meet-copy { position: absolute; top: 50%; left: 6%; width: min(440px, 38vw); color: #fff; opacity: var(--meet-copy-opacity, 0); transform: translate3d(0, calc(-50% + var(--meet-copy-shift, 18px)), 0); text-shadow: 0 2px 24px rgb(18 13 10 / 38%); will-change: transform, opacity; }
.meet-copy-kicker { margin: 0 0 16px; font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: .14em; }
.meet-copy h3 { margin: 0; font-size: clamp(34px, 3.4vw, 56px); line-height: 1.04; letter-spacing: -.045em; font-weight: 650; text-wrap: balance; }
.meet-copy > p:last-child { max-width: 390px; margin: 22px 0 0; color: rgb(255 255 255 / 88%); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.48; text-wrap: pretty; }
.meet-progress { position: absolute; z-index: 5; top: 50%; right: calc(clamp(24px, 3vw, 48px) - 25px); width: 60px; height: min(78%, 520px); opacity: var(--meet-progress-opacity, 0); transform: translateY(-50%); transition: opacity .24s ease; cursor: grab; touch-action: none; user-select: none; pointer-events: none; }
.meet-progress.is-visible { pointer-events: auto; }
.meet-progress:active { cursor: grabbing; }
.meet-progress:focus-visible { outline: 2px solid rgb(255 255 255 / 92%); outline-offset: 8px; border-radius: 999px; }
.meet-progress-track { position: relative; width: 10px; height: 100%; margin-inline: auto; border-radius: 999px; background: rgb(255 255 255 / 22%); box-shadow: 0 1px 1px rgb(0 0 0 / 10%); }
.meet-progress-fill { position: absolute; inset: 0 0 auto; height: var(--meet-progress, 0%); border-radius: inherit; background: rgb(255 255 255 / 68%); transition: height .46s cubic-bezier(.22, 1, .36, 1); }
.meet-progress-moya { position: absolute; top: var(--meet-progress, 0%); left: 50%; width: 60px; height: 60px; border-radius: 50%; background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 16%); transform: translate(-50%, -50%); transition: top .52s cubic-bezier(.5, 0, .18, 1.35); will-change: top; }
.meet-progress-moya::before,
.meet-progress-moya::after { content: ""; position: absolute; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: #262626; }
.meet-progress-moya::before { left: 27px; }
.meet-progress-moya::after { left: 45px; }
.meet-progress.is-dragging .meet-progress-fill,
.meet-progress.is-dragging .meet-progress-moya { transition: none; }
.science-story { position: relative; height: 250svh; background: #f4f8f8; color: #284a45; }
.science-stage { --science-accent: 107 155 217; --science-glow: 148 190 232; position: sticky; top: var(--local-nav-height); height: calc(100svh - var(--local-nav-height)); min-height: 560px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 28% 46%, rgb(var(--science-glow) / 18%), transparent 35%), linear-gradient(145deg, #fbfdfd 0%, #edf5f6 54%, #e5f0f1 100%); transition: --science-accent .4s ease; }
.science-stage[data-science-step="1"] { --science-accent: 87 153 137; --science-glow: 132 201 184; }
.science-stage[data-science-step="2"] { --science-accent: 126 126 205; --science-glow: 172 165 230; }
.science-aurora { position: absolute; z-index: -1; inset: -35%; background: radial-gradient(circle at 50% 50%, rgb(var(--science-glow) / 24%) 0 15%, transparent 48%); filter: blur(34px); opacity: .85; transform: translate3d(calc(var(--science-visual-shift, 0) * 1px), 0, 0); transition: background .5s ease; }
.science-intro { position: absolute; z-index: 4; top: 50%; left: 50%; width: min(960px, calc(100% - 48px)); text-align: center; opacity: var(--science-intro-opacity, 1); transform: translate3d(-50%, calc(-50% - var(--science-intro-shift, 0px)), 0) scale(calc(1 - var(--science-intro-progress, 0) * .05)); will-change: transform, opacity; }
.science-eyebrow { margin: 0 0 22px; color: rgb(40 74 69 / 68%); font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: .16em; }
.science-intro h2 { max-width: 920px; margin: 0 auto; font-size: clamp(48px, 6.6vw, 98px); line-height: 1.01; letter-spacing: -.06em; font-weight: 650; text-wrap: balance; }
.science-intro > p:last-child { max-width: 610px; margin: 25px auto 0; color: rgb(40 74 69 / 72%); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; text-wrap: balance; }
.science-experience { position: absolute; inset: 0; opacity: var(--science-experience-opacity, 0); visibility: hidden; pointer-events: none; transform: scale(calc(.97 + var(--science-experience-opacity, 0) * .03)); transform-origin: center; transition: visibility 0s linear .25s; will-change: transform, opacity; }
.science-experience.is-visible { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.science-visual { position: absolute; top: 50%; left: 29%; width: min(47vw, 620px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.science-moya { position: absolute; z-index: 2; inset: 13%; display: block; width: 74%; height: 74%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 24px 35px rgb(54 89 91 / 13%)); animation: science-float 5s ease-in-out infinite; }
@keyframes science-float { 0%, 100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-10px) rotate(.4deg); } }
.science-halo { position: absolute; left: 50%; top: 50%; border: 1px solid rgb(var(--science-accent) / 32%); border-radius: 50%; transform: translate(-50%, -50%); transition: width .58s cubic-bezier(.22, 1, .36, 1), height .58s cubic-bezier(.22, 1, .36, 1), border-color .4s ease; }
.science-halo-outer { width: 100%; height: 100%; border-style: dashed; animation: science-orbit 28s linear infinite; }
.science-halo-middle { width: 79%; height: 79%; border-color: rgb(var(--science-accent) / 44%); animation: science-orbit-reverse 22s linear infinite; }
.science-halo-inner { width: 58%; height: 58%; border-width: 2px; border-color: rgb(var(--science-accent) / 36%); box-shadow: 0 0 70px rgb(var(--science-glow) / 22%), inset 0 0 42px rgb(255 255 255 / 70%); }
@keyframes science-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes science-orbit-reverse { to { transform: translate(-50%, -50%) rotate(-360deg); } }
.science-pulse { position: absolute; z-index: 3; width: 12px; height: 12px; border: 3px solid rgb(255 255 255 / 88%); border-radius: 50%; background: rgb(var(--science-accent)); box-shadow: 0 0 0 8px rgb(var(--science-accent) / 10%), 0 8px 18px rgb(47 84 86 / 15%); transition: background .4s ease; animation: science-breathe 2.8s ease-in-out infinite; }
.science-pulse-one { top: 16%; left: 23%; }
.science-pulse-two { top: 35%; right: 5%; animation-delay: -.9s; }
.science-pulse-three { bottom: 10%; left: 34%; animation-delay: -1.8s; }
@keyframes science-breathe { 50% { transform: scale(1.35); box-shadow: 0 0 0 14px rgb(var(--science-accent) / 5%), 0 8px 22px rgb(47 84 86 / 12%); } }
.science-cards { position: absolute; z-index: 4; top: 50%; right: 6%; width: min(430px, 36vw); height: 360px; transform: translateY(-50%); }
.science-card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 38px 40px; border: 1px solid rgb(255 255 255 / 78%); border-radius: 34px; background: rgb(255 255 255 / 54%); box-shadow: 0 30px 80px rgb(49 83 84 / 12%), inset 0 1px 0 rgb(255 255 255 / 90%); backdrop-filter: blur(30px) saturate(135%); -webkit-backdrop-filter: blur(30px) saturate(135%); opacity: 0; visibility: hidden; transform: translate3d(0, 34px, 0) scale(.97); transition: opacity .34s ease, transform .5s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .5s; }
.science-card.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.science-card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; color: rgb(var(--science-accent)); font-size: 13px; font-weight: 750; letter-spacing: .15em; transition: color .4s ease; }
.science-card h3 { margin: 0; color: #284a45; font-size: clamp(34px, 3.1vw, 49px); line-height: 1.02; letter-spacing: -.047em; font-weight: 650; text-wrap: balance; }
.science-card p { margin: 21px 0 0; color: rgb(40 74 69 / 72%); font-size: 17px; line-height: 1.52; text-wrap: pretty; }
.science-stepper { position: absolute; z-index: 5; left: 50%; bottom: 27px; display: flex; gap: 4px; padding: 5px; border: 1px solid rgb(255 255 255 / 82%); border-radius: 999px; background: rgb(255 255 255 / 48%); box-shadow: 0 14px 40px rgb(49 83 84 / 10%); backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); transform: translateX(-50%); }
.science-stepper button { min-width: 108px; border: 0; border-radius: 999px; padding: 10px 17px; color: rgb(40 74 69 / 58%); background: transparent; font-size: 14px; line-height: 1; cursor: pointer; transition: color .25s ease, background .25s ease, box-shadow .25s ease; }
.science-stepper button.is-active { color: #284a45; background: rgb(255 255 255 / 86%); box-shadow: 0 5px 18px rgb(49 83 84 / 9%); }
.science-stepper button:focus-visible { outline: 2px solid rgb(var(--science-accent) / 75%); outline-offset: 2px; }

/* Science carousel draft */
.science-story { height: 270svh; background: var(--teal-surface); color: #174f43; }
.science-stage { background: var(--mint-gradient); }
.science-glow { position: absolute; z-index: -1; inset: -30%; background: radial-gradient(circle at 48% 44%, rgb(112 192 202 / 22%), transparent 38%), radial-gradient(circle at 70% 65%, rgb(153 182 132 / 18%), transparent 32%); filter: blur(45px); transform: translate3d(var(--science-glow-shift, 0), 0, 0); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.science-intro { z-index: 5; width: min(980px, calc(100% - 48px)); color: #174f43; }
.science-eyebrow { margin-bottom: 21px; color: rgb(23 79 67 / 68%); font-weight: 750; }
.science-intro h2 { max-width: 940px; }
.science-intro > p:last-child { max-width: 660px; color: rgb(23 79 67 / 76%); }
.science-glow { opacity: 0; }
.science-deck { position: absolute; inset: 0; opacity: var(--science-deck-opacity, 0); visibility: hidden; pointer-events: none; transform: scale(calc(.965 + var(--science-deck-opacity, 0) * .035)); transition: visibility 0s linear .25s; }
.science-deck.is-visible { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.science-slides { position: absolute; inset: 0; perspective: 1600px; }
.science-slide { --science-card-x: 110%; --science-card-scale: .9; --science-card-opacity: .28; position: absolute; top: 50%; left: 50%; width: min(1120px, 88vw); height: min(74%, 560px); min-height: 430px; overflow: hidden; pointer-events: none; border: 1px solid rgb(255 255 255 / 78%); border-radius: 38px; box-shadow: 0 30px 90px rgb(49 83 84 / 12%), inset 0 1px 0 rgb(255 255 255 / 86%); opacity: var(--science-card-opacity); transform: translate3d(calc(-50% + var(--science-card-x)), -50%, 0) scale(var(--science-card-scale)); transition: transform .72s cubic-bezier(.22, 1, .36, 1), opacity .4s ease; will-change: transform, opacity; }
.science-slide { width: 82%; height: calc(100% - 200px); min-height: 0; top: calc(50% - 24px); border-color: rgb(255 255 255 / 90%); box-shadow: 0 18px 55px rgb(61 85 62 / 10%), inset 0 2px 0 rgb(255 255 255 / 95%), inset 0 -1px 0 rgb(116 150 111 / 12%); backdrop-filter: blur(38px) saturate(115%); -webkit-backdrop-filter: blur(38px) saturate(115%); }
.science-slide:nth-child(1) { --science-card-x: 0%; --science-card-scale: 1; --science-card-opacity: 1; }
.science-slide:nth-child(2) { --science-card-x: 94%; }
.science-slide:nth-child(3) { --science-card-x: 188%; }
.science-slide.is-active { pointer-events: auto; }
.science-slide-touch { display: flex; gap: 3%; padding: 42px; background: rgb(255 255 255 / 83%); backdrop-filter: blur(30px) saturate(130%); -webkit-backdrop-filter: blur(30px) saturate(130%); }
.science-touch-copy { align-self: center; width: 30%; padding: 8px 8px 8px 5px; }
.science-slide-number { margin: 0 0 20px; color: rgb(23 79 67 / 58%); font-size: 12px; line-height: 1; font-weight: 750; letter-spacing: .15em; }
.science-touch-copy h3, .science-feature-copy h3 { margin: 0; font-size: clamp(36px, 3.5vw, 54px); line-height: 1.02; letter-spacing: -.052em; font-weight: 650; }
.science-touch-copy > p:last-child, .science-feature-copy > p:last-child { margin: 20px 0 0; color: rgb(23 79 67 / 68%); font-size: 16px; line-height: 1.5; }
.science-dashboard { width: 67%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.science-data-card { position: relative; overflow: hidden; min-height: 0; padding: 19px 20px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #47734c, #76bdc7); }
.science-data-card h4 { position: relative; z-index: 2; margin: 0; font-size: 14px; line-height: 1; font-weight: 700; }
.rhythm-card { background: linear-gradient(135deg, #737e76 0%, #91a5a8 100%); }
.vagus-card { background: linear-gradient(135deg, #8fa5a8 0%, #b6bbb0 100%); }
.sleep-card { grid-column: 2; grid-row: 1 / span 2; background: linear-gradient(150deg, #aca99a 0%, #92a7aa 55%, #7a9197 100%); text-align: center; }
.rhythm-chart { position: absolute; right: 20px; bottom: 36px; left: 20px; height: 52%; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid rgb(255 255 255 / 38%); }
.rhythm-chart span { flex: 1; height: var(--h); min-width: 2px; border-radius: 3px 3px 0 0; background: repeating-linear-gradient(to bottom, #fff 0 2px, transparent 2px 4px); transform: scaleY(0); transform-origin: bottom; transition: transform .55s calc(var(--i) * 16ms) cubic-bezier(.22, 1, .36, 1); }
.science-slide.is-active .rhythm-chart span { transform: scaleY(1); }
.science-legend { position: absolute; right: 18px; bottom: 13px; left: 18px; display: flex; justify-content: center; gap: 14px; color: rgb(255 255 255 / 63%); font-size: 9px; }
.science-legend span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; }
.science-legend span:first-child { color: #fff; }
.vagus-field { position: absolute; top: 44px; right: 20px; bottom: 34px; left: 20px; display: grid; grid-template-columns: repeat(9, 1fr); place-items: center; gap: 5px; }
.vagus-field::before, .vagus-field::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgb(255 255 255 / 28%); }
.vagus-field::before { top: 33%; } .vagus-field::after { bottom: 30%; }
.vagus-field i { width: 7px; height: 7px; background: rgb(255 255 255 / 73%); transform: scale(0); transition: transform .45s cubic-bezier(.22, 1.4, .36, 1); }
.vagus-field i:nth-child(3n) { width: 12px; height: 12px; } .vagus-field i:nth-child(4n) { width: 4px; height: 4px; } .vagus-field i:nth-child(5n) { transform: translateY(9px) scale(0); }
.science-slide.is-active .vagus-field i { transform: scale(1); } .science-slide.is-active .vagus-field i:nth-child(5n) { transform: translateY(9px) scale(1); }
.sleep-orbits { position: relative; width: 78%; height: 57%; margin: 17px auto 0; }
.sleep-orbits i { position: absolute; top: 50%; left: 50%; width: 86%; height: 42%; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.76); transition: opacity .5s ease, transform .65s cubic-bezier(.22, 1, .36, 1); }
.sleep-orbits i:nth-child(2) { width: 100%; height: 58%; } .sleep-orbits i:nth-child(3) { width: 95%; height: 76%; } .sleep-orbits i:nth-child(4) { width: 88%; height: 48%; border: 3px solid #fff; }
.science-slide.is-active .sleep-orbits i { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sleep-card strong { display: block; margin-top: -8px; font-size: 42px; line-height: 1; }
.sleep-card > p { margin: 7px 0 0; color: rgb(255 255 255 / 56%); font-size: 11px; }
.science-slide-care, .science-slide-context { display: flex; align-items: center; justify-content: space-between; padding: 6%; color: #fff; background: linear-gradient(130deg, #829599, #a6b5b2); }
.science-slide-context { background: linear-gradient(130deg, #819398, #a0b0b1); }
.science-feature-copy { width: 42%; }
.science-feature-copy .science-slide-number, .science-feature-copy > p:last-child { color: rgb(255 255 255 / 74%); }
.care-map { position: relative; width: 47%; height: 86%; border: 1px solid rgb(255 255 255 / 48%); border-radius: 36px; background: rgb(70 117 125 / 17%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%); backdrop-filter: blur(10px); }
.care-map::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 46%; border-radius: 0 0 35px 35px; background: linear-gradient(180deg, rgb(187 207 135 / 44%), rgb(89 154 158 / 5%)); }
.care-divider { position: absolute; z-index: 2; top: 54%; right: 4%; left: 4%; border-top: 1px dashed rgb(255 255 255 / 62%); }
.care-message { position: absolute; z-index: 3; padding: 8px 13px; border-radius: 14px; color: #fff; background: rgb(67 109 118 / 50%); font-size: 12px; white-space: nowrap; }
.care-one { top: 15%; left: 44%; } .care-two { top: 28%; right: 7%; } .care-three { top: 40%; left: 10%; } .care-four { top: 63%; left: 22%; } .care-five { right: 13%; bottom: 10%; }
.care-point { position: absolute; z-index: 4; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.point-one { top: 28%; left: 42%; } .point-two { top: 39%; right: 31%; } .point-three { top: 61%; left: 20%; background: #f7dc20; } .point-four { right: 25%; bottom: 31%; background: #f7dc20; }
.context-orb { position: relative; width: min(47%, 440px); aspect-ratio: 1; overflow: hidden; border: 4px dashed rgb(255 255 255 / 88%); border-radius: 50%; background: rgb(49 101 111 / 25%); }
.context-message { position: absolute; z-index: 4; top: 27%; left: 50%; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgb(54 96 105 / 55%); transform: translateX(-30%); font-size: 12px; }
.context-moya-face { width: 31px; height: 31px; border: 5px solid #fff; border-radius: 50%; background: radial-gradient(circle at 40% 50%, #263f3e 0 2px, transparent 3px), radial-gradient(circle at 62% 50%, #263f3e 0 2px, transparent 3px), #d8ebef; }
.context-wave { position: absolute; z-index: 3; top: 48%; left: 50%; display: flex; align-items: center; gap: 4px; height: 70px; transform: translateX(-18%); }
.context-wave i { width: 2px; height: 17px; background: #fff; animation: context-wave 1.3s ease-in-out infinite alternate; }
.context-wave i:nth-child(3n) { height: 42px; animation-delay: -.4s; } .context-wave i:nth-child(4n) { height: 57px; animation-delay: -.8s; } .context-wave i:nth-child(5n) { height: 32px; animation-delay: -.2s; }
@keyframes context-wave { to { transform: scaleY(.35); opacity: .55; } }
.context-blob { position: absolute; z-index: 1; left: -18%; bottom: -20%; width: 62%; height: 62%; border-radius: 44% 56% 58% 42%; background: rgb(152 221 227 / 75%); }
.context-time { position: absolute; z-index: 2; left: 12%; bottom: 19%; display: flex; align-items: baseline; color: #fff; }
.context-time strong { font-size: 42px; line-height: 1; } .context-time span { font-size: 19px; }
.science-controls { position: absolute; z-index: 10; right: 6%; bottom: 16px; left: 6%; display: flex; align-items: center; justify-content: space-between; }
.science-arrows { display: flex; gap: 8px; }
.science-arrows button { width: 42px; height: 42px; border: 1px solid rgb(23 79 67 / 24%); border-radius: 50%; color: #174f43; background: rgb(255 255 255 / 58%); font-size: 20px; cursor: pointer; transition: background .2s ease, opacity .2s ease; }
.science-arrows button:hover { background: #fff; } .science-arrows button:disabled { opacity: .28; cursor: default; }
.science-controls .science-stepper { position: static; left: auto; bottom: auto; display: flex; gap: 5px; padding: 5px; transform: none; }
.science-controls .science-stepper button { min-width: 100px; padding: 10px 16px; color: rgb(23 79 67 / 55%); font-size: 13px; }
.science-controls .science-stepper button.is-active { color: #174f43; background: rgb(255 255 255 / 90%); }
.science-controls .science-stepper button:focus-visible, .science-arrows button:focus-visible { outline: 2px solid rgb(23 79 67 / 65%); outline-offset: 2px; }
/* Mint teal frosted surfaces, with clear lettering over the translucent fill. */
.science-slide-touch, .science-slide-care, .science-slide-context { color: #385e57; background: radial-gradient(ellipse at 85% 80%, rgb(174 218 207 / 48%), transparent 65%), linear-gradient(135deg, rgb(255 255 255 / 78%), rgb(218 239 233 / 65%) 56%, rgb(240 248 246 / 80%)); }
.science-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 60px rgb(255 255 255 / 25%); background: linear-gradient(115deg, rgb(255 255 255 / 22%), transparent 35%, transparent 75%, rgb(255 255 255 / 16%)); }
.science-feature-copy .science-slide-number, .science-feature-copy > p:last-child { color: #587a73; }
.science-data-card { color: #385e57; border: 1px solid rgb(255 255 255 / 85%); box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgb(58 94 86 / 6%); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.rhythm-card { background: linear-gradient(135deg, rgb(216 238 231 / 80%), rgb(174 218 207 / 65%)); }
.vagus-card { background: linear-gradient(135deg, rgb(191 228 219 / 65%), rgb(236 247 243 / 80%)); }
.sleep-card { background: linear-gradient(150deg, rgb(238 248 244 / 85%), rgb(183 224 214 / 65%) 60%, rgb(214 237 230 / 75%)); }
.science-legend, .sleep-card > p { color: #587a73; }
.science-legend span:first-child { color: #385e57; }
.rhythm-chart span { background: repeating-linear-gradient(to bottom, #65958a 0 2px, transparent 2px 4px); }
.vagus-field i { background: rgb(82 132 120 / 65%); }
.sleep-orbits i { border-color: rgb(82 132 120 / 30%); }
.sleep-orbits i:nth-child(4) { border-color: #6e9e92; }
.care-map, .context-orb { background: rgb(227 244 238 / 40%); box-shadow: inset 0 1px 0 #fff, 0 12px 40px rgb(58 94 86 / 7%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.context-orb { width: min(47%, 560px); border-color: rgb(107 159 145 / 50%); }
.care-map::after { background: linear-gradient(180deg, rgb(179 222 211 / 45%), rgb(234 246 241 / 10%)); }
.care-message, .context-message { color: #385e57; background: rgb(255 255 255 / 55%); border: 1px solid rgb(255 255 255 / 70%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.context-wave i { background: #75a89b; }
.context-blob { background: rgb(174 218 207 / 55%); }
.context-time { color: #385e57; }
@media (max-width: 650px) {
  .talk-image { top: 51%; width: min(126vw, 88svh); height: min(126vw, 88svh); }
  .talk-card { top: 6%; width: min(72vw, 300px); }
  .selected-question { right: 16px; top: 28%; }
  .moya-answer { left: 16px; top: 6%; }
  .talk-card p { font-size: clamp(22px, 6.2vw, 29px); }
  .talk-card-label { margin-bottom: 6px; font-size: 11px; }
  .question-list { bottom: 18%; width: calc(100% - 28px); gap: 9px; }
  .question-option { min-height: 64px; padding: 11px 16px 11px 20px; }
  .question-text { font-size: 16px; }
  .talk-story { height: 175svh; }
  .meet-story { height: 380svh; }
  .meet-stage { min-height: 480px; }
  .meet-image-home { object-position: 66% center; }
  .meet-image-work { object-position: 44% center; }
  .meet-image-rest { object-position: 42% center; }
  .meet-image-night { object-position: 53% center; }
  .meet-wash { background: linear-gradient(0deg, rgb(18 14 11 / 72%) 0%, rgb(18 14 11 / 32%) 42%, transparent 72%), rgb(16 12 9 / var(--meet-dim, .2)); }
  .meet-title { width: calc(100% - 36px); font-size: clamp(45px, 13vw, 68px); }
  .meet-copy { top: auto; right: 66px; bottom: 8%; left: 22px; width: auto; transform: translate3d(0, var(--meet-copy-shift, 18px), 0); }
  .meet-copy-kicker { margin-bottom: 12px; font-size: 12px; }
  .meet-copy h3 { max-width: 420px; font-size: clamp(34px, 10vw, 48px); }
  .meet-copy > p:last-child { max-width: 430px; margin-top: 15px; font-size: 17px; }
  .meet-progress { right: 0; width: 42px; height: min(58%, 390px); }
  .meet-progress-track { width: 7px; }
  .meet-progress-moya { width: 42px; height: 42px; }
  .meet-progress-moya::before,
  .meet-progress-moya::after { top: 15px; width: 6px; height: 6px; }
  .meet-progress-moya::before { left: 19px; }
  .meet-progress-moya::after { left: 31px; }
  .science-story { height: 225svh; }
  .science-stage { min-height: 480px; }
  .science-intro { width: calc(100% - 34px); }
  .science-eyebrow { margin-bottom: 16px; font-size: 12px; }
  .science-intro h2 { font-size: clamp(43px, 12.4vw, 64px); }
  .science-intro > p:last-child { max-width: 440px; margin-top: 19px; font-size: 17px; }
  .science-visual { top: 34%; left: 50%; width: min(92vw, 470px); }
  .science-moya { inset: 16%; width: 68%; height: 68%; }
  .science-cards { top: auto; right: 17px; bottom: 73px; left: 17px; width: auto; height: 235px; transform: none; }
  .science-card { padding: 24px 25px; border-radius: 27px; }
  .science-card-meta { margin-bottom: 14px; font-size: 11px; }
  .science-card h3 { font-size: clamp(29px, 8.4vw, 39px); }
  .science-card p { margin-top: 12px; font-size: 15px; line-height: 1.42; }
  .science-stepper { bottom: 16px; width: calc(100% - 28px); }
  .science-stepper button { min-width: 0; flex: 1; padding: 10px 8px; font-size: 12px; }
  .science-slide { top: calc(50% - 20px); width: calc(100% - 56px); height: calc(100% - 136px); min-height: 0; border-radius: 28px; }
  .science-slide-touch { display: block; padding: 24px; }
  .science-touch-copy { width: auto; padding: 0; }
  .science-slide-number { margin-bottom: 11px; font-size: 10px; }
  .science-touch-copy h3, .science-feature-copy h3 { font-size: clamp(31px, 8.8vw, 42px); }
  .science-touch-copy > p:last-child, .science-feature-copy > p:last-child { margin-top: 11px; font-size: 14px; line-height: 1.38; }
  .science-dashboard { position: absolute; right: 14px; bottom: 14px; left: 14px; width: auto; height: 55%; gap: 8px; }
  .science-data-card { padding: 13px; border-radius: 16px; }
  .science-data-card h4 { font-size: 11px; }
  .rhythm-chart { right: 12px; bottom: 27px; left: 12px; gap: 2px; }
  .science-legend { right: 8px; bottom: 8px; left: 8px; gap: 6px; font-size: 7px; }
  .vagus-field { top: 33px; right: 11px; bottom: 26px; left: 11px; gap: 3px; }
  .vagus-field i { width: 4px; height: 4px; }
  .vagus-field i:nth-child(3n) { width: 7px; height: 7px; }
  .sleep-orbits { margin-top: 9px; height: 55%; }
  .sleep-card strong { margin-top: -4px; font-size: 30px; }
  .science-slide-care, .science-slide-context { display: block; padding: 27px; }
  .science-feature-copy { width: auto; }
  .care-map { position: absolute; right: 20px; bottom: 20px; left: 20px; width: auto; height: 55%; border-radius: 24px; }
  .care-map::after { border-radius: 0 0 23px 23px; }
  .care-message { padding: 6px 9px; font-size: 9px; }
  .context-orb { position: absolute; right: 50%; bottom: 17px; width: min(62vw, 300px); transform: translateX(50%); }
  .context-message { font-size: 9px; }
  .science-controls { right: 14px; bottom: 10px; left: 14px; }
  .science-arrows button { width: 36px; height: 36px; }
  .science-controls .science-stepper { position: static; width: auto; transform: none; }
  .science-controls .science-stepper button { min-width: 0; padding: 9px 11px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}