/* The contact page only (contact.html, loaded last, after site.css). Everything here is scoped to
   body.contactpage, as css/faq.css is to body.faqpage, so no other page changes. (Not
   body.contact: the address list is .contact.)
   2026-10-17, where the eye goes: the page asks one thing, to send the email, and everything else
   steps back. The email reads like a page of its own: the subject line top left, the three steps top
   right where the eye passes on its way across, and the button at the foot of that column, level
   with the sign-off, where the eye comes to rest. That button is the one solid red thing in the
   email; the steps' numbers are in the letter's ink. Email, phone and city follow as one quiet line,
   the other way in rather than three more headlines. What happens next is the steps from the home
   page, the reply in red. The close hands back to the email. Nothing here moves on its own; with
   reduced motion base.css cuts every animation and transition, and without JavaScript everything
   stands finished. */

/* ---------- the email ----------
   The column on the right runs the email's full height: the steps at its top, the button at its
   foot. It no longer travels down beside the email (it held only the steps before), so the button
   waits at the end of the email instead of riding over the blanks. */
.contactpage .write { padding-bottom: var(--s-8); }
.contactpage .write__steps li::before { color: var(--ink); }
/* The petal's outline, brought over from the free-demo panel, no longer runs behind the button: it
   stands in the open middle of the column, upright and still, its tip pointing down at the button.
   It fills whatever room the steps and the button leave, and steps out on a phone. */
.contactpage .write__petal { position: static; flex: 1 1 0; min-height: 0; max-height: 16rem;
  width: auto; height: auto; align-self: center; margin-top: var(--s-6); translate: none; rotate: -12deg;
  stroke: var(--rule-firm); stroke-width: 1.5; }

@media (min-width: 961px) {
  .contactpage .write__grid { align-items: stretch; }
  .contactpage .write__how { position: static; display: flex; flex-direction: column; }
  .contactpage .letter__actions { margin-top: auto; padding-top: var(--s-7);
    flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .contactpage .letter__actions .btn { justify-content: center; }
  /* Sent: the note takes the buttons' place, at the same foot of the column. */
  .contactpage .letter__sent { margin-top: auto; padding-top: var(--s-7); max-width: none; }
  .contactpage .letter__sent-h { font-size: var(--t-lead); }
}

/* On a phone and a tablet the email comes first, then the button, then the steps as its caption. */
@media (max-width: 960px) {
  .contactpage .write__how { display: flex; flex-direction: column; max-width: none; padding-top: 0; }
  .contactpage .write__petal { display: none; }
  .contactpage .letter__actions, .contactpage .letter__sent { order: -1; margin-top: 0; }
  .contactpage .write__steps { margin-top: var(--s-7); max-width: 34rem; }
}

/* "Copy the text" is the fallback, not a second choice of equal weight: a plain line under the
   button rather than a second box beside it. The site's own focus ring still shows on it. */
.contactpage .letter__actions .letter__copy { box-shadow: none; padding: var(--s-2) 0; font-size: var(--t-small);
  font-weight: var(--w-ui); color: var(--ink-muted); text-decoration: underline;
  text-decoration-color: var(--rule-firm); text-underline-offset: 0.3em; }
.contactpage .letter__actions .letter__copy:hover,
.contactpage .letter__actions .letter__copy:focus-visible { box-shadow: none; color: var(--ink);
  text-decoration-color: var(--accent); }

/* ---------- the other way in ----------
   One line under a hairline: its heading as a small grey label, then the address, the number and
   the city at the size of the text, links in ink and the city in grey, since it only says where we
   are. */
.contactpage .reach { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: var(--s-3) var(--s-6); align-items: baseline; }
.contactpage .reach::before { content: ""; grid-column: 1 / -1; height: 1px; background: var(--rule);
  margin-bottom: var(--s-4); }
.contactpage .reach__h { font-size: var(--t-small); font-weight: var(--w-ui); color: var(--ink-muted);
  letter-spacing: normal; line-height: 1.5; }
.contactpage .contact { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); font-style: normal; }
.contactpage .contact__card { display: inline-block; padding: 0; border: 0; }
.contactpage .contact .contact__card::before { content: none; }
.contactpage .contact__v { font-size: var(--t-body); font-weight: var(--w-ui); letter-spacing: normal; }
.contactpage a.contact__card .contact__v { text-decoration: underline; text-decoration-color: var(--rule-firm);
  text-underline-offset: 0.3em; transition: text-decoration-color var(--dur) var(--ease-out-quart); }
.contactpage a.contact__card:hover .contact__v,
.contactpage a.contact__card:focus-visible .contact__v { color: var(--ink); text-decoration-color: var(--accent); }
.contactpage .contact__card--static .contact__v { color: var(--ink-muted); }
@media (max-width: 640px) {
  .contactpage .reach { grid-template-columns: minmax(0, 1fr); }
  .contactpage .contact { flex-direction: column; }
}

/* ---------- the close ----------
   After the promise, the way back up to the email, as a line rather than a second red button. */
.contactpage .signoff__back { margin-top: var(--s-6); }

/* ---------- a little more life (2026-10-17) ----------
   "The eye is there but a tiny bit bland." Nothing new to look at and no new red: what is here
   already answers the pointer a little more, and the quiet parts take a little warmth, so no
   section gains a second focal point. The free-demo button lifts 2px onto a soft oxblood shade and
   its petal (and a link's) turns further, quick and ease-out, never a bounce. The quiet hairlines
   are a breath of dusty rose (--c-dusty; --c-petal on the dark ground) rather than grey. With
   reduced motion base.css makes every change instant. */
body.contactpage { --warm-rule: color-mix(in oklch, var(--c-dusty) 38%, transparent);
  --warm-rule-dark: color-mix(in oklch, var(--c-petal) 24%, transparent); }
.contactpage main .btn { transition: background var(--dur) var(--ease-out-quart), gap var(--dur) var(--ease-out-quart),
  transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-quart); }
.contactpage main .btn:is(:hover, :focus-visible) { transform: translateY(-2px); }
.contactpage main .btn:not(.btn--quiet):is(:hover, :focus-visible) { box-shadow: 0 0.875rem 1.5rem -0.875rem oklch(33.8% 0.127 27.8 / 0.6); }
.contactpage main .btn:active { transform: scale(0.97); transition-duration: var(--dur-fast); }
.contactpage main .btn:not(.btn--quiet):active { box-shadow: none; }
.contactpage main :is(.btn, .cta):is(:hover, :focus-visible) .petal { transform: rotate(24deg); }
/* The line over the other way in, in petal; the outlined petal in the email's column takes a faint
   dusty fill, still pointing at the button. */
.contactpage .reach::before { background: var(--warm-rule-dark); }
.contactpage .write__petal { color: color-mix(in oklch, var(--c-dusty) 8%, transparent); stroke: color-mix(in oklch, var(--c-petal) 36%, transparent); }

/* What happens next is three steps here, not the four of the home page (2026-10-19). */
@media (min-width: 861px) {
  .contactpage .track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}