/* EnquireRev marketing site. Layout: one continuous scene. The rising enquiries sit behind the whole page, fixed to the screen, so the hero and the waitlist are two moments of the same picture with no edge between them. Grey is an enquiry; green is revenue, and the words that matter.
   The page follows the visitor's light or dark setting. Dark: deep black with mint green. Light: white with the same green, deeper, so it reads on white. The --cv values are what the script draws the rising messages with. */
:root {
  color-scheme: light;
  --page: #ffffff; --page-0: rgba(255, 255, 255, 0); --raised: #f2f3f1; --line: rgba(17, 19, 18, 0.1); --line-strong: rgba(17, 19, 18, 0.24);
  --fg: #111312; --text: #3b423e; --muted: #5c625e; --enquiry: #6b736e; --green: #0b7a45; --green-hover: #096539; --on-green: #ffffff;
  --band: rgba(11, 122, 69, 0.055); --band-0: rgba(11, 122, 69, 0); --glow: rgba(11, 122, 69, 0.17); --vignette: rgba(255, 255, 255, 0.9);
  --scrim-a: rgba(255, 255, 255, 0.94); --scrim-b: rgba(255, 255, 255, 0.62); --nav-top: rgba(255, 255, 255, 0.94);
  --form-bg: rgba(255, 255, 255, 0.92); --placeholder: #6f7772; --focus-tint: rgba(11, 122, 69, 0.07);
  --cv-bubble: #eceeeb; --cv-stroke: rgba(17, 19, 18, 0.14); --cv-ink: #3b423e;
  --display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #030504; --page-0: rgba(3, 5, 4, 0); --raised: #0c120f; --line: rgba(190, 215, 203, 0.16); --line-strong: rgba(190, 215, 203, 0.3);
    --fg: #f3fff8; --text: #c9d4ce; --muted: #8f9d96; --enquiry: #a9b4ae; --green: #6ff0ae; --green-hover: #8df5c0; --on-green: #04130c;
    --band: rgba(25, 195, 125, 0.085); --band-0: rgba(25, 195, 125, 0); --glow: rgba(25, 195, 125, 0.26); --vignette: rgba(0, 0, 0, 0.9);
    --scrim-a: rgba(3, 5, 4, 0.9); --scrim-b: rgba(3, 5, 4, 0.55); --nav-top: rgba(3, 5, 4, 0.92);
    --form-bg: rgba(12, 18, 15, 0.86); --placeholder: #7d8a83; --focus-tint: rgba(111, 240, 174, 0.08);
    --cv-bubble: #141b18; --cv-stroke: rgba(190, 215, 203, 0.2); --cv-ink: #cfd9d4;
  }
}
* { box-sizing: border-box; }
::selection { background: var(--focus-tint); color: var(--fg); }
body { background: var(--page); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.6; }
h1, h2, p { margin: 0; }
.hl { color: var(--green); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.in { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px; font: 600 0.98rem var(--body); text-decoration: none; border: 0; cursor: pointer; background: var(--green); color: var(--on-green); transition: background-color 160ms ease; }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 0.9rem; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--green-hover); } }

/* The scene behind everything */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease-out); }
.t-bg .sky { opacity: 1; }
.sky i, .sky canvas { position: absolute; inset: 0; display: block; }
.sky canvas { width: 100%; height: 100%; }
.sky .l1 { overflow: hidden; }
.sky .l1::before { content: ""; position: absolute; inset: 0 0 -240px 0; background: repeating-linear-gradient(to top, var(--band-0) 0, var(--band) 120px, var(--band-0) 240px); animation: up240 8s linear infinite; }
.sky .l2 { background: radial-gradient(110% 70% at 50% 118%, var(--glow), var(--band-0) 62%), radial-gradient(90% 55% at 50% -12%, var(--vignette), var(--page-0) 70%); }
.sky .scrim { background: radial-gradient(44% 44% at 50% 52%, var(--scrim-a), var(--scrim-b) 56%, var(--page-0) 100%); }
@keyframes up240 { to { transform: translateY(-240px); } }
.page { position: relative; z-index: 1; }

/* The top bar stays on screen, so the name has somewhere to dock. */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--page); }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: linear-gradient(to bottom, var(--nav-top), var(--page-0)); }
.nav > .in { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 0.2em; font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1; letter-spacing: -0.035em; color: var(--fg); text-decoration: none; }
/* The mark: the customer's enquiry (outline) and the reply that brings revenue (green, with a dollar sign). It is sized in em, so the hero name and the nav logo keep the same shape while the name docks. */
.mark { width: 1.15em; height: 1.15em; flex: none; }
.mark .m-back { fill: none; stroke: var(--fg); }
.mark .m-front { fill: var(--green); }
.mark .m-dollar { fill: none; stroke: var(--on-green); }
.dock { display: inline-block; transform-origin: 0 0; will-change: transform; }
.rest { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.w { display: inline-block; }
.logo i, .word i { font-style: normal; color: var(--green); }

/* First moment: the name */
.hero { min-height: clamp(520px, calc(92vh - 68px), 820px); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.hero .content { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding-block: 24px 96px; will-change: transform, opacity; }
.word { font-family: var(--display); font-weight: 700; font-size: clamp(2.3rem, 8.5vw, 6rem); line-height: 1; letter-spacing: -0.035em; color: var(--fg); display: inline-flex; align-items: center; gap: 0.2em; white-space: nowrap; clip-path: inset(100% -5% 0 -5%); transform: translateY(12%); transition: clip-path 700ms var(--ease-out), transform 700ms var(--ease-out); }
.t-title .word { clip-path: inset(-10% -5% -15% -5%); transform: none; }
.motto { font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 2.9vw, 1.9rem); letter-spacing: -0.01em; color: var(--fg); }
.motto .enq { color: var(--enquiry); }
.motto span { display: inline-block; opacity: 0; transform: translateY(40%); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.motto .i1 { transition-delay: 60ms; } .motto .i2 { transition-delay: 120ms; } .motto .i3 { transition-delay: 180ms; }
.t-motto .motto span { opacity: 1; transform: none; }
.ui { display: flex; flex-direction: column; align-items: center; gap: 22px; opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.t-ui .ui { opacity: 1; transform: none; }
.sub { max-width: 40ch; font-size: clamp(1rem, 1.7vw, 1.15rem); color: var(--text); text-wrap: balance; }
.cue { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity 400ms var(--ease-out); }
.t-ui .cue { opacity: 1; }
.cue svg { width: 18px; height: 18px; stroke: var(--green); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Second moment: the waitlist. Same scene, no edge. */
.wait { min-height: calc(100vh - 150px); display: flex; align-items: center; padding-block: 10vh 6vh; }
.wait .box, .wait .wrest { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; margin: 0 auto; max-width: 720px; width: 100%; will-change: transform, opacity; }
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--fg); text-wrap: balance; }
.wait .lede { max-width: 46ch; font-size: clamp(1rem, 1.7vw, 1.15rem); text-wrap: balance; }
form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; width: 100%; max-width: 680px; background: var(--form-bg); border: 1px solid var(--line-strong); border-radius: 18px; padding: 10px; text-align: left; }
form label { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; border-radius: 10px; min-width: 0; }
form label span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
form input { font: 500 1rem var(--body); color: var(--fg); background: none; border: 0; padding: 2px 0; min-width: 0; width: 100%; }
form input::placeholder { color: var(--placeholder); opacity: 1; }
form input:focus-visible { outline: none; }
form label:focus-within { background: var(--focus-tint); box-shadow: inset 0 0 0 1px var(--green); }
form .btn { align-self: stretch; min-height: 56px; }
@media (max-width: 700px) { form { grid-template-columns: minmax(0, 1fr); } }
.status { min-height: 1.6em; font-size: 0.95rem; color: var(--muted); }
.status.ok { color: var(--green); font-weight: 600; }

footer > .in { padding-block: 18px 20px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 0.86rem; color: var(--muted); }

.instant, .instant * { transition: none !important; }
.reduce .sky .l1::before { animation: none !important; }
.reduce .word, .reduce .motto span, .reduce .ui, .reduce .cue, .reduce .sky { transition: opacity 200ms ease !important; transform: none !important; clip-path: none !important; }


/* A field that people never see and bots fill in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
footer .logo { font-size: 1rem; }
.status a.quiet { color: inherit; text-decoration: underline; }