/* =========================================================
   Shared multi-page components: transitions, menu, photo slots,
   carousels, inner-page heroes and page-specific sections.
   ========================================================= */

/* ---------- page transition curtain ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 95; background: var(--ink); color: var(--cream);
  display: none; place-items: center; clip-path: inset(100% 0 0 0);
}
.is-tx .curtain { display: grid; clip-path: inset(0); }
.curtain__inner { display: grid; justify-items: center; gap: 18px; }
.curtain__inner .logo-mark { width: 64px; height: 64px; animation: spin 2.4s linear infinite; }
.curtain__inner .logo-core { stroke: var(--cream); }
.curtain__label { font-family: var(--f-display); font-weight: 300; font-size: clamp(40px, 7vw, 96px); letter-spacing: -.03em; line-height: 1.1; padding-bottom: .1em; }

/* ---------- nav extras ---------- */
.nav__links a[aria-current="page"] { background: var(--ink); color: var(--cream); }
.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__burger {
  display: none; width: 48px; height: 48px; border-radius: 50%; position: relative; z-index: 60;
  background: rgba(251,238,224,.7); border: 1px solid var(--line); backdrop-filter: blur(12px);
}
.nav__burger i { position: absolute; left: 15px; right: 15px; height: 1.5px; background: var(--ink); transition: transform .5s var(--ease), top .5s var(--ease); }
.nav__burger i:first-child { top: 19px; }
.nav__burger i:last-child { top: 27px; }
.menu-open .nav__burger i:first-child { top: 23px; transform: rotate(45deg); }
.menu-open .nav__burger i:last-child { top: 23px; transform: rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 55; display: none; flex-direction: column; justify-content: center;
  gap: 6px; padding: 90px var(--gutter) 40px; background: var(--cream);
}
.menu a { font-family: var(--f-display); font-weight: 300; font-size: clamp(48px, 13vw, 96px); letter-spacing: -.03em; line-height: 1.12; }
.menu a em { color: var(--coral); }
.menu .mono { margin-top: 30px; color: var(--ink-soft); }
.menu-open .nav { translate: none !important; }
@media (max-width: 860px) {
  .nav__burger { display: block; }
  .nav .btn--pill { display: none; }
}

/* ---------- photo slots ---------- */
.ph {
  position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: var(--r, 4 / 5); margin: 0;
  background:
    radial-gradient(circle at 22% 26%, rgba(255,255,255,.75) 0 7%, transparent 7.5%),
    radial-gradient(circle at 70% 64%, rgba(63,166,166,.55) 0 5%, transparent 5.5%),
    radial-gradient(circle at 62% 30%, rgba(240,165,74,.6) 0 3.5%, transparent 4%),
    radial-gradient(circle at 34% 72%, rgba(224,116,90,.55) 0 4.5%, transparent 5%),
    radial-gradient(120% 90% at 30% 20%, #fbe6d4, #eebfa6 55%, #dca085);
  isolation: isolate;
}
.ph img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; display: block; will-change: transform; }
.ph.is-missing img { opacity: 0; }
.ph::after {
  content: "PHOTO · " attr(data-photo);
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  padding: 6px 10px; border-radius: 999px; background: rgba(43,29,23,.75); color: var(--cream);
  font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s;
}
.ph.is-missing::after { opacity: 1; }
.ph--wide { --r: 16 / 9; }
.ph--land { --r: 4 / 3; }
.ph--tall { --r: 3 / 4; }

/* ---------- draggable carousel ---------- */
.gallery { padding: clamp(110px, 16vh, 180px) 0 clamp(80px, 12vh, 140px); background: var(--cream); overflow: hidden; }
.gallery__head { padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 56px; flex-wrap: wrap; }
.gallery__head p { max-width: 380px; color: var(--ink-soft); }
.carousel__viewport { padding: 0 var(--gutter); }
.carousel__track { display: flex; gap: 20px; width: max-content; touch-action: pan-y; cursor: grab; }
.carousel.is-drag .carousel__track { cursor: grabbing; }
.slide { width: clamp(260px, 30vw, 440px); flex-shrink: 0; transform-origin: 50% 100%; user-select: none; }
.slide:nth-child(even) { margin-top: 70px; }
.slide .ph { transition: border-radius .6s var(--ease); }
.carousel.is-drag .slide .ph { border-radius: 40px; }
.slide img { pointer-events: none; }
.slide__cap { display: flex; gap: 14px; align-items: baseline; padding: 16px 4px 0; }
.slide__cap .mono { color: var(--teal-deep); }
.slide__cap h3 { font-family: var(--f-display); font-weight: 400; font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
.carousel__ui { display: flex; align-items: center; gap: 24px; padding: 40px var(--gutter) 0; }
.carousel__progress { flex: 1; height: 2px; background: var(--line); }
.carousel__progress i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(.08); }
.carousel__count { min-width: 60px; }
.carousel__btns { display: flex; gap: 8px; }
.circle-btn {
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ink);
  display: grid; place-items: center; transition: background .4s, color .4s;
}
.circle-btn:hover { background: var(--ink); color: var(--cream); }
.circle-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- 3D ring carousel ---------- */
.ring { position: relative; height: clamp(460px, 70vh, 680px); perspective: 1700px; overflow: hidden; contain: paint; touch-action: pan-y; cursor: grab; }
.ring.is-drag { cursor: grabbing; }
.ring__stage { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.ring__item { position: absolute; left: 0; top: 0; width: clamp(180px, 20vw, 280px); backface-visibility: hidden; box-shadow: 0 40px 60px -40px rgba(80,40,20,.55); }
.ring__hint { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; color: var(--ink-soft); }

/* ---------- inner-page hero ---------- */
.phero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 140px var(--gutter) 70px; overflow: hidden;
  background: radial-gradient(90% 80% at 75% 40%, #fbe7d6 0%, var(--peach) 55%, var(--blush) 100%);
}
.phero__gl { position: absolute; right: -4vw; top: 50%; translate: 0 -50%; width: min(64vw, 900px); height: min(64vw, 900px); }
.phero__content { position: relative; z-index: 2; max-width: 860px; }
.phero__title { font-family: var(--f-display); font-weight: 300; font-variation-settings: "SOFT" 50, "opsz" 144; letter-spacing: -.03em; line-height: 1; font-size: clamp(52px, 8.4vw, 148px); }
.phero__title em { color: var(--coral); }
.phero__lede { margin-top: 30px; max-width: 470px; font-size: 18px; color: var(--ink-soft); }
.phero__meta { position: absolute; right: var(--gutter); bottom: 40px; z-index: 2; display: flex; gap: 30px; color: var(--ink-soft); }
@media (max-width: 860px) {
  .phero__gl { right: 50%; translate: 50% 0; top: 70px; width: 110vw; height: 110vw; opacity: .9; }
  .phero__meta { display: none; }
}

/* ---------- inner-page scroll film ---------- */
.film--page { height: 520vh; }
.film--page .film__intro { max-width: 760px; }
.film--page .film__intro .phero__title { font-size: clamp(48px, 7vw, 120px); }

/* ---------- shared blocks ---------- */
.band { padding: clamp(110px, 16vh, 180px) var(--gutter); }
.band--cream { background: var(--cream); }
.band--peach { background: var(--peach); }
.band--ink { background: var(--ink); color: var(--cream); }
.band--ink .eyebrow { color: rgba(251,238,224,.6); }
.band--ink .section-title em { color: var(--amber); }
.statement { font-family: var(--f-display); font-weight: 300; font-size: clamp(32px, 4.4vw, 72px); line-height: 1.12; letter-spacing: -.025em; max-width: 1250px; }
.statement .word { display: inline-block; opacity: .14; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.lead { font-size: 19px; color: var(--ink-soft); max-width: 520px; }
.lead + .lead { margin-top: 18px; }

.bleed { position: relative; height: 110vh; overflow: hidden; }
.bleed .ph { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.bleed__quote {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 9vh; z-index: 3; color: var(--cream);
  font-family: var(--f-display); font-weight: 300; font-size: clamp(34px, 5vw, 84px); line-height: 1.06; letter-spacing: -.03em; max-width: 1100px;
  text-shadow: 0 10px 40px rgba(43,29,23,.35);
}
.bleed::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(43,29,23,.55), transparent 55%); pointer-events: none; }

/* next-page link */
.next { display: block; padding: clamp(90px, 14vh, 160px) var(--gutter); background: var(--cream); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.next .mono { color: var(--ink-soft); }
.next__title { display: flex; align-items: center; gap: .3em; font-family: var(--f-display); font-weight: 300; font-size: clamp(64px, 13vw, 220px); letter-spacing: -.04em; line-height: 1.1; padding-bottom: .05em; margin-top: 10px; transition: transform .8s var(--ease); }
.next__title svg { width: .55em; height: .55em; fill: none; stroke: var(--coral); stroke-width: 1.2; transition: transform .8s var(--ease); flex-shrink: 0; }
.next:hover .next__title { transform: translateX(3vw); font-style: italic; }
.next:hover .next__title svg { transform: rotate(-45deg); }

/* ---------- science: sticky stack ---------- */
.stack { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); padding: 0 var(--gutter); background: var(--cream); }
.stack__steps { padding: 20vh 0 30vh; }
.step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .6s var(--ease); }
.step.is-active { opacity: 1; }
.step .mono { color: var(--teal-deep); margin-bottom: 18px; }
.step h3 { font-family: var(--f-display); font-weight: 300; font-size: clamp(36px, 4vw, 64px); letter-spacing: -.025em; line-height: 1.06; margin-bottom: 22px; }
.step p { color: var(--ink-soft); font-size: 18px; max-width: 460px; }
.step ul { list-style: none; margin-top: 22px; display: grid; gap: 8px; }
.step li { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.step li::before { content: "→ "; color: var(--coral); }
.stack__media { position: relative; }
.stack__sticky { position: sticky; top: 12vh; height: 76vh; }
.stack__img { position: absolute; inset: 0; border-radius: 28px; aspect-ratio: auto; }
.stack__count { position: absolute; right: 18px; top: 16px; z-index: 3; padding: 7px 12px; border-radius: 999px; background: rgba(251,238,224,.85); }
@media (max-width: 860px) {
  .stack { grid-template-columns: 1fr; }
  .stack__media { order: -1; position: sticky; top: 70px; z-index: 2; height: 44vh; }
  .stack__sticky { position: relative; top: 0; height: 44vh; }
  .stack__steps { padding: 6vh 0 20vh; }
  .step { min-height: 60vh; }
}

/* milestones carousel cards */
.mile {
  width: clamp(260px, 26vw, 360px); flex-shrink: 0; padding: 28px; border-radius: 26px; min-height: 340px;
  display: flex; flex-direction: column; justify-content: space-between; user-select: none;
  background: linear-gradient(160deg, #fff6ec, var(--peach)); border: 1px solid rgba(255,255,255,.7);
}
.mile__year { font-family: var(--f-display); font-weight: 200; font-size: 96px; letter-spacing: -.05em; line-height: .95; color: var(--coral); }
.mile h3 { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px; }
.mile p { color: var(--ink-soft); font-size: 14px; }
.mile--us { background: linear-gradient(160deg, var(--ink), #4a3328); color: var(--cream); }
.mile--us p { color: rgba(251,238,224,.7); }
.mile--us .mile__year { color: var(--amber); }

/* ---------- research ---------- */
.scards { padding: 0 var(--gutter) 10vh; background: var(--cream); }
.scard {
  --dim: 0;
  position: sticky; top: calc(12vh + var(--i) * 26px);
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center;
  min-height: 72vh; padding: clamp(24px, 3vw, 44px); margin-bottom: 8vh; border-radius: 34px;
  background: linear-gradient(160deg, #fff7ee, var(--peach)); border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 50px 90px -60px rgba(110,55,30,.55); transform-origin: 50% 0;
}
.scard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: var(--dim); pointer-events: none; }
.scard:nth-child(2) { background: linear-gradient(160deg, #e9f5f3, #cfe7e3); }
.scard:nth-child(3) { background: linear-gradient(160deg, #fff1df, #f6d6b0); }
.scard .ph { aspect-ratio: auto; height: 100%; min-height: 50vh; }
.scard__code { color: var(--teal-deep); }
.scard h3 { font-family: var(--f-display); font-weight: 300; font-size: clamp(42px, 5vw, 84px); letter-spacing: -.03em; line-height: 1.04; margin: 14px 0 20px; }
.scard p { color: var(--ink-soft); font-size: 17px; max-width: 480px; }
.scard dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 28px; }
.scard dt { font: 500 10px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.scard dd { font-family: var(--f-display); font-size: 22px; }
@media (max-width: 860px) { .scard { grid-template-columns: 1fr; top: calc(80px + var(--i) * 16px); } .scard .ph { min-height: 30vh; } }

.pipe { display: grid; gap: 22px; margin-top: 60px; }
.pipe__head, .pipe__row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; }
.pipe__stages { display: grid; grid-template-columns: repeat(4, 1fr); color: rgba(251,238,224,.55); }
.pipe__name { font-family: var(--f-display); font-size: 24px; }
.pipe__name small { display: block; font: 500 10px/1.6 var(--f-mono); letter-spacing: .08em; color: var(--amber); }
.pipe__bar { height: 14px; border-radius: 99px; background: rgba(251,238,224,.1); position: relative; overflow: hidden; }
.pipe__bar::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(251,238,224,.25) calc(25% - 1px) 25%); z-index: 2; }
.pipe__bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--amber), var(--coral)); transform-origin: left; transform: scaleX(0); }
@media (max-width: 700px) { .pipe__head, .pipe__row { grid-template-columns: 1fr; gap: 10px; } .pipe__head > span:first-child { display: none; } }

.platform { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 60px; }
.plat { padding: 30px; border-radius: 26px; background: rgba(251,238,224,.6); border: 1px solid rgba(255,255,255,.6); }
.plat .ph { --r: 4 / 3; margin-bottom: 24px; border-radius: 16px; }
.plat h3 { font-family: var(--f-display); font-weight: 400; font-size: 28px; letter-spacing: -.02em; margin-bottom: 10px; }
.plat p { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 900px) { .platform { grid-template-columns: 1fr; } }

.pubs { margin-top: 50px; border-top: 1px solid var(--line); }
.pub { display: grid; grid-template-columns: 110px 1fr 220px; gap: 24px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); position: relative; }
.pub::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); background: var(--peach); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: 0; }
.pub:hover::before { transform: scaleY(1); }
.pub > * { position: relative; z-index: 1; }
.pub h3 { font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 2.6vw, 40px); letter-spacing: -.02em; line-height: 1.15; transition: transform .6s var(--ease); }
.pub:hover h3 { transform: translateX(12px); font-style: italic; }
.pub .mono { color: var(--ink-soft); }
@media (max-width: 760px) { .pub { grid-template-columns: 1fr; gap: 6px; } }
.preview { position: fixed; left: 0; top: 0; z-index: 70; width: 300px; pointer-events: none; --r: 4 / 3; box-shadow: 0 40px 70px -30px rgba(43,29,23,.5); opacity: 0; visibility: hidden; }

/* ---------- about ---------- */
.story { background: var(--cream); padding-bottom: clamp(60px, 10vh, 120px); }
.story .ph { --r: 21 / 9; border-radius: 0; }
@media (max-width: 760px) { .story .ph { --r: 4 / 3; } }
.band:has(> .timeline) { overflow-x: clip; } /* cards slide in from ±80px */
.timeline { position: relative; max-width: 1100px; margin: 70px auto 0; }
.timeline__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--line); translate: -50% 0; }
.timeline__line i { position: absolute; inset: 0; background: linear-gradient(var(--coral), var(--teal)); transform-origin: top; }
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 40px 0; }
.tl-item::before { content: ""; position: absolute; left: 50%; top: 64px; width: 16px; height: 16px; border-radius: 50%; translate: -50% 0; background: var(--cream); border: 2px solid var(--line); transition: background .5s, border-color .5s, box-shadow .5s; z-index: 2; }
.tl-item.is-on::before { background: var(--coral); border-color: var(--coral); box-shadow: 0 0 0 8px rgba(224,116,90,.18); }
.tl-item__card { grid-column: 1; text-align: right; }
.tl-item:nth-child(odd of .tl-item) .tl-item__card { grid-column: 2; text-align: left; }
.tl-item__year { font-family: var(--f-display); font-weight: 200; font-size: clamp(56px, 7vw, 110px); letter-spacing: -.05em; line-height: .95; color: var(--coral); }
.tl-item h3 { font-family: var(--f-display); font-weight: 400; font-size: 30px; letter-spacing: -.02em; margin: 10px 0; }
.tl-item p { color: var(--ink-soft); max-width: 420px; display: inline-block; }
@media (max-width: 760px) {
  .timeline__line { left: 8px; translate: none; }
  .tl-item { grid-template-columns: 1fr; padding-left: 40px; gap: 0; }
  .tl-item::before { left: 9px; }
  .tl-item__card, .tl-item:nth-child(odd of .tl-item) .tl-item__card { grid-column: 1; text-align: left; }
}

.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px; }
.person .ph { margin-bottom: 18px; }
.person h3 { font-family: var(--f-display); font-weight: 400; font-size: 26px; letter-spacing: -.02em; }
.person .mono { color: var(--teal-deep); margin: 6px 0 10px; display: block; }
.person p { color: var(--ink-soft); font-size: 14px; }
.person .ph img { transition: scale 1s var(--ease); }
.person:hover .ph img { scale: 1.08; }
@media (max-width: 960px) { .people { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .people { grid-template-columns: 1fr; } }

.values { margin-top: 40px; }
.value { display: grid; grid-template-columns: 90px 1fr; gap: 20px; align-items: baseline; padding: 30px 0; border-top: 1px solid rgba(251,238,224,.15); opacity: .3; transition: opacity .6s var(--ease); }
.value.is-on { opacity: 1; }
.value .mono { color: var(--amber); }
.value h3 { font-family: var(--f-display); font-weight: 300; font-size: clamp(34px, 5vw, 80px); letter-spacing: -.03em; line-height: 1.06; }
.value p { grid-column: 2; color: rgba(251,238,224,.65); max-width: 560px; margin-top: 10px; }
@media (max-width: 600px) { .value { grid-template-columns: 1fr; } .value p { grid-column: 1; } }

/* ---------- join ---------- */
.rows { display: grid; gap: 20px; padding: 40px 0; overflow: hidden; background: var(--cream); }
.row { display: flex; gap: 20px; width: max-content; }
.row .ph { width: clamp(220px, 24vw, 360px); --r: 4 / 3; flex-shrink: 0; }

.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px; }
.perk { padding: 26px; border-radius: 22px; background: rgba(251,238,224,.6); border: 1px solid rgba(255,255,255,.6); transition: transform .6s var(--ease), background .6s; }
.perk:hover { transform: translateY(-8px); background: var(--cream); }
.perk b { display: block; font-family: var(--f-display); font-weight: 300; font-size: 54px; line-height: 1; color: var(--coral); margin-bottom: 18px; }
.perk h3 { font-family: var(--f-display); font-weight: 400; font-size: 22px; margin-bottom: 8px; }
.perk p { color: var(--ink-soft); font-size: 14px; }
@media (max-width: 900px) { .perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .perks { grid-template-columns: 1fr; } }

.program .btn--teal { margin-top: 22px; }
.more-link { margin-top: 56px; }
.role-type { color: var(--ink-soft); }

.contact { position: relative; overflow: hidden; }
.contact__burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.contact__grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 100px); }
.contact__info { display: grid; gap: 26px; align-content: start; margin-top: 40px; }
.contact__info a { font-family: var(--f-display); font-size: 28px; border-bottom: 1px solid rgba(251,238,224,.3); padding-bottom: 6px; justify-self: start; transition: color .3s; }
.contact__info a:hover { color: var(--amber); }
.contact__info .mono { color: rgba(251,238,224,.55); display: block; margin-bottom: 6px; }
.form { display: grid; gap: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(251,238,224,.3); font-size: 14px; transition: background .3s, color .3s, border-color .3s; }
.chip[aria-pressed="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(251,238,224,.3); color: var(--cream);
  font: inherit; font-size: 20px; padding: 26px 0 12px; outline: none; resize: none; transition: border-color .3s;
}
.field label { position: absolute; left: 0; top: 26px; color: rgba(251,238,224,.5); pointer-events: none; transition: transform .4s var(--ease), color .3s; transform-origin: left; }
.field input:focus, .field textarea:focus { border-color: var(--amber); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-24px) scale(.72); color: var(--amber); }
.field.is-error input, .field.is-error textarea { border-color: var(--coral); }
.field.is-error label { color: var(--coral); }
.form .btn--dark { justify-self: start; background: var(--cream); color: var(--ink); }
.form .btn--dark:hover { color: var(--cream); }
.contact__note { color: rgba(251,238,224,.55); }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

/* =========================================================
   Language toggle + Greek typography
   ========================================================= */
html[lang="el"]:not(.i18n-ready) body { visibility: hidden; }
.lang {
  display: inline-flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(251,238,224,.6); border: 1px solid var(--line); backdrop-filter: blur(12px);
  font: 500 11px/1 var(--f-mono); letter-spacing: .06em;
}
.lang span { padding: 8px 9px; border-radius: 999px; color: var(--ink-soft); transition: background .3s, color .3s; }
.lang span.is-on { background: var(--ink); color: var(--cream); }
.lang:hover span:not(.is-on) { color: var(--ink); }

html[lang="el"] { --f-display: "Noto Serif Display", "Fraunces", Georgia, serif; }
.nav__logo, .footer__word, .curtain__label { font-family: "Fraunces", Georgia, serif; }
html[lang="el"] .curtain__label { font-family: var(--f-display); }
html[lang="el"] .display, html[lang="el"] .section-title, html[lang="el"] .chapter__title,
html[lang="el"] .join__title, html[lang="el"] .manifesto__text, html[lang="el"] .phero__title { letter-spacing: -.015em; line-height: 1.08; }
html[lang="el"] .display { font-size: clamp(38px, 5.2vw, 88px); }
html[lang="el"] .section-title { font-size: clamp(34px, 4.8vw, 74px); }
html[lang="el"] .hallmarks__head .section-title { font-size: clamp(30px, 3.8vw, 58px); }
html[lang="el"] .chapter__title { font-size: clamp(30px, 3vw, 48px); }
html[lang="el"] .film--page .film__intro .phero__title { font-size: clamp(38px, 5.2vw, 88px); }
html[lang="el"] .join__title { font-size: clamp(38px, 6vw, 104px); }
html[lang="el"] .marquee__track { font-size: clamp(34px, 5.4vw, 84px); }
html[lang="el"] .mono { letter-spacing: .05em; }

/* =========================================================
   Interactive backgrounds
   ========================================================= */
.has-bg { position: relative; isolation: isolate; }
.bgfx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }

/* =========================================================
   Film framing per page (desktop; mobile keeps text below the film)
   ========================================================= */
@media (min-width: 861px) {
  /* research: text on the right */
  body[data-page="research"] .film__intro { left: auto; right: var(--gutter); }
  body[data-page="research"] .chapter { left: auto; right: var(--gutter); }
  body[data-page="research"] .film__scroll { right: auto; left: var(--gutter); }

  /* about: film in the middle, title left, words right */
  body[data-page="about"] .chapter {
    left: var(--gutter); right: var(--gutter); width: auto;
    display: grid; grid-template-columns: min(340px, 24vw) 1fr min(300px, 22vw); align-items: center;
  }
  body[data-page="about"] .chapter__num { grid-column: 1; grid-row: 1; align-self: end; }
  body[data-page="about"] .chapter__title { grid-column: 1; grid-row: 2; margin: 0; }
  body[data-page="about"] .chapter p { grid-column: 3; grid-row: 2; }

  /* careers: film above, one big line below */
  body[data-page="join"] .chapter {
    top: auto; bottom: 34px; translate: none; left: var(--gutter); right: var(--gutter); width: auto;
    display: grid; grid-template-columns: 1fr min(360px, 28vw); column-gap: 40px; align-items: end;
  }
  body[data-page="join"] .chapter__num { grid-column: 1 / -1; margin-bottom: 10px; }
  body[data-page="join"] .chapter__title { margin: 0; font-size: clamp(44px, 6.4vw, 108px); }
  html[lang="el"] body[data-page="join"] .chapter__title { font-size: clamp(36px, 4.6vw, 76px); }
  body[data-page="join"] .chapter p { padding-bottom: 8px; }
}

/* =========================================================
   Page characters
   ========================================================= */
/* SCIENCE: lab notebook. Graph paper, square corners, annotated */
body[data-page="science"] .band--cream, body[data-page="science"] .stack, body[data-page="science"] .gallery {
  background-color: var(--cream);
  background-image: linear-gradient(rgba(33,126,128,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(33,126,128,.07) 1px, transparent 1px);
  background-size: 38px 38px;
}
body[data-page="science"] .ph { border-radius: 6px; }
body[data-page="science"] .stack__img { border-radius: 6px; box-shadow: 14px 14px 0 rgba(33,126,128,.14); }
body[data-page="science"] .mile { border-radius: 4px; border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: var(--cream); }
body[data-page="science"] .mile--us { background: var(--ink); }
body[data-page="science"] .section-title em, body[data-page="science"] .chapter__title em { color: var(--teal-deep); }
body[data-page="science"] .step { border-left: 1px dashed rgba(33,126,128,.4); padding-left: 28px; }
body[data-page="science"] .stat { border-top: 1px dashed var(--ink); }

/* RESEARCH: cool, clinical teal; dark instrument panel */
body[data-page="research"] { background: #dcefeb; }
body[data-page="research"] .band--cream, body[data-page="research"] .scards { background: #e9f4f1; }
body[data-page="research"] .band--peach { background: #cfe7e3; }
body[data-page="research"] .band--ink { background: #0f2e30; }
body[data-page="research"] .section-title em, body[data-page="research"] .chapter__title em { color: var(--teal-deep); }
body[data-page="research"] .band--ink .section-title em { color: #7fd6cf; }
body[data-page="research"] .next { background: #e9f4f1; }
body[data-page="research"] .next__title svg { stroke: var(--teal); }
body[data-page="research"] .pub::before { background: #cfe7e3; }
body[data-page="research"] .plat { background: rgba(255,255,255,.55); }
body[data-page="research"] .ph { border-radius: 30px; }

/* ABOUT: warm editorial. Centred headings, arched portraits */
body[data-page="about"] .band { text-align: center; }
body[data-page="about"] .two-col { text-align: left; }
body[data-page="about"] .section-title em, body[data-page="about"] .chapter__title em { color: #c9812d; }
body[data-page="about"] .band--ink { background: #2a1a10; text-align: left; }
body[data-page="about"] .band--ink .section-title em { color: var(--amber); }
body[data-page="about"] .person { text-align: center; }
body[data-page="about"] .person .ph { border-radius: 999px 999px 22px 22px; }
@media (min-width: 961px) {
  body[data-page="about"] .person:nth-child(even) { translate: 0 70px; }
  body[data-page="about"] .people { padding-bottom: 70px; }
}
body[data-page="about"] .tl-item__year { color: #c9812d; }
body[data-page="about"] .value h3 { font-style: italic; }

/* CAREERS: loud coral. Pill photos, stickers you can throw */
body[data-page="join"] .band--peach { background: var(--coral); color: var(--cream); overflow: hidden; }
body[data-page="join"] .band--peach .eyebrow { color: rgba(251,238,224,.8); }
body[data-page="join"] .band--peach .section-title { font-size: clamp(52px, 9vw, 160px); }
html[lang="el"] body[data-page="join"] .band--peach .section-title { font-size: clamp(38px, 6.4vw, 110px); }
body[data-page="join"] .perk { background: var(--cream); color: var(--ink); border: 0; box-shadow: 0 26px 40px -24px rgba(43,29,23,.6); transition: background .6s; touch-action: pan-y; }
body[data-page="join"] .perk:hover { transform: none; }
body[data-page="join"] .row .ph { border-radius: 999px; }
body[data-page="join"] .section-title em { color: var(--coral); }
body[data-page="join"] .band--peach .section-title em { color: var(--ink); }
body[data-page="join"] .band--ink .section-title em { color: var(--amber); }
body[data-page="join"] .next { background: var(--amber); }
body[data-page="join"] .next .mono { color: var(--ink); }
body[data-page="join"] .next__title svg { stroke: var(--ink); }
body[data-page="join"] .program__row::before { background: var(--blush); }

/* =========================================================
   Home: hallmark cards with photos
   ========================================================= */
.hm { background: var(--ink); color: var(--cream); justify-content: flex-end; isolation: isolate; }
.hm:hover { background: var(--ink); }
.hm__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
.hm::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(43,29,23,.88) 0%, rgba(43,29,23,.3) 45%, rgba(43,29,23,.05) 75%); transition: opacity .6s var(--ease); }
.hm::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(43,29,23,.62); opacity: 0; transition: opacity .6s var(--ease); }
.hm:hover::after { opacity: 1; }
.hm:hover .hm__img { transform: scale(1.08); }
.hm__num, .hm.has-tag .hm__num { position: absolute; top: 22px; right: 24px; margin: 0; font-size: 44px; color: rgba(255,255,255,.92); text-shadow: 0 2px 16px rgba(43,29,23,.5); }
.hm:hover .hm__num { color: var(--amber); }
.hm p, .hm:hover p { color: rgba(251,238,224,.86); }
@media (hover: none) { .hm p { max-height: none; opacity: 1; } }

/* =========================================================
   Science: image and text follow scroll directly, no timed easing
   ========================================================= */
.step { transition: none; }
@media (max-width: 860px) {
  /* outgoing text passes behind the sticky image, so hide it in the strip above the image too */
  .stack__media::before { content: ""; position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: -80px; bottom: 0; background: var(--cream); z-index: -1; }
}

/* =========================================================
   Keep everything on screen, at any size
   ========================================================= */
/* hallmarks: cards take whatever height the pinned screen has left */
.hallmarks__pin { height: 100vh; height: 100svh; padding: 76px 0 24px; justify-content: flex-start; }
.hallmarks__head { margin-bottom: 20px; flex-shrink: 0; }
.hallmarks__track { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.hm { height: auto; max-height: 540px; min-height: 0; }
@media (min-height: 800px) { .hallmarks__pin { justify-content: center; } .hallmarks__track { flex: 0 1 min(62vh, 540px); } }
@media (max-width: 760px) {
  .hallmarks__head { grid-template-columns: 1fr; gap: 8px; }
  .hallmarks__head .section-title { font-size: clamp(26px, 7.4vw, 36px); }
  html[lang="el"] .hallmarks__head .section-title { font-size: clamp(24px, 6.6vw, 32px); }
  .hm { padding: 18px; width: min(76vw, 300px); }
  .hm h3 { font-size: 22px; margin-bottom: 6px; }
  .hm p { font-size: 13px; line-height: 1.4; }
  .hm__tag { left: 18px; top: 18px; }
  .hm__num, .hm.has-tag .hm__num { top: 14px; right: 16px; font-size: 32px; }
}
@media (max-height: 700px) {
  .hallmarks__head .eyebrow { margin-bottom: 0; }
  .hallmarks__head .section-title { font-size: clamp(26px, 3.4vw, 44px); }
}

/* research: tighter stacking cards on short screens; plain flow when they still do not fit */
@media (max-height: 800px) and (min-width: 861px) {
  .scard { top: calc(56px + var(--i) * 14px); min-height: 0; padding: 26px; margin-bottom: 5vh; }
  .scard .ph { min-height: 56vh; }
  .scard h3 { font-size: clamp(32px, 3.8vw, 56px); margin: 8px 0 12px; }
  .scard p { font-size: 15px; }
  .scard dl { margin-top: 16px; gap: 8px 20px; }
  .scard dd { font-size: 18px; }
}
.scards--flow .scard { position: relative; top: 0; min-height: 0; margin-bottom: 20px; }
.scards--flow .scard .ph { min-height: 0; height: auto; aspect-ratio: 4 / 3; }

/* science on phones: smaller sticky image leaves room for the text */
@media (max-width: 860px) {
  .stack__media, .stack__sticky { height: 36vh; height: 36svh; }
  .stack__steps { padding: 4vh 0 30vh; }
  .step { min-height: 56vh; justify-content: flex-start; padding-top: 12px; }
  .step h3 { font-size: clamp(28px, 7.6vw, 40px); margin-bottom: 12px; }
  .step p { font-size: 15px; }
  .step ul { margin-top: 12px; gap: 4px; }
}

/* very small phones: film text must not run over the film */
@media (max-width: 860px) and (max-height: 700px) {
  .display, html[lang="el"] .display, .film--page .film__intro .phero__title, html[lang="el"] .film--page .film__intro .phero__title { font-size: clamp(30px, 8.6vw, 38px); }
  .lede, .phero__lede { margin-top: 12px; font-size: 14px; }
  .film__intro { bottom: 28px; }
  .chapter { bottom: 28px; }
  .chapter__title, html[lang="el"] .chapter__title { font-size: 26px; margin-bottom: 8px; }
  .chapter p { font-size: 14px; }
  .chapter__num { margin-bottom: 8px; }
}

/* =========================================================
   Touch screens: lighter effects, native swipe, nothing fighting the scroll
   ========================================================= */
html.touch body { overflow-x: clip; }
html.touch .grain { display: none; }
html.touch .nav__links, html.touch .btn--pill, html.touch .lang, html.touch .nav__burger, html.touch .age-control { backdrop-filter: none; background: rgba(251,238,224,.94); }
html.touch .hud { backdrop-filter: none; background: rgba(251,238,224,.82); }
html.touch .ph img, html.touch .hm { will-change: auto; }
html.touch .hallmarks__pin { height: auto; overflow: visible; padding: 84px 0 40px; justify-content: flex-start; }
html.touch .hallmarks__track {
  flex: none; width: auto; height: clamp(360px, 58vh, 460px);
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--gutter);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
html.touch .hallmarks__track::-webkit-scrollbar { display: none; }
html.touch .hm { scroll-snap-align: start; }

/* =========================================================
   Accessibility + fallbacks
   ========================================================= */
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 4px; }
.film__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.noscript-note { padding: 120px var(--gutter); background: var(--cream); color: var(--ink); font-size: 18px; }
.cursor__cell { backdrop-filter: none; }
.hm:hover p { max-height: 220px; }
@media (prefers-reduced-motion: reduce) {
  .film__scroll i::after, .curtain__inner .logo-mark { animation: none; }
  .btn::before, .program__row::before, .next__title, .next__title svg { transition: none; }
}