/* ==========================================================
   Tomorrow Intended — v2 (minimal)
   Black + one green on the outside, paper + ink on the inside.
   The only shape: the dot.
   ========================================================== */

:root {
  --black: #000;
  --green: #3BFF6B;
  --paper: #EDEDE8;
  --ink: #0A0A0A;
  --grey: #85857F;
  --hair: rgba(10, 10, 10, .14);

  --f: "Geist", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;
  --pad: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f); font-size: 17px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--green); color: var(--ink); }
a { color: inherit; text-decoration: none; }
h1, h2, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.label { color: var(--grey); margin-bottom: clamp(36px, 5vw, 64px); }

/* ---------- Header ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--pad);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .4s, background .4s;
  background: rgba(237, 237, 232, .82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.is-open .bar { opacity: 1; pointer-events: auto; transform: none; }
.bar.on-dark { color: var(--paper); background: rgba(0, 0, 0, .6); }
.bar__mark { font-size: 15px; letter-spacing: -.03em; font-weight: 500; }
.bar__mark i, .row::before, .blink, .end__dot, .word__dot {
  display: inline-block; border-radius: 50%; background: var(--green);
}
.bar__mark i { width: 6px; height: 6px; margin-left: 2px; }
.bar__right { display: flex; gap: 28px; align-items: center; }
.bar__right a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.bar__clock { color: var(--grey); font-variant-numeric: tabular-nums; }

/* ---------- Intro ---------- */
.intro { position: relative; height: 175vh; background: var(--black); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--black); }

.word {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--pad);
  color: #FFFFFF; font-weight: 400; white-space: nowrap;
  font-size: clamp(30px, 9.2vw, 168px); letter-spacing: -.055em; line-height: 1;
}
.word__text .c { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.1em); animation: in .9s var(--ease) forwards; animation-delay: calc(120ms + var(--i) * 45ms); }
@keyframes in { to { opacity: 1; filter: none; transform: none; } }
.word__dot { width: .17em; height: .17em; margin-left: .05em; }
.js .word__dot { visibility: hidden; } /* the portal draws the dot */


.portal {
  position: absolute; inset: 0; z-index: 2;
  background: var(--green);
  clip-path: circle(0px at 50% 50%);
  pointer-events: none;
}
.portal.is-full { pointer-events: auto; }
.portal__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 104px var(--pad) 32px;
  opacity: 0;
}
.portal .label { margin: 0; }
.lead { font-size: clamp(44px, 8.4vw, 144px); line-height: .95; font-weight: 400; letter-spacing: -.06em; }
/* hero: 'We build ___●' with a rolling word */
/* the full stop travels with each word, so it always sits on the line right after the last letter */
.roll .gdot { display: inline-block; width: .16em; height: .16em; border-radius: 50%; background: var(--green); margin-left: .08em; }
.roll { display: inline-block; height: 1.25em; overflow: hidden; vertical-align: top; transition: width .4s var(--ease); white-space: nowrap; }
.roll__track { display: flex; flex-direction: column; align-items: flex-start; transition: transform .45s var(--ease); }
.roll__track span { display: block; height: 1.25em; line-height: 1.25em; }
.hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.hero__sub { max-width: 440px; font-size: clamp(16px, 1.4vw, 19px); color: #4A4A46; }
.hero__down { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Blocks ---------- */
.block { position: relative; padding: clamp(100px, 14vw, 200px) var(--pad) 0; }
.fade { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.fade.in { opacity: 1; transform: none; }

.about__text { font-size: clamp(26px, 3.6vw, 54px); line-height: 1.14; letter-spacing: -.035em; max-width: 1300px; }
.about__text .w { color: rgba(10, 10, 10, .16); transition: color .35s; }
.about__text .w.on { color: var(--ink); }

.triad li {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 40px);
  font-size: clamp(38px, 7vw, 116px); line-height: 1; letter-spacing: -.06em;
  padding: clamp(18px, 2.4vw, 30px) 0;
}
.triad .mono { color: var(--grey); transform: translateY(-.4em); }

/* rows (services + work) */
.row {
  position: relative; display: grid; grid-template-columns: 90px 1fr auto; align-items: baseline; gap: 20px;
  padding: clamp(18px, 2.2vw, 28px) 0;
}
.rows--work .row { grid-template-columns: 90px 1fr auto 160px; }
.row .n { color: var(--grey); }
.row__name { font-size: clamp(28px, 4.2vw, 64px); line-height: 1.05; letter-spacing: -.05em; transition: transform .6s var(--ease); display: inline-block; justify-self: start; }
.row__desc { color: var(--grey); text-align: right; }
.row::before {
  content: ""; position: absolute; left: 66px; top: 50%; width: 10px; height: 10px;
  transform: translate(0, -50%) scale(0); transition: transform .5s var(--ease);
}
.row:hover::before { transform: translate(0, -50%) scale(1); }
.row:hover .row__name { transform: translateX(14px); }
.status { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.st { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.st--live { background: var(--green); box-shadow: 0 0 0 3px rgba(59, 255, 107, .25); }
.st--dev { background: transparent; border: 1.5px solid var(--ink); }
.blink { width: .16em; height: .16em; margin-left: .06em; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }


/* AI */
.big { font-size: clamp(38px, 6.4vw, 104px); line-height: .98; font-weight: 400; letter-spacing: -.06em; }
.grey { color: var(--grey); }
.term { margin-top: clamp(40px, 6vw, 80px); max-width: 880px; background: var(--black); color: #D9D9D4; border-radius: 18px; overflow: hidden; }
.term__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid #1E1E1E; color: #6E6E6A; text-transform: none; }
.term__bar i { width: 9px; height: 9px; border-radius: 50%; background: #2A2A2A; }
.term__bar span { margin-left: 10px; }
.term__bar .term__count { margin-left: auto; font-variant-numeric: tabular-nums; }
.term__body { padding: 22px 22px 26px; min-height: 212px; font-size: clamp(12px, 1.3vw, 15px); line-height: 2; text-transform: none; letter-spacing: 0; }
.tl .t { white-space: pre-wrap; }
.term__body { transition: opacity .25s ease; }
.term__body.out { opacity: 0; }
.tl { display: flex; justify-content: space-between; gap: 16px; }
.tl .ok { color: var(--green); }
.tl--result { color: #FFFFFF; margin-top: 10px; font-size: 1.15em; }
.term .cursor { display: inline-block; width: .6em; height: 1.1em; background: var(--green); vertical-align: middle; animation: blink 1s steps(2) infinite; }
.term__note { color: var(--grey); margin-top: 12px; text-transform: none; letter-spacing: 0; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: clamp(50px, 7vw, 90px); }
.three > div { padding-top: 16px; --line: var(--ink); }
.three p { margin-top: 12px; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.25; letter-spacing: -.02em; }

/* process */
.track { position: relative; }
.track__line { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--hair); }
.track__fill { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.track__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.track__steps li { display: flex; flex-direction: column; gap: 10px; }
.track__steps i { width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); transition: background .4s, border-color .4s, transform .5s var(--ease); }
.track__steps li.on i { background: var(--green); border-color: var(--green); transform: scale(1.3); }
.track__steps span { font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -.045em; margin-top: 18px; }
.track__steps small { color: var(--grey); font-size: 15px; }

/* contact */
.contact__q { font-size: clamp(48px, 10.5vw, 180px); line-height: .95; font-weight: 400; letter-spacing: -.065em; }
.prompt {
  display: flex; align-items: center; gap: 16px; max-width: 900px; margin-top: clamp(40px, 5vw, 70px);
  border-bottom: 1px solid var(--ink); padding: 12px 0;
}
.prompt label { font-size: 22px; }
.prompt input { flex: 1; min-width: 0; font: inherit; font-size: clamp(18px, 2vw, 26px); letter-spacing: -.02em; background: transparent; border: 0; outline: none; color: var(--ink); caret-color: var(--ink); }
.prompt input::placeholder { color: #A5A59F; }
.prompt button { font: inherit; font-family: var(--f-mono); font-size: 12px; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; transition: background .3s, color .3s; }
.prompt button:hover, .prompt button:focus-visible { background: var(--green); color: var(--ink); }
.hintline { color: var(--grey); margin-top: 18px; text-transform: none; letter-spacing: 0; line-height: 1.6; }
.hintline a { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* ---------- Outro: contact, then back into the dot ---------- */
.outro { position: relative; height: 240vh; background: var(--black); }
.end__word {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--pad); color: #FFFFFF; white-space: nowrap;
  font-size: clamp(30px, 9.2vw, 168px); letter-spacing: -.055em; line-height: 1;
  opacity: 0;
}
.end__dot { width: .17em; height: .17em; margin-left: .05em; }
.js .end__dot { visibility: hidden; } /* the closer draws the dot until it lands */
.stage--end.is-closed .end__dot { visibility: visible; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 .12em rgba(59, 255, 107, .18); } }
.closer { position: absolute; inset: 0; z-index: 2; background: var(--paper); color: var(--ink); }
.stage--end.is-closed .closer { opacity: 0; }
.closer__inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 90px var(--pad) 40px; }
.end__meta {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; z-index: 3;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: #6E6E6A; font-variant-numeric: tabular-nums; opacity: 0;
}
.end__meta a { color: var(--paper); }
.end__meta .foot__links { display: flex; gap: 18px; flex-wrap: wrap; }
.end__meta a:hover { color: var(--green); }

:focus-visible { outline: 1px dashed currentColor; outline-offset: 4px; }

/* ---------- Lines that draw themselves out of a small green dot ---------- */
.row, .triad li, .three > div {
  position: relative;
  background: linear-gradient(var(--line, var(--hair)), var(--line, var(--hair))) no-repeat left top / 0% 1px;
  transition: opacity 1s var(--ease), transform 1s var(--ease), background-size 1.4s var(--ease);
}
.row.in, .triad li.in, .three > div.in { background-size: 100% 1px; }
.row::after, .triad li::after, .three > div::after {
  content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
}
.row.in::after, .triad li.in::after, .three > div.in::after { animation: travel 1.4s var(--ease) forwards; animation-delay: inherit; }
@keyframes travel { 0% { left: 0; opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* closing line under each list, drawn once the last item has arrived */
.rows, .triad { position: relative; }
.rows::after, .triad::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hair);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .5s;
}
.rows:has(> .in:last-child)::after, .triad:has(> .in:last-child)::after { transform: scaleX(1); }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .bar__clock { display: none; }
  .row, .rows--work .row { grid-template-columns: 58px 1fr; }
  .row__desc, .status { grid-column: 2; text-align: left; justify-content: flex-start; }
  .row::before { left: 40px; }
  .track__line { display: none; }
  .track__steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .track__steps span { margin-top: 12px; }
  .three { grid-template-columns: 1fr; gap: 24px; }
  .tl { flex-direction: column; gap: 0; }
  .term__body { min-height: 300px; }
}


/* ---------- "Ask" form: one question at a time ----------
   Without JavaScript every question shows and it posts as a normal form. */
.ask { position: relative; max-width: 820px; margin-top: clamp(30px, 4vw, 54px); }
.ask__label { margin-bottom: 18px; }
.ask__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ask__dots { display: flex; gap: 8px; margin-bottom: 22px; }
.ask__dots li { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--hair); transition: background .4s, border-color .4s, transform .4s var(--ease); }
.ask__dots li.done { background: var(--ink); border-color: var(--ink); }
.ask__dots li.now { background: var(--green); border-color: var(--green); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(59, 255, 107, .2); }
.ask__step { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.ask.is-live .ask__step { display: none; }
.ask.is-live .ask__step.is-on { display: flex; animation: ask-in .5s var(--ease) both; }
@keyframes ask-in { from { opacity: 0; transform: translateY(10px); } }
.ask__q { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.045em; }
.ask__row { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--ink); padding: 10px 0; }
.ask__caret { font-size: 20px; color: var(--grey); }
.ask__row input { flex: 1; min-width: 0; font: inherit; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.02em; background: transparent; border: 0; outline: none; color: var(--ink); caret-color: var(--green); }
.ask__row input::placeholder { color: #A5A59F; }
.ask__row:focus-within { border-bottom-width: 2px; padding-bottom: 9px; }
.ask__nav { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ask__go { font: inherit; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 11px 18px; cursor: pointer; transition: background .3s, color .3s; }
.ask__go:hover, .ask__go:focus-visible { background: var(--green); color: var(--ink); }
.ask__go:disabled { opacity: .6; cursor: default; }
.ask__back { font: inherit; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; background: none; border: 0; color: var(--grey); cursor: pointer; padding: 11px 6px; }
.ask__back:hover { color: var(--ink); }
.ask__msg { min-height: 1.6em; margin-top: 12px; color: #B4442C; text-transform: none; letter-spacing: 0; line-height: 1.6; }
.ask.is-done .ask__step, .ask.is-done .ask__nav, .ask.is-done .ask__dots, .ask.is-done .ask__msg, .ask.is-done .ask__label { display: none !important; }
.ask__done { animation: ask-in .6s var(--ease) both; }
.ask__done-title { font-size: clamp(34px, 4.6vw, 60px); line-height: 1; letter-spacing: -.05em; margin-bottom: 14px; }
.ask__done-title .gdot { display: inline-block; width: .16em; height: .16em; border-radius: 50%; background: var(--green); margin-left: .06em; animation: pulse 2.4s ease-in-out infinite; }
.ask__done p:last-child { color: #4A4A46; font-size: 18px; max-width: 46ch; }
.sel-text { color: var(--ink); user-select: all; border-bottom: 1px solid var(--ink); }