/*
 * heyaira.eu page layout only. Type, colour, material and components all
 * come unchanged from the HeyAira design system (tokens.css, base.css,
 * components.css). No typography is overridden here.
 */

.wrap {
  width: min(100% - 2 * var(--layout-gutter), 56rem);
  margin-inline: auto;
}

/* ---------- Header: the design-system top bar, without a divider ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(251 250 247 / 0.72);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturate));
  backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturate));
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: min(100% - 2 * var(--layout-gutter), 56rem);
  min-height: 3.5rem;
  margin-inline: auto;
}

.site-header__nav {
  display: flex;
  gap: var(--space-4);
  margin-left: auto;
}

/* ---------- Sections: rhythm from the spacing scale ---------- */

.section { padding: var(--space-8) 0; }

.section .wrap {
  display: grid;
  gap: var(--space-5);
}

.section .wrap > p { max-width: var(--layout-measure); margin: 0; }

.section--hero { padding: var(--space-9) 0 var(--space-7); }
.section--hero h1 { max-width: 14ch; }
.section--logos { padding: var(--space-6) 0 var(--space-7); }
.section--logos .wrap { gap: var(--space-5); }

/* The brand dot ends the headline instead of a full stop. */
.claim-dot {
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.05em;
  border-radius: 50%;
  background: var(--brand-dot-color);
}

/* Footer: the design-system component, held to the page column. */
.site-footer__inner { width: min(100% - 2 * var(--layout-gutter), 56rem); padding-inline: 0; }