/* Ameyo — its own stylesheet, sharing NOTHING with clver.ca.

   The two sites sat on one stylesheet and read as one company with two names.
   They are a parent and a product and should not look alike, so every axis is
   deliberately inverted rather than merely retinted:

     clver.ca            ameyo.ca
     hard-edged blocks   soft blurred gradient
     left text + slash   centred column
     geometric sans      humanist sans
     mitred square mark  gradient ring + heart
     white, flat         atmospheric wash

   Colours are taken from the Ameyo mark itself, so the background is the logo
   out of focus rather than a palette invented alongside it. */

:root {
  --bg: #fbfcfd;
  /* Darker than they look like they need to be, because they are not read on
     white — they are read on white PLUS whatever the wash puts there. Measured
     against a 14% blob tint (the pessimistic case): 7.23 / 5.07 / 4.71, so all
     three clear WCAG AA for normal text even where the colour is strongest.
     The first draft used #5b7387 and #8aa0b1, which measure 4.81 and 2.64 on
     clean paper and 3.88 and 2.13 under tint — a wash that quietly costs you
     legibility is the standard way this kind of background goes wrong. */
  --ink: #2f4a63;
  --ink-soft: #4a6174;
  --ink-faint: #4f6678;
  --rule: #dde5ed;
  --card: rgba(255, 255, 255, 0.82);

  /* Straight off the mark. */
  --blue: #2586c0;
  --purple: #a335a4;
  --pink: #d2276a;
  --heart: #7e97ac;

  /* Low on purpose. At 0.42 the blobs met in the middle and the whole viewport
     became a colour field — pretty, but it reads as a wellness brand and it put
     body copy on a pink ground. The wash should pool at the EDGES and leave the
     centre, where the words are, close to clean paper. */
  --aurora-alpha: 0.2;
  --max: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1720;
    --ink: #e6eef5;
    --ink-soft: #a8bccd;
    --ink-faint: #7e94a7;
    --rule: #22323f;
    --card: rgba(18, 30, 41, 0.72);
    /* Higher than light mode — saturated colour on a dark ground reads dimmer
       than the same colour on white — but nowhere near enough to bathe the page. */
    --aurora-alpha: 0.3;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* Humanist, not geometric — the one type decision that keeps this from
     reading as clver.ca in different colours. */
  font: 400 17px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── the wash ─────────────────────────────────────────────────────────────
   Three blurred blobs in the mark's own three colours. `fixed` so it is the
   room the page sits in rather than a banner at the top: scrolling moves the
   content across a still background, which is the calm end of this effect.
   z-index -1 keeps it under everything without needing a stacking context on
   any ancestor. */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: var(--aurora-alpha);
  /* The blur is what turns three flat circles into weather. It must be large
     relative to the blob or the edges stay legible as circles. */
  filter: blur(90px);
  will-change: transform;
}

/* Mostly OFF-canvas. Each blob shows one shoulder at a corner and keeps its mass
   outside the viewport, which is what leaves the middle clear. */
.aurora i:nth-child(1) {
  width: 40rem; height: 40rem;
  top: -21rem; left: -17rem;
  background: var(--blue);
  animation: drift-a 34s ease-in-out infinite alternate;
}

.aurora i:nth-child(2) {
  width: 34rem; height: 34rem;
  top: -15rem; right: -17rem;
  background: var(--purple);
  animation: drift-b 41s ease-in-out infinite alternate;
}

.aurora i:nth-child(3) {
  width: 34rem; height: 34rem;
  bottom: -21rem; left: 6%;
  background: var(--pink);
  animation: drift-c 47s ease-in-out infinite alternate;
}

/* Deliberately mismatched, prime-ish durations: equal ones would sync up and
   the whole field would pulse together, which reads as a loop rather than as
   drift. Only `transform` is animated, so this stays on the compositor and
   never triggers layout. */
@keyframes drift-a { to { transform: translate3d(6rem, 4rem, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-5rem, 6rem, 0) scale(0.9); } }
@keyframes drift-c { to { transform: translate3d(4rem, -5rem, 0) scale(1.15); } }

/* A slowly moving background is a vestibular trigger, and nothing here depends
   on the motion — the wash is just as good standing still. */
@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none; }
}

/* ── layout ───────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

/* The benefits row only. 46rem is a good measure for a paragraph and a poor one
   for three columns beside each other. */
.wrap.wide { max-width: 56rem; }

nav { padding: 1.75rem 0; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}

.brand img { width: 30px; height: 30px; display: block; }

.brand b {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  /* The wordmark is lowercase in the original artwork. */
  text-transform: lowercase;
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 3rem 0 4rem;
}

.hero .wrap { text-align: center; }

.hero-mark {
  width: clamp(6.5rem, 17vw, 9.5rem);
  height: auto;
  margin: 0 auto 2.25rem;
  display: block;
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.028em;
  font-weight: 600;
  color: var(--ink);
}

h1 em {
  font-style: normal;
  display: block;
  /* The mark's sweep, reused as ink. background-clip is progressively enhanced:
     without it the text simply inherits --ink and stays readable. */
  background: linear-gradient(100deg, var(--blue), var(--purple) 52%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  margin: 1.5rem auto 0;
  max-width: 40ch;
  color: var(--ink-soft);
  font-size: 1.04rem;
}

.hero a { color: var(--ink); text-decoration-color: var(--rule); }
.hero a:hover { color: var(--purple); }

/* ── benefits ─────────────────────────────────────────────────────────────── */

/* Left-aligned inside centred columns. The hero is centred because it is three
   short lines; body copy set centred over three columns is genuinely harder to
   read, and this is the part someone actually reads rather than glances at. */
/* Explicitly THREE, not auto-fit. auto-fit with a 15rem minimum could only fit
   two inside the 46rem text column once the gaps were counted, so the third
   dropped to a second row and the set read as 2 + 1. */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
  list-style: none;
  margin: 0 0 3.5rem;
  padding: 0;
  text-align: left;
}

.benefits b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
}

.benefits span { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.65; }

/* ── contact ──────────────────────────────────────────────────────────────── */

main { padding-bottom: 3.5rem; }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 1.1rem;
  padding: 2rem;
  /* The card is translucent so the wash shows through it — that is what ties
     the foreground to the background instead of stacking a white box on top of
     a pretty picture. backdrop-filter is an enhancement; where it is missing
     --card is opaque enough to stay legible on its own. */
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* The invitation above the addresses. Centred to match the card's heading, and
   held to a readable measure so it does not run the full card width. */
.invite {
  max-width: 46ch;
  margin: 0 auto 1.75rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1rem;
}

h2 {
  margin: 0 0 1.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.4rem;
  margin: 0;
}

.contact dt {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}

.contact dd { margin: 0; }

.contact a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  font-size: 1rem;
}

.contact a:hover { color: var(--purple); border-color: currentColor; }

/* ── footer ───────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 2.5rem;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

footer .wrap { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
footer a { color: var(--ink-faint); }
footer .spacer { margin-left: auto; }

/* Three columns need roughly 56rem to breathe. Below that they stack rather than
   squeeze, held to a readable measure and centred so the block still sits under
   the centred hero rather than drifting left. */
@media (max-width: 52rem) {
  .benefits {
    grid-template-columns: 1fr;
    gap: 1.9rem;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .card { padding: 1.5rem; border-radius: 0.9rem; }
  footer .spacer { margin-left: 0; }

  /* THE BLOBS MUST SHRINK WITH THE VIEWPORT. They are sized in rem, so at 375px
     the same three circles that only show a shoulder each on a desktop cover the
     entire screen and overlap in the middle — the page went back to being a
     colour field, and on the one device most likely to be read in sunlight.
     Roughly two-thirds the size, pulled proportionally further off-canvas. */
  :root { --aurora-alpha: 0.14; }
  .aurora i:nth-child(1) { width: 26rem; height: 26rem; top: -14rem; left: -11rem; }
  .aurora i:nth-child(2) { width: 22rem; height: 22rem; top: -10rem; right: -11rem; }
  .aurora i:nth-child(3) { width: 22rem; height: 22rem; bottom: -14rem; left: 2%; }

  /* Blur is per-pixel work and a phone GPU pays it on every frame the wash
     moves; a smaller radius suits the smaller blobs anyway. */
  .aurora i { filter: blur(64px); }
}

/* Dark still needs more than light to register as colour at all, and the rule
   above would otherwise flatten mobile dark to the light value. */
@media (max-width: 40rem) and (prefers-color-scheme: dark) {
  :root { --aurora-alpha: 0.24; }
}