/* After the scroll: results, the founders, the project form and the foot. They sit in the page and slide up over the
   stage, so each one has its own solid ground. */
.sec { position: relative; z-index: 2; overflow-x: clip; padding: clamp(104px, 15vh, 176px) var(--gutter) clamp(72px, 11vh, 128px); background: #0E1013; color: #fff; }
.sec[hidden] { display: none; }
.kicker { display: flex; align-items: center; gap: 12px; font: 500 13px/1 var(--mono); letter-spacing: .02em; opacity: .7; }
.kicker::before { content: ""; width: 30px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #0A84FF 0 20%, #30D158 20% 40%, #FFD60A 40% 60%, #FF8A00 60% 80%, #FF3B30 80% 100%); }
.sec__head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 22px clamp(24px, 4vw, 72px); margin-bottom: clamp(40px, 7vh, 80px); }
.sec__head .kicker { grid-column: 1 / -1; }
/* The team line is a claim worth reading in one breath, so each sentence keeps to one row on a wide screen. */
.sec--team .sec__head { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }
.sec--team .sec__head h2 { font-size: clamp(40px, 5.5vw, 100px); }
.sec__head h2, .start__head h2 { font-size: clamp(46px, 7.2vw, 124px); font-weight: 600; letter-spacing: -.052em; line-height: .94; text-wrap: balance; outline: none; }
.sec__sub { max-width: 34ch; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.36; letter-spacing: -.016em; font-weight: 450; opacity: .72; text-wrap: pretty; }

/* Content that only Nico can supply shows as a marked gap, never as a made-up value. */
.fill { display: inline-flex; align-items: baseline; gap: .35em; border-bottom: 2px dashed currentColor; opacity: .82; }
.fill::after { content: "to fill"; font: 600 .4em/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: .36em .55em; border-radius: 99px; box-shadow: inset 0 0 0 1px currentColor; align-self: center; translate: 0 -.12em; white-space: nowrap; }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 18px 16px 24px; border-radius: 999px; background: #fff; color: #0E1013; font-size: 16px; font-weight: 550; letter-spacing: -.012em; transition: gap .4s var(--out), background .3s, color .3s, transform .3s var(--out); }
.btn svg { width: 14px; height: 14px; transition: transform .4s var(--out); }
.btn:hover { gap: 17px; } .btn:hover svg { transform: rotate(-45deg); }
.btn:active { transform: scale(.97); }

/* ---- Results ---- */
.sample { position: absolute; left: 50%; top: 28px; translate: -50% 0; padding: 9px 16px; border-radius: 99px; background: #FFC800; color: #0E1013; font: 600 12px/1.35 var(--mono); width: max-content; max-width: calc(100% - 32px); text-align: center; }
.res { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: end; }
.res__frame { position: relative; aspect-ratio: 16 / 9; border-radius: clamp(18px, 2vw, 30px); overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 20% 10%, #2A2D33, #15171B 60%, #0B0C0F); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.res__play { width: clamp(64px, 6vw, 92px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0E1013; transition: transform .4s var(--out); }
.res__play svg { width: 34%; translate: 6% 0; }
.res__play:hover { transform: scale(1.06); }
.res__video figcaption { margin-top: 16px; font-size: 15px; opacity: .72; }
.res__num { display: block; font-size: clamp(40px, 5vw, 88px); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.res__what { margin-top: 18px; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.34; letter-spacing: -.016em; }
.res__built { margin-top: 28px; display: grid; gap: 8px; font-size: 16px; }
.res__built small { font: 500 12px/1 var(--mono); opacity: .6; }
.res__count { margin-top: clamp(32px, 5vh, 56px); padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .12); font: 500 14px/1.4 var(--mono); opacity: .72; }

/* ---- The founders ---- */
/* The photo sets the room. It is graded down into the section, and it settles from a slight zoom as it scrolls in. */
.team__photo { position: relative; margin: 0 0 clamp(14px, 1.4vw, 22px); aspect-ratio: 21 / 8.4; border-radius: clamp(22px, 2.2vw, 34px); overflow: hidden; background: #1A1D22; }
.team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform: scale(var(--z, 1.08)); filter: saturate(.86) contrast(1.04) brightness(.9); will-change: transform; }
.team__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 16 19 / 0) 55%, rgb(14 16 19 / .42)), radial-gradient(120% 90% at 50% 40%, rgb(14 16 19 / 0) 60%, rgb(14 16 19 / .36)); pointer-events: none; }
.cards { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(12px, 1.3vw, 22px); }
.card { position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; padding: clamp(18px, 1.8vw, 28px); border-radius: clamp(22px, 2.2vw, 34px); background: var(--g); color: var(--f); overflow: hidden;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 30px 60px -30px rgb(0 0 0 / .7); transition: transform .6s var(--out), box-shadow .6s var(--out); }
.card:hover { transform: translateY(-8px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 44px 80px -34px rgb(0 0 0 / .8); }
/* Every row lines up across the three cards, and the empty top is where each founder's photo goes later. */
.card__top { display: flex; justify-content: space-between; align-self: start; padding-bottom: clamp(30px, 2.6vw, 48px); font: 500 13px/1 var(--mono); opacity: .8; }
/* On the two saturated cards (white type on red and on blue) the dimmed lines fell under 4.5:1, so they run at full
   strength there, and the badge pill is a fainter tint so its white type still reads (4.6:1 and 4.7:1). */
.card[style*="--f:#FFFFFF"] :is(.card__top, .card__role, .card__bio) { opacity: 1; }
.card[style*="--f:#FFFFFF"] .card__badge { background: color-mix(in srgb, var(--f) 6%, transparent); }
.card__badges { display: flex; flex-wrap: wrap; gap: 6px; align-self: end; margin-bottom: 14px; }
.card__badge { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 7px 10px 6px; border-radius: 99px; background: color-mix(in srgb, var(--f) 16%, transparent); }
.card__name { font-size: clamp(26px, 2.3vw, 40px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.card__role { margin-top: 8px; font-size: 16px; font-weight: 550; opacity: .82; }
.card__bio { margin-top: 14px; font-size: clamp(15px, 1.02vw, 17px); line-height: 1.42; opacity: .92; max-width: 34ch; }
.card__tags { align-self: end; align-content: flex-start; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding: 16px 0 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--f) 22%, transparent); }
.card__tags li { font-size: 13px; font-weight: 550; padding: 6px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f) 34%, transparent); }
.team__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(28px, 4.5vh, 48px); }
.team__foot p { font-size: clamp(20px, 1.9vw, 30px); font-weight: 550; letter-spacing: -.03em; }

/* ---- The project form ---- */
.sec--start { background: #F3F6F9; color: #0E1013; }
.start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.start__head { position: sticky; top: clamp(96px, 14vh, 140px); display: grid; gap: 26px; }
.start__head h2 { font-size: clamp(44px, 5.6vw, 100px); }
.start__code { justify-self: start; max-width: 100%; padding: 14px 18px; border-radius: 14px; background: #0E1013; overflow: hidden; }
.start__code code { display: block; font: 500 clamp(13px, 1.1vw, 16px)/1.4 var(--mono); letter-spacing: -.02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k1 { color: #4DA6FF; } .k2 { color: #5BE07F; } .k3 { color: #FFE14D; } .k4 { color: #FFA640; } .k5 { color: #FF6B61; } .k6 { color: rgb(255 255 255 / .8); }
.start__alt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 16px; color: #454B54; }
.start__alt a { color: #0E1013; font-weight: 600; border-bottom: 1.5px solid rgb(14 16 19 / .25); transition: border-color .3s; }
.start__alt a:hover { border-color: #0E1013; }
.copy { padding: 6px 12px; border-radius: 99px; font: 500 12px/1 var(--mono); background: rgb(14 16 19 / .07); transition: background .3s; }
.copy:hover { background: rgb(14 16 19 / .12); } .copy.is-done { background: #1FBF4E; color: #fff; }

.brief { position: relative; padding: clamp(22px, 2.6vw, 40px); border-radius: clamp(24px, 2.4vw, 36px); background: #fff; box-shadow: 0 1px 0 rgb(14 16 19 / .04), 0 30px 70px -40px rgb(14 16 19 / .35); min-height: 560px; display: flex; flex-direction: column; }
.brief__bar { height: 4px; border-radius: 4px; background: rgb(14 16 19 / .07); overflow: hidden; }
.brief__bar i { display: block; height: 100%; transform: scaleX(.33); transform-origin: 0 50%; transition: transform .6s var(--out);
  background: linear-gradient(90deg, #0A84FF 0 20%, #30D158 20% 40%, #FFD60A 40% 60%, #FF8A00 60% 80%, #FF3B30 80% 100%); background-size: calc(100% * 3) 100%; }
.brief__count { margin-top: 14px; font: 500 13px/1 var(--mono); color: #6B727C; }
.step { border: 0; padding: 0; margin: 0; min-width: 0; display: none; }
.step.is-on { display: block; animation: stepIn .55s var(--out) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } }
.step legend { padding: 0; margin-top: 28px; font-size: clamp(28px, 2.6vw, 42px); font-weight: 600; letter-spacing: -.042em; line-height: 1.04; }
.hint { margin-top: 10px; color: #6B727C; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.chip { position: relative; cursor: pointer; }
.chip input, .pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px 13px 14px; border-radius: 999px; font-size: 16px; font-weight: 550; letter-spacing: -.015em;
  background: #F3F6F9; color: #0E1013; box-shadow: inset 0 0 0 1px rgb(14 16 19 / .08); transition: background .3s, color .3s, box-shadow .3s, transform .3s var(--out); }
.chip span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--g); box-shadow: inset 0 0 0 1px rgb(14 16 19 / .14); transition: transform .4s var(--out); }
.chip:hover span { transform: translateY(-2px); }
.chip input:checked + span { background: var(--g); color: var(--f); box-shadow: inset 0 0 0 1px rgb(14 16 19 / .12), 0 10px 22px -12px var(--g); }
.chip input:checked + span::before { background: currentColor; transform: scale(.7); box-shadow: none; }
/* Web apps, Design and branding and Something else fill with ink when picked, so each keeps its own mark to tell them apart:
   a pale dot, the five brand colours, and a plus. */
.chip--ink span::before { background: var(--d, var(--g)); }
.chip--ink input:checked + span::before { background: var(--d, #fff); transform: scale(.82); }
.chip--all span::before, .chip--all input:checked + span::before { background: conic-gradient(#0A84FF 0 20%, #30D158 0 40%, #FFD60A 0 60%, #FF8A00 0 80%, #FF3B30 0); box-shadow: none; }
.chip--else span { box-shadow: inset 0 0 0 1.5px rgb(14 16 19 / .28); background: transparent; }
.chip--else span::before { content: "+"; width: auto; height: auto; background: none; box-shadow: none; font-size: 19px; font-weight: 500; line-height: .8; margin-right: -2px; }
.chip--else input:checked + span { box-shadow: none; }
.chip--else input:checked + span::before { background: none; transform: rotate(90deg); }
.chip input:focus-visible + span, .pill input:focus-visible + span { outline: 2px solid #0E1013; outline-offset: 3px; }
.field { display: grid; gap: 9px; margin-top: 22px; }
.field > span { font-size: 14px; font-weight: 550; color: #454B54; }
.field em { font-style: normal; font-weight: 400; color: #7B828C; }
.field input, .field textarea { width: 100%; font: inherit; font-size: 17px; color: #0E1013; padding: 15px 16px; border-radius: 14px; border: 0; background: #F3F6F9; box-shadow: inset 0 0 0 1px rgb(14 16 19 / .08); resize: vertical; transition: box-shadow .25s, background .25s; }
.field textarea { min-height: 120px; line-height: 1.45; }
.field input::placeholder, .field textarea::placeholder { color: #9AA0A8; }
.field input:focus, .field textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px #0A5CFF; }
.field [aria-invalid="true"], .chip input[aria-invalid="true"] + span { box-shadow: inset 0 0 0 2px #E0261C; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.field--wide { grid-column: 1 / -1; }
.group { margin-top: 22px; }
.group > p { font-size: 14px; font-weight: 550; color: #454B54; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pill { cursor: pointer; }
.pill span { display: block; padding: 10px 15px; border-radius: 99px; font-size: 15px; background: #F3F6F9; box-shadow: inset 0 0 0 1px rgb(14 16 19 / .08); transition: background .25s, color .25s; }
.pill:hover span { background: #E7EBF0; }
.pill input:checked + span { background: #0E1013; color: #fff; box-shadow: none; }
.consent { margin-top: 20px; font-size: 14px; color: #7B828C; }
.consent a { color: #0E1013; border-bottom: 1px solid rgb(14 16 19 / .3); }
.brief__err { min-height: 22px; margin-top: 16px; font-size: 15px; font-weight: 500; color: #D0201A; }
.brief__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; }
.brief__nav .next { margin-left: auto; background: #0E1013; color: #fff; }
.brief__nav .next:hover { background: #0A5CFF; }
.back { padding: 14px 6px; font-size: 16px; font-weight: 500; color: #454B54; }
.back:hover { color: #0E1013; }
.brief.is-done .step, .brief.is-done .brief__nav, .brief.is-done .brief__err, .brief.is-done .brief__count { display: none; }
.brief__done { flex: 1; display: grid; align-content: center; justify-items: start; gap: 12px; outline: none; animation: stepIn .6s var(--out) both; }
.brief__done .tick { position: relative; width: 64px; height: 64px; border-radius: 50%; background: #1FBF4E; margin-bottom: 10px; animation: pop .6s var(--out) both .1s; }
.brief__done .tick::after { content: ""; position: absolute; left: 24px; top: 15px; width: 13px; height: 25px; border: solid #fff; border-width: 0 4px 4px 0; rotate: 45deg; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.brief__done h3 { font-size: clamp(36px, 3.4vw, 56px); font-weight: 600; letter-spacing: -.045em; }
.brief__done p { font-size: 18px; color: #454B54; }
.again { margin-top: 18px; font-size: 15px; font-weight: 550; border-bottom: 1.5px solid rgb(14 16 19 / .25); }

/* ---- The foot, and the top bar past the worlds ---- */
.after { min-height: 0; padding-top: clamp(96px, 14vh, 150px); }
.after__row { padding: 0 var(--gutter); }
.after__row nav { flex-wrap: wrap; }
.after__legal { display: flex; gap: 22px; padding: 0 var(--gutter); font-size: 13px; color: rgb(255 255 255 / .5); margin-top: calc(clamp(32px, 6vw, 72px) * -.5); }
.after__legal a:hover { color: #fff; }
.after__word { padding: 0 var(--gutter) .16em; font-size: 21vw; }
/* Past the worlds the bar takes the ink of whatever it sits on: white over the dark sections, dark over the form. */
html.beyond .nav { --fg: #fff; --bg: #0E1013; }
html.beyond.on-light .nav { --fg: #0E1013; --bg: #F3F6F9; }
html.beyond .cur { color: #fff; } html.beyond.on-light .cur { color: #0E1013; }
html.at-foot .nav nav { opacity: 0; pointer-events: none; }
.nav nav { transition: opacity .4s; }
/* Past the worlds the page scrolls under the bar (a cream card, a paragraph), so the bar gets glass in its own ground colour and the links stay readable. */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--bg) 76%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--fg) 10%, transparent); transition: opacity .45s, background-color .45s; }
html.beyond .nav::before { opacity: 1; }
@media (prefers-reduced-transparency: reduce) { .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); } }

@media (max-width: 899px) {
  .sec__head { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .card__top { padding-bottom: 28px; } .card:not(:last-child) { margin-bottom: 12px; }   .team__photo { aspect-ratio: 4 / 3; }
  .res { grid-template-columns: 1fr; }
  .start { grid-template-columns: 1fr; }
  .start__head { position: static; }
  .brief { min-height: 0; }
  .fields { grid-template-columns: 1fr; }
  .after__row nav { gap: 14px 22px; }
}
@media (prefers-reduced-motion: reduce) { .step.is-on, .brief__done, .brief__done .tick { animation: none; } .card, .btn { transition: none; } }
.brief__done[hidden] { display: none; }

/* ---- The scroll cue: a first-time visitor learns the page moves when they scroll ---- */
/* Bottom right, above the menu: clear of every world's headline, which all sit on the left. */
.cue { position: fixed; right: var(--gutter); bottom: calc(clamp(66px, 10.5vh, 96px) + 22px); z-index: 25; display: flex; align-items: center; gap: 12px; color: var(--fg); pointer-events: none; opacity: 0; translate: 0 14px; transition: opacity .7s, translate .7s cubic-bezier(.2, .8, .2, 1), color .45s, background-color .45s;
  /* A pill in the world's own ground, so the cue still reads when it lands over a 3D piece (the kettlebell's plate, the mug's saucer). */
  padding: 8px 16px 8px 10px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (prefers-reduced-transparency: reduce) { .cue { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); } }
.cue.on { opacity: .92; translate: 0 0; }
.cue__mouse { position: relative; width: 24px; height: 37px; border-radius: 13px; box-shadow: inset 0 0 0 1.8px currentColor; }
.cue__mouse i { position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: cue-roll 1.9s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes cue-roll { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { opacity: 0; } }
.cue__chev { display: none; width: 14px; height: 14px; border: solid currentColor; border-width: 2px 2px 0 0; rotate: -45deg; animation: cue-up 1.6s ease-in-out infinite; }
@keyframes cue-up { 0%, 100% { translate: 0 4px; opacity: .5; } 50% { translate: 0 -4px; opacity: 1; } }
.cue__label { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
/* On a phone the bottom of the first screen is all words (the line, the code, the menu), so the cue sits under the nav,
   over the 3D piece, where it covers no text. */
@media (hover: none) { .cue__mouse { display: none; } .cue__chev { display: block; } .cue { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + var(--cue-top, 84px)); translate: 0 -14px; } .cue.on { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .cue__mouse i, .cue__chev { animation: none; } .cue { transition: opacity .3s; } }