/* The closing call to action: the homepage's (A141), and since A185 every page that has one (final_cta() in build_pages.py). One screen, everything centred, with Froxen's closing CTA as inspiration only.
   Ryan's picks (2026-11-07): the copy "More calls. / More booked jobs." and a crisp wave of light behind it. Two waves
   flow slowly sideways: the front one our green and Pine with a pale core, the back one amber, green and teal, fainter.
   Each is three strokes of one path: a wide soft glow, a band, and a sharp core line, so it reads as light rather than
   a blur. The path repeats every 1440 units and the drawing is two repeats wide, so sliding it half its width loops
   with no seam. Strokes keep their width at any screen size (non-scaling-stroke). With reduced motion the waves hold
   still. Turned down before this: the green-light photo, a filling calendar, drifting glows, a giant star and our site
   pages as a backdrop. */
.hc { --hc-accent: var(--accent); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(32px, 3.6vw, 52px); min-height: 100vh; min-height: 100svh; padding-block: var(--section-y); background: #0a0a0a; color: #fff; text-align: center; }

/* ---------- The light ---------- */
.hc__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* the light dims where the paragraph and buttons sit, so the flowing core line never runs through the small text */
.hc__light { position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 30% 15% at 50% 67%, rgb(0 0 0 / .15) 50%, #000 100%);
  mask-image: radial-gradient(ellipse 30% 15% at 50% 67%, rgb(0 0 0 / .15) 50%, #000 100%); }
.hc__defs { position: absolute; }
.hc__wave { position: absolute; left: 0; top: 0; width: 200%; height: 100%; animation: hc-flow 46s linear infinite; }
.hc__wave svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hc__wave path { fill: none; stroke-linecap: round; }
/* the blur sits on each stroke's own svg box, which every browser supports */
.hc__w-glow { opacity: .2; filter: blur(56px); }
.hc__w-glow path { stroke-width: 220px; }
.hc__w-band { opacity: .36; filter: blur(16px); }
.hc__w-band path { stroke-width: 44px; }
.hc__w-core { opacity: .55; filter: drop-shadow(0 0 4px rgb(44 221 127 / .4)); }   /* toned down (Ryan: "slightly toned down") */
.hc__w-core path { stroke: #d8efe2; stroke-width: 2px; }
.hc__wave--back { opacity: .6; animation-duration: 70s; animation-direction: reverse; }
.hc__wave--back .hc__w-core { opacity: .32; }
.hc__wave--back .hc__w-core path { stroke: #ffe9c7; }
@keyframes hc-flow { to { transform: translateX(-50%); } }
/* a dark pool behind the words so the white heading stays the brightest thing; the page colour at the top and bottom */
.hc__bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 42% 42% at 50% 50%, rgb(10 10 10 / .72), rgb(10 10 10 / .35) 70%, rgb(10 10 10 / 0)); }
.hc__bg::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(#0a0a0a, rgb(10 10 10 / 0) 18%, rgb(10 10 10 / 0) 84%, #0a0a0a); }

/* ---------- The words and the action ---------- */
.hc__head, .hc__foot { padding-inline: var(--gutter); }
.hc__head .ebx { margin-bottom: clamp(20px, 2vw, 28px); }
#book .hc__title { margin: 0; color: #fff; font-size: clamp(56px, 8.4vw, 150px); line-height: .9; letter-spacing: -.01em; text-wrap: balance; }
#book .hc__title .v3-em { display: block; color: var(--hc-accent); }
/* A185: inner pages' headings vary in length. --hc-n is the longest line's letters, so a long heading comes down until each
   line fits the page; short ones stay at the homepage size. */
#book .hc__title--fit { font-size: max(40px, min(clamp(56px, 8.4vw, 150px), calc((100vw - 2 * var(--gutter)) / (var(--hc-n) * .37)))); }

.hc__foot { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.hc__foot p { margin: 0; max-width: 44ch; color: rgb(255 255 255 / .82); font: 400 18px/1.55 Inter, system-ui, sans-serif; text-wrap: pretty; }
.hc__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; }
.hc__actions .roll { --b-ink: var(--on-accent); --b-acc: #fff; --b-on: #0b0b0d; background: var(--hc-accent); color: var(--on-accent); box-shadow: none;
  font: 700 13px/1 Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.hc__call { padding-bottom: 2px; border-bottom: 1px solid var(--hc-accent); color: #fff; font: 600 15px/1.2 Inter, system-ui, sans-serif; text-decoration: none; }
.hc__call:hover { color: var(--hc-accent); }

@media (max-width: 760px) {
  .hc__wave { width: 420%; }   /* phones: the same wave, wider, so its curve still reads */
  .hc__w-glow path { stroke-width: 140px; }
  .hc__w-band path { stroke-width: 30px; }
  .hc__foot p { font-size: 16px; }
  .hc__actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .hc__wave { animation: none; }
}