/* Aceogen — contact page only.
   A short list of adjustments, all token-based, no new classes and no new colors: the page uses
   the same band vocabulary as everything else, and only asks for what the band system
   could not know — that a form, not an article, is what sits on this tint. */

/* 1. The form card. A content card's 24px inset is cramped around six controls, so the
      one card on this page gets a wider one. Same token scale, one step up.
   2. --surface-muted. A tinted band remaps it to white so .callout and .icon-box do not
      melt into the tint; inside a white card that inversion goes the wrong way and
      .form-status--ok — the success message — would render as a white box on white.
      Restore the default off-blue for anything inside the card. */
.section--sky .card{
  padding:clamp(var(--sp-7),3.2vw,var(--sp-10));
  --surface-muted:var(--aceogen-off-blue);
}

/* 3. The same defect one component further — .btn--secondary hovering to the white it
      already is — turned out to be band-wide rather than a quirk of this page, so the
      restore now lives in site.css next to the band block and covers every tinted band.
      Nothing is needed here. */

/* 4. The contact figure is an accent beside the heading, not the subject of the page.
      A slot left uncapped fills half the hero; cap it and hang it off the right edge
      so the title keeps the left. Centred once the split collapses to one column.
      Aligned with justify-self, NOT auto margins: the slot is an empty div sized only
      by aspect-ratio, and an auto margin suppresses a grid item's stretch, so width
      resolved to fit-content — zero — and the figure never rendered at any width. */
.figure--contact{max-width:360px;width:100%;justify-self:end}
@media (max-width:900px){
  .figure--contact{justify-self:center}
}