/* ==========================================================================
   Home hero, variant A: "Living watercolour".
   The client's tree sits in a wash of pigment painted live by js/bloom.js
   (WebGL). The painter "reserves" the paper where the words are, so the copy
   always sits on light paper. Without WebGL (or without JS) a static CSS wash
   in the same token colours takes its place, so the hero is never empty.
   Everything is scoped under .hero-a.
   ========================================================================== */

.hero-a {
  --tree-w: clamp(340px, 49svh, 450px);
  --wash-x: 73%;
  --wash-y: 44%;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: max(640px, min(100vh, 940px));
  min-height: max(640px, min(100svh, 940px));
  padding: calc(var(--header-h) + clamp(16px, 3vw, 40px)) 0 clamp(40px, 5vw, 72px);
  background: var(--paper);
}

/* ---------- the painted layer ---------- */
.hero-a__canvas,
.hero-a__wash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-a__canvas { z-index: -1; max-width: none; }
.hero-a__wash {
  z-index: -2;
  /* fallback wash: the same glazes as the shader, as soft radial layers */
  background:
    radial-gradient(22% 26% at calc(var(--wash-x) + 10%) calc(var(--wash-y) - 14%), var(--lilac) 0%, transparent 70%),
    radial-gradient(22% 26% at calc(var(--wash-x) - 9%) calc(var(--wash-y) + 16%), var(--blush) 0%, transparent 70%),
    radial-gradient(32% 42% at var(--wash-x) var(--wash-y), var(--sage-field) 0%, transparent 72%);
  background:
    radial-gradient(22% 26% at calc(var(--wash-x) + 10%) calc(var(--wash-y) - 14%), color-mix(in srgb, var(--lilac-mid) 58%, transparent) 0%, transparent 70%),
    radial-gradient(22% 26% at calc(var(--wash-x) - 9%) calc(var(--wash-y) + 16%), color-mix(in srgb, var(--rose) 44%, transparent) 0%, transparent 70%),
    radial-gradient(9% 11% at calc(var(--wash-x) - 4%) calc(var(--wash-y) - 24%), color-mix(in srgb, var(--honey) 60%, transparent) 0%, transparent 75%),
    radial-gradient(32% 42% at var(--wash-x) var(--wash-y), color-mix(in srgb, var(--sage) 72%, transparent) 0%, color-mix(in srgb, var(--sage) 30%, transparent) 55%, transparent 72%);
}
/* With JS the fallback waits: bloom.js either paints (is-gl) or asks for it
   straight away (is-flat). If bloom.js never runs, it fades in on its own. */
html.js .hero-a__wash { opacity: 0; animation: hero-a-wash 1.2s var(--ease-out) 2.4s both; }
html.js .hero-a.is-flat .hero-a__wash { animation-delay: .1s; }
.hero-a.is-gl .hero-a__wash { display: none; }
@keyframes hero-a-wash { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- layout: words left, tree right ---------- */
.hero-a__in {
  position: relative;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-areas: "copy art";
  column-gap: clamp(24px, 4vw, 64px);
}
.hero-a__copy { grid-area: copy; }
.hero-a__art { grid-area: art; justify-self: center; position: relative; }
.hero-a__tree {
  width: min(100%, var(--tree-w)); height: auto;
  /* let the painted ground dissolve into the wash instead of ending in a hard edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
}
html.js .hero-a__tree { animation: hero-a-tree 1.3s var(--ease-out) both; }
@keyframes hero-a-tree { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- type ---------- */
.hero-a__eyebrow { margin-bottom: clamp(1rem, 1.6vw, 1.5rem); }
.hero-a__title { margin-bottom: .32em; max-width: 11ch; }
.hero-a__lead { max-width: 25em; margin-bottom: 0; }
.hero-a__actions { margin-top: clamp(1.6rem, 2.6vw, 2.3rem); width: fit-content; max-width: 100%; }
.hero-a__trust {
  margin-top: clamp(1.8rem, 3vw, 2.6rem); padding-top: 1.25rem;
  border-top: 1px solid var(--line); max-width: 30rem;
}

/* ---------- tablets and phones: the tree rises above the headline, on the right ---------- */
@media (max-width: 899px) {
  .hero-a {
    --tree-w: clamp(150px, 24svh, 250px);
    --wash-x: 80%;
    --wash-y: 20%;
    justify-content: center;
    padding-top: calc(var(--header-h) + clamp(12px, 3vw, 32px));
  }
  .hero-a__in {
    grid-template-columns: minmax(0, 1fr) var(--tree-w);
    column-gap: clamp(14px, 3vw, 32px);
    grid-template-areas:
      "eyebrow art"
      "title title"
      "lead lead"
      "actions actions"
      "trust trust";
    align-items: end;
  }
  .hero-a__copy { display: contents; }
  .hero-a__art { justify-self: end; width: 100%; margin-bottom: clamp(10px, 2vw, 20px); }
  .hero-a__tree { width: 100%; }
  .hero-a__eyebrow { grid-area: eyebrow; align-self: end; justify-self: start; align-items: flex-start; }
  .hero-a__eyebrow::before { margin-top: .3em; }
  .hero-a__title { grid-area: title; max-width: 12ch; }
  .hero-a__lead { grid-area: lead; }
  .hero-a__actions { grid-area: actions; }
  .hero-a__trust { grid-area: trust; }
}
@media (max-width: 599px) {
  .hero-a { --tree-w: clamp(80px, calc(15.5svh + 9px), 150px); justify-content: flex-start; padding-bottom: 32px; }
  .hero-a__eyebrow { margin-bottom: .9rem; line-height: 1.5; }
  .hero-a__title { margin-bottom: .28em; }
  .hero-a__actions { margin-top: 1.25rem; gap: .6rem; }
  .hero-a__actions { width: auto; }
  .hero-a__actions .btn { width: 100%; min-height: 54px; padding-block: .75rem; }
  /* a short column, so on small phones it never runs under the Leave-this-site button */
  .hero-a__trust { margin-top: 1.6rem; padding-top: 1rem; flex-direction: column; gap: .3rem; width: fit-content; justify-self: start; }
}

/* tablets (600 to 1024 wide): size the hero to its content, so no dead gap is left under the trust row */
@media (min-width: 600px) and (max-width: 1024px) {
  .hero-a { min-height: 0; justify-content: flex-start; padding-top: calc(var(--header-h) + clamp(32px, 5vw, 56px)); padding-bottom: clamp(56px, 8vw, 88px); }
}

/* ---------- pause control (WCAG 2.2.2) ----------
   The button ships with [hidden]; bloom.js shows it unless TTHC.still, and flips
   its label (Pause / Play movement) and the --paused icon. Art's bottom-left on wide screens, an icon-only circle on the art's
   top-right on tablets and phones: never near "Book a free call", never bottom-right. */
.hero-a .hero-pause {
  grid-area: art; align-self: end; justify-self: start; z-index: 2;
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem 1.05rem .45rem .9rem;
  border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 86%, transparent);
  color: var(--forest); font: 700 .92rem/1.1 var(--sans); cursor: pointer; transition: background .2s;
}
.hero-a .hero-pause[hidden] { display: none; }
.hero-a .hero-pause:hover { background: var(--white); }
.hero-a .hero-pause::before { content: ""; flex: none; box-sizing: border-box; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.hero-a .hero-pause--paused::before { width: 0; height: 0; border-inline: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
@media (max-width: 899px) {
  .hero-a .hero-pause { align-self: end; justify-self: start; width: 44px; padding: 0; justify-content: center; } /* bottom-left of the art: clear of the canopy */
  .hero-a .hero-pause__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}