/* Homepage body (Evan picked "More clients", 2026-10-05, home-lab2 v1): one statement, "We get you more clients.", pinned while
   new-client notifications drop in around it until the screen is full, then "Book a call". js/home-clients.js. */
.overflow-hidden:has(.hcl) { overflow: clip; }   /* sticky needs clip, not hidden */
.hcl-room { position: relative; height: 420vh; }
.hcl-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hcl .cta { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 10px 0 28px; border-radius: 30px; background: #000; color: #fff; font-size: 18px; text-decoration: none; }
.hcl .cta i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #000; font-style: normal; }
.hcl-pin { background: #fff; }
.hcl-h { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; text-align: center; padding: 0 16px; pointer-events: none; }
.hcl-h :is(h1, h2) { margin: 0; font-size: clamp(56px, 10vw, 168px); line-height: .92; letter-spacing: -.055em; font-weight: 500; color: #000;
   }
.hcl-h :is(h1, h2) span { display: block; }
.hcl-h .cta { justify-self: center; margin-top: 40px; pointer-events: auto; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.hcl.done .hcl-h .cta { opacity: 1; transform: none; }
/* iOS notification banner (Evan 2026-10-05: "perfectly realistic"): light material, 38px squircle icon, SF Pro 15/20,
   bold title + grey time on one line, body up to two lines */
.hcl-c { position: absolute; z-index: 6; width: clamp(300px, 25vw, 364px); display: flex; gap: 10px; align-items: center; padding: 13px 15px 13px 13px; border-radius: 26px;
  /* iOS 26 Liquid Glass (Evan 2026-10-05): clear glass that bends what is behind it, a bright rim, a light catch on the top edge */
  background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.34) 48%, rgba(255,255,255,.5));
  backdrop-filter: blur(14px) saturate(1.9) brightness(1.06); -webkit-backdrop-filter: blur(14px) saturate(1.9) brightness(1.06);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.45), inset 1px 0 1px rgba(255,255,255,.35), inset -1px 0 1px rgba(255,255,255,.35),
    0 0 0 .5px rgba(0,0,0,.06), 0 16px 36px -14px rgba(0,0,0,.22), 0 3px 8px -3px rgba(0,0,0,.08);
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  opacity: 0; transform: translate(-50%, -70px) scale(.92) rotate(var(--r)); transition: opacity .35s, transform .7s cubic-bezier(.2,.9,.3,1.15); }
.hcl-c::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.15) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hcl-c::after { content: ""; position: absolute; left: 8%; right: 30%; top: 1px; height: 38%; border-radius: 26px 26px 50% 50% / 26px 26px 100% 100%; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)); opacity: .55; }
.hcl-c > * { position: relative; z-index: 1; }
.hcl-c.on { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(var(--r)); }
.hcl-c .ic { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8.6px; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.hcl-c .ic svg { width: 24px; height: 24px; }
.hcl-c .ic-phone, .hcl-c .ic-msg { background: linear-gradient(#5bf675, #0cbd2a); }
.hcl-c .ic-mail { background: linear-gradient(#1ad4ff, #1e5cf2); }
.hcl-c .ic-maps { background: linear-gradient(135deg, #b8e7a1, #f1e8c8 55%, #a5d4f5); }
.hcl-c .ic-maps svg { width: 38px; height: 38px; }
.hcl-c .ic-rev { background: linear-gradient(#ffd60a, #ff9f0a); }
.hcl-c .ic-app { background: linear-gradient(#3a3a3c, #000); }
.hcl-c .ic-cal { background: #fff; display: flex; flex-direction: column; justify-content: center; gap: 0; line-height: 1; }
.hcl-c .ic-cal .d { font-size: 8px; font-weight: 600; letter-spacing: .02em; color: #ff3b30; }
.hcl-c .ic-cal .n { font-size: 21px; font-weight: 300; letter-spacing: -.04em; color: #000; margin-top: 1px; }
.hcl-c .tx { min-width: 0; flex: 1; font-size: 15px; line-height: 20px; letter-spacing: -.23px; color: #000; }
.hcl-c .top { display: flex; align-items: baseline; gap: 8px; }
.hcl-c .t { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcl-c .w { flex: none; font-size: 13px; letter-spacing: -.08px; color: rgba(60,60,67,.6); }
.hcl-c .b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) { .hcl-c { width: 268px; padding: 11px 13px 11px 11px; border-radius: 22px; } .hcl-c .tx { font-size: 14px; line-height: 18px; } .hcl-c .ic { width: 34px; height: 34px; border-radius: 7.6px; } }

/* hero load-in, outside reveal.js */
.hcl-h h1 span, .hcl-sub { animation: hcl-in 1s cubic-bezier(.22, 1, .36, 1) both; }
.hcl-h h1 span + span { animation-delay: .1s; } .hcl-sub { animation-delay: .22s; }
.hcl-h h1 { animation: hcl-in 1s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes hcl-in { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } }
.hcl-sub { margin: 22px 0 0; font-size: 19px; color: #48484a; text-shadow: 0 0 20px #fff, 0 0 40px #fff; }
@media (prefers-reduced-motion: reduce) { .hcl-h h1, .hcl-h h1 span, .hcl-sub { animation: none; } }

/* one stage: the sources column (from home-flow A) */
.hcl.fa .hcl-room { height: 630vh; }   /* the old dead tail removed, same pace */
.hcl.fa.scrub .hcl-c { transition: none; }
.fa-lead { position: absolute; z-index: 3; margin: 0; font-size: 17px; color: #75757a; opacity: 0; }
.fa-name { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 14px; font-size: clamp(36px, 4.4vw, 68px); line-height: 1; letter-spacing: -.045em; font-weight: 500; color: #000; text-decoration: none; opacity: 0; white-space: nowrap; }
.fa-name .fa-arr { font-size: .5em; color: #c7c7cc; transition: color .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.fa-name:hover { color: #000; }
.fa-name:hover .fa-arr { color: #000; transform: translateX(6px); }
@media (max-width: 767px) { .fa-name { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .hcl-room { height: auto; } .hcl-pin { position: relative; } .hcl-c, .hcl-h .cta { transition: none; } }
/* phone: too little room, so the cards stay behind the headline (glass shows over the other cards instead) */
@media (max-width: 767px) { .hcl-c { z-index: 2; } .hcl-h :is(h1, h2) { text-shadow: 0 0 24px #fff, 0 0 48px #fff, 0 0 80px #fff; } }
/* sources table (Evan picked "D Organized" in src-lab, 2026-10-05): heading, then notification | service | what it does | arrow on one grid */
.fa-lead { font-size: clamp(30px, 2.6vw, 44px) !important; line-height: 1.05; letter-spacing: -.03em; font-weight: 500; color: #000 !important; white-space: nowrap; }
.fa-name .nm { display: inline-flex; align-items: center; gap: 14px; }
.fa-name .ds { display: none; font-size: 18px; line-height: 1.4; letter-spacing: -.01em; font-weight: 400; color: #6e6e73; }
.fa-name .fa-arr { display: grid; place-items: center; width: .62em; height: .62em; border-radius: 50%; background: #f2f2f4; color: #000 !important; font-size: .42em !important; }
.fa-name:hover .fa-arr { background: #000; color: #fff !important; }
@media (max-width: 767px) { .fa-lead { white-space: normal; width: calc(100% - 32px); font-size: 22px !important; } .fa-name .ds { display: none !important; } }
.fa-name .ds { white-space: normal; }

/* desktop: the table grid (phone keeps the name above each card) */
@media (min-width: 768px) {
.fa-name { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px) 44px; align-items: center; column-gap: 32px; height: 96px; box-shadow: 0 1px 0 #ececf0; }
.fa-name .nm { display: contents; } .fa-name .nm { font-size: clamp(34px, 3.4vw, 52px); }
.fa-name .fa-arr { grid-column: 3; grid-row: 1; justify-self: end; width: 44px; height: 44px; font-size: 18px !important; }
.fa-name .ds { display: block; grid-column: 2; grid-row: 1; font-size: 17px; }
.hcl.td .hcl-c .b { -webkit-line-clamp: 1; }
.hcl.td .hcl-c { width: 330px; }
}
/* Phones (Evan approved 2026-10-05, mobile lab #2): notifications keep moving but sit faded behind the headline, so it always reads first. */
@media (max-width: 767px) { .hcl-c { z-index: 0; filter: opacity(.3); } .hcl-h { z-index: 3; } .hcl-h :is(h1, h2) { text-shadow: 0 0 18px #fff, 0 0 36px #fff; } }
/* Phones (Evan approved 2026-10-05, mobile lab 2 #3): the same notification animation over 3 screens instead of 6.3. */
@media (max-width: 767px) { .hcl-room, .hcl.fa .hcl-room { height: 300vh; } }