/* AwesomeAgentic front page, round 2, look 2: night and almost empty. Centred lines with a lot of dark around them.
   "Shh." comes first, then "Agents at work.", then the rest appears as you scroll, out of a soft blur, like a
   whisper. The names that are not out yet stay a little blurred. No movement with reduced motion or no script. */

*, *::before, *::after { box-sizing: border-box; }
:root {
  --m: clamp(16px, 5vw, 64px);
  --night: #111343;
  --card: #1c1f57;
  --ink: #252869;
  --soft: #e9ebff;
  --lead: #b4b9e6;
  --teal: #28A9AB;
  --mark: #B4E495;
  --line: rgba(233, 235, 255, .14);
  --ease-o: cubic-bezier(.22, 1, .36, 1);
}
body {
  --fam-ink: #ffffff;
  --fam-hover: rgba(255, 255, 255, .09);
  --fam-mark: #B4E495;
  --fam-pop: #232656;
  --fam-pop-ink: #ffffff;
  --fam-pop-quiet: #b4b9e6;
  --fam-ground: #111343;
  --fam-line: rgba(233, 235, 255, .14);
}
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px;
  background: var(--night); color-scheme: dark; scrollbar-color: #3a3d8f transparent;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--night); color: #fff; overflow-x: clip; text-align: center;
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; caret-color: var(--mark);
}
h1, h2, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg { display: block; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--mark); color: var(--night); }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; border-radius: 4px; }
body .skip { background: var(--mark); color: var(--night); }
.fbar, .fam-foot { text-align: left; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
main > section { padding-left: var(--m); padding-right: var(--m); }

/* ---------- Shh. Agents at work. ---------- */
.w-hero {
  position: relative; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px);
  display: grid; place-content: center; justify-items: center; padding-top: 40px; padding-bottom: 120px;
}
.w-hero h1 {
  font-family: var(--font-serif); font-weight: 900; font-size: clamp(3rem, 1rem + 6vw, 6rem);
  line-height: 1.04; letter-spacing: -.03em;
}
.w-shh { display: block; color: var(--lead); }
.w-at { display: block; }
.w-sub { margin-top: clamp(24px, 4vh, 40px); max-width: 26em; font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.45; color: var(--soft); text-wrap: balance; }
.w-down {
  position: absolute; left: 50%; bottom: 28px; width: 48px; height: 48px; margin-left: -24px;
  display: grid; place-items: center; border-radius: 50%; color: var(--lead); text-decoration: none;
  border: 1px solid var(--line); transition: color .2s ease, border-color .2s ease;
}
.w-down:hover { color: #fff; border-color: rgba(233, 235, 255, .4); }
.w-down svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shared headings ---------- */
.w-do h2, .w-names h2, .w-contact h2 {
  margin: 0 auto; max-width: 18ch; font-family: var(--font-serif); font-weight: 900;
  font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance;
}

/* ---------- We do three things, quietly. ---------- */
.w-do { padding-top: clamp(96px, 18vh, 200px); padding-bottom: clamp(96px, 16vh, 180px); }
.w-three { margin: clamp(48px, 9vh, 96px) auto 0; max-width: 40rem; display: grid; gap: clamp(44px, 8vh, 80px); }
.w-three dt { font-family: var(--font-serif); font-weight: 900; font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.5rem); line-height: 1; letter-spacing: -.025em; }
.w-three dd { margin-top: 14px; color: var(--lead); font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem); }

/* ---------- Some of them have names. ---------- */
.w-names { padding-top: clamp(64px, 10vh, 120px); padding-bottom: clamp(96px, 16vh, 180px); }
.w-list { margin: clamp(44px, 8vh, 88px) auto 0; max-width: 44rem; display: grid; gap: clamp(28px, 5vh, 48px); }
.w-item {
  display: grid; justify-items: center; gap: 10px; padding: 18px 12px; border-radius: 16px;
  color: #fff; text-decoration: none; transition: background-color .3s ease;
}
.w-item:hover { background: var(--card); }
.w-item:focus-visible { outline: 2px solid var(--mark); outline-offset: 4px; border-radius: 16px; }
.w-name { font-family: var(--font-serif); font-weight: 900; font-size: clamp(2.4rem, 1.1rem + 3.8vw, 4.75rem); line-height: 1; letter-spacing: -.025em; }
.w-line { max-width: 24em; font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem); color: var(--soft); }
.w-go {
  margin-top: 6px; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 0 20px;
  border-radius: 999px; background: #fff; color: var(--ink);
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
}
.w-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-o); }
.w-item:hover .w-go svg { transform: translateX(4px); }
.is-soon .w-name { filter: blur(3px); opacity: .8; transition: filter .5s var(--ease-o), opacity .5s ease; }
.is-soon:hover .w-name, .is-soon:focus-visible .w-name { filter: none; opacity: 1; }
.w-soon { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--lead); }
.w-soon::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--teal); }
.is-yours .w-name::after {
  content: ""; display: inline-block; width: .42em; height: .07em; margin-left: .1em; vertical-align: baseline; background: var(--teal);
}

/* ---------- Have work for them? ---------- */
.w-contact { padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(80px, 13vh, 140px); background: var(--card); }
.ask { margin: clamp(32px, 6vh, 56px) auto 0; max-width: 40rem; }
.picks { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.picks legend { float: left; width: 100%; margin-bottom: 14px; padding: 0; font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--soft); }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(233, 235, 255, .32); color: var(--soft);
  font-family: var(--font-heading); font-weight: 600; font-size: 15px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pick span:hover { border-color: rgba(233, 235, 255, .65); }
.pick input:checked + span { background: #fff; border-color: #fff; color: var(--ink); }
.pick input:focus-visible + span { outline: 2px solid var(--mark); outline-offset: 3px; }
/* the mail link: opens the visitor's mail app; the address is written on it for people whose mail lives in a browser */
.ask { text-align: center; }
.ask-go {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; max-width: 100%; padding: 10px 28px;
  border-radius: 8px; background: var(--color-gradient-green); color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px; box-shadow: 0 8px 22px -8px rgba(40, 169, 171, .6); transition: transform .15s ease;
}
.ask-go:hover { transform: translateY(-1px); background: var(--color-gradient-green-hover); }
.ask-go:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

/* ---------- the whisper: only with script and movement on ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .w-shh { animation: whisper 1.1s var(--ease-o) .15s both; }
  .js .w-at { animation: whisper 1.1s var(--ease-o) .75s both; }
  .js .w-sub { animation: whisper 1.1s var(--ease-o) 1.35s both; }
  .js .w-down { animation: whisper 1s var(--ease-o) 2s both; }
  .reveal-on [data-reveal] { opacity: 0; filter: blur(10px); transform: translateY(14px); transition: opacity 1s ease, filter 1.1s var(--ease-o), transform 1.1s var(--ease-o); }
  .reveal-on [data-reveal].in { opacity: 1; filter: none; transform: none; }
  .reveal-on .w-three [data-reveal]:nth-child(2) { transition-delay: .15s; }
  .reveal-on .w-three [data-reveal]:nth-child(3) { transition-delay: .3s; }
  .js .is-yours .w-name::after { animation: blink 1.1s steps(1) 3; }
}
@keyframes whisper { from { opacity: 0; filter: blur(12px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- smaller screens ---------- */
@media (max-width: 599px) {
  .w-hero { padding-bottom: 96px; }
}

/* even line breaks on narrow screens ("Agents / at work.", no word left alone on a line) */
.w-at, .w-line, .w-three dd { text-wrap: balance; }

/* ---------- easier to read (11 Nov, his ask: font size and colours that help the reader) ---------- */
body { font-size: 1.125rem; }
mark { background: none; color: var(--mark); }
.w-sub { max-width: 24em; font-size: clamp(1.3125rem, 1.05rem + .7vw, 1.75rem); line-height: 1.4; color: #fff; }
.w-three dd { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.45; color: var(--soft); }
.w-line { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); color: #fff; }
.is-soon .w-name { color: var(--lead); }
.is-soon:hover .w-name, .is-soon:focus-visible .w-name { color: #fff; }