/* ==========================================================================
   Help now page (help-contact builder). Everything scoped under .pg-help.
   The urgent part (hero + helplines) has no motion and no reveals:
   it must be readable the instant the page paints.
   ========================================================================== */

/* ---------- hero: 999, nothing else competing ---------- */
.pg-help .help-hero h1 { max-width: none; margin-bottom: 0; }
.pg-help .help-hero h1 em { display: block; }

.help-calls { display: grid; gap: .75rem; margin-top: clamp(1.5rem, 3vw, 2.4rem); max-width: 46rem; }
@media (min-width: 640px) { .help-calls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.help-call {
  display: flex; align-items: center; gap: 1rem; min-height: 80px; padding: .8rem 1.4rem .8rem .9rem;
  border-radius: var(--r); border: 2px solid var(--rose-deep); text-decoration: none;
  font-weight: 700; font-size: clamp(1.2rem, 1.1rem + .35vw, 1.4rem); line-height: 1.2;
  transition: background .2s, box-shadow .25s;
}
.help-call:hover { text-decoration: none; }
.help-call__ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; flex: none; }
.help-call__ico .ico { width: 24px; height: 24px; }
.help-call__kicker { display: block; margin-bottom: .15rem; font-size: 1rem; color: var(--ink-soft); }

.help-call--main { background: var(--rose-deep); color: var(--white); box-shadow: 0 16px 32px -18px var(--rose-deep); }
.help-call--main:hover { background: color-mix(in srgb, var(--rose-deep) 84%, var(--ink)); color: var(--white); }
.help-call--main .help-call__ico { background: color-mix(in srgb, var(--white) 18%, transparent); }
.help-call--main .help-call__text { font-size: 1.2em; }

.help-call--quiet { background: var(--white); color: var(--rose-deep); }
.help-call--quiet:hover { background: var(--blush); color: var(--rose-deep); }
.help-call--quiet .help-call__ico { background: var(--blush); }

.help-hero__not {
  display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 0;
  font-weight: 700; font-size: 1.05rem; color: var(--ink);
}
.help-hero__not::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rose-deep); }

/* ---------- helplines + staying safe online, side by side on wide screens ---------- */
.help-safety__grid { display: grid; gap: clamp(48px, 6vw, 80px); align-items: start; }
/* "Staying safe online" sits right beside the box and says all of this in full, so the box's own note would repeat it */
.help-safety .helpbox__note { display: none; }
@media (min-width: 1024px) {
  .help-safety__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .help-online { padding-top: clamp(24px, 3.5vw, 44px); }
}
.help-online h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom: .4rem; }
.help-online__intro { color: var(--ink-soft); margin-bottom: 1.4rem; }
.help-online__list { gap: 1rem; }
.help-online__list strong { color: var(--forest); }

.help-exit {
  margin-top: 1.8rem; padding: 1.2rem 1.3rem; border-radius: var(--r);
  border: 1.5px dashed var(--line-strong); display: grid; gap: .8rem; justify-items: start;
}
.help-exit__btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .7rem 1.2rem;
  border-radius: 999px; background: var(--forest); color: var(--white); text-decoration: none;
  font-weight: 700; font-size: .95rem; line-height: 1;
}
.help-exit__btn:hover { color: var(--white); text-decoration: none; background: color-mix(in srgb, var(--forest) 80%, var(--ink)); }
.help-exit__btn .ico { width: 16px; height: 16px; }
.help-exit__cap { margin: 0; font-size: .98rem; color: var(--ink-soft); }
.help-exit__cap kbd { font: 700 .8rem/1 var(--sans); padding: .2rem .4rem; border-radius: 5px; background: var(--white); border: 1px solid var(--line); color: var(--forest); }

/* ---------- take a slow breath ---------- */
.help-breathe__in { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) { .help-breathe__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.help-breathe__text h2 { margin-bottom: .35em; }
.help-breathe__small { margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.02rem; }

.breathe { display: grid; justify-items: center; text-align: center; gap: .9rem; }
.breathe__stage { --min: .62; --k: 1; position: relative; width: min(100%, 400px); aspect-ratio: 1; }
/* resting (JS on, motion allowed): the bloom sits small inside the ring it will grow to fill */
html.js:not(.static) .breathe:not(.is-still) .breathe__stage { --k: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js:not(.static) .breathe:not(.is-still) .breathe__stage { --k: 1; }
}
.breathe__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--sage); }
.breathe__bloom {
  position: absolute; inset: 0; isolation: isolate; will-change: transform;
  transform: scale(calc((var(--min) + (1 - var(--min)) * var(--k)) * .94));
}
.breathe__wash { position: absolute; inset: 0; border-radius: 48% 52% 50% 50% / 51% 47% 53% 49%; }
.breathe__wash--base {
  background: radial-gradient(closest-side, var(--white) 0%, var(--white) 34%,
    color-mix(in srgb, var(--sage) 30%, var(--white)) 68%, color-mix(in srgb, var(--sage) 62%, var(--white)) 92%, transparent 100%);
  filter: blur(2px);
}
.breathe__wash--rose {
  inset: 4% 22% 26% 3%; border-radius: 55% 45% 48% 52% / 50% 56% 44% 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rose) 42%, transparent), transparent);
  mix-blend-mode: multiply; filter: blur(10px);
}
.breathe__wash--lilac {
  inset: 28% 3% 3% 26%; border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lilac-mid) 60%, transparent), transparent);
  mix-blend-mode: multiply; filter: blur(10px);
}
/* watercolour pools pigment at its edge: a soft darker rim */
.breathe__wash--edge {
  inset: 1% 2% 0 0; border-radius: 52% 48% 47% 53% / 46% 54% 50% 50%;
  background: radial-gradient(closest-side, transparent 80%, color-mix(in srgb, var(--sage) 55%, transparent) 94%, transparent 100%);
  filter: blur(2px);
}
.breathe__tree {
  position: absolute; left: 50%; top: 50%; width: 32%; height: auto;
  transform: translate(-50%, -52%) scale(calc(.9 + .1 * var(--k)));
}
.breathe__label {
  margin: .3rem 0 0; min-height: 1.25em; line-height: 1.2;
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.3rem); color: var(--forest);
}
.breathe__count { list-style: none; display: flex; gap: .55rem; justify-content: center; }
.breathe__count li {
  width: 11px; height: 15px; background: var(--sage); transition: background .3s;
  -webkit-mask: url(../assets/leaf.svg) center / contain no-repeat; mask: url(../assets/leaf.svg) center / contain no-repeat;
}
.breathe__count li.on { background: var(--garden); }
.breathe__btn { min-width: 10rem; margin-top: .4rem; }

/* ---------- free guides ---------- */
.help-guides__head { align-items: flex-end; }
.help-guides__where {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .4rem;
  font-size: .98rem; font-weight: 700; color: var(--ink-soft);
}
.help-guides__where .ico { width: 18px; height: 18px; color: var(--garden); }
.guides { display: grid; gap: clamp(40px, 4.5vw, 64px) clamp(32px, 5vw, 80px); }
@media (min-width: 900px) { .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guides__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 0; padding-bottom: .8rem; border-bottom: 1.5px solid var(--forest);
}
.guides__n { font-family: var(--sans); font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-deep); white-space: nowrap; }
.guides__list { list-style: none; }
.guides__list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  min-height: 68px; padding: .7rem .6rem .7rem .2rem; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.3;
  transition: background .2s, padding .3s var(--ease-out);
}
.guides__list a:hover { background: var(--mint); color: var(--forest); padding-left: .7rem; }
.guides__dl { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--mint); color: var(--garden); transition: background .2s, color .2s; }
.guides__list a:hover .guides__dl { background: var(--garden); color: var(--white); }
.guides__gloss { display: block; font-weight: 400; font-size: .95rem; color: var(--ink-soft); }
.guides__pdf { font-size: .8rem; letter-spacing: .12em; color: var(--ink-soft); }

/* ---------- closing ---------- */
.help-end__in { display: grid; justify-items: center; text-align: center; }
.help-end__in h2 { max-width: 16ch; }
.help-end__in .lead { margin-inline: auto; max-width: 30em; }
.help-end__in .actions { justify-content: center; margin-top: 1.8rem; }
.help-end__leaf { display: block; width: 22px; height: 30px; color: var(--rose-deep); background: var(--rose-deep); margin-bottom: 1.2rem; }

/* ---------- small screens ---------- */
/* phones: keep the space under the fixed Leave button empty on the first screen (390x667, 360x640),
   so the helplines start just below it instead of half-hidden behind it */
@media (max-width: 600px) { .pg-help .help-safety { padding-top: 120px; } }
@media (max-width: 520px) {
  .help-call { min-height: 72px; }
  .help-guides__where { margin-top: .2rem; }
  .help-end .actions .btn { width: 100%; }
}

/* the hero already says "We are not an emergency service": don't repeat it in the helpline box on this page */
.pg-help .helpbox__head p { display: none; }
.pg-help .helpbox__title { margin-bottom: 1.2rem; }
/* 18 Oct 2026: SWAN is a contact number, not a helpline, so it sits in its own box under the helplines */
.pg-help .helpbox--local { margin-top: clamp(20px, 2.6vw, 32px); border-top-color: var(--garden); }
.pg-help .helpbox--local .helpbox__title { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }
/* 22 Oct 2026: legal services partner box (Domestic Abuse Protection Services) */
.pg-help .helpbox__partner { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.pg-help .helpbox__logo { height: 84px; width: auto; flex: none; }
.pg-help .helpbox__partner-name { margin: 0; color: var(--forest); }
.pg-help .helpbox__text-link { font-family: var(--sans); font-size: 1rem; overflow-wrap: anywhere; }
@media (max-width: 420px) { .pg-help .helpbox__partner { flex-direction: column; align-items: flex-start; } }