.design-cutout .hattie-footer {
  --footer-legal-size: 14px;
  --footer-secondary-size: 15px;
  --footer-line: #303030;
  background: var(--cutout-black);
  color: var(--cutout-white);
  margin-top: 64px;
  font-family: var(--body);
}
.hattie-footer-inner {
  width: min(1200px, calc(100% - 80px));
  margin-inline: auto;
}
.hattie-footer-invitation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding-block: 56px 44px;
  border-bottom: 1px solid var(--footer-line);
}
.hattie-footer-invitation h2 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(26px, 3.1vw, 44px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.045em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.hattie-footer-invitation p {
  margin: 16px 0 0;
  color: var(--cutout-nav);
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.hattie-footer .hattie-footer-cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 52px;
  padding: 12px 22px;
  background: var(--cutout-lilac);
  color: var(--cutout-button-ink);
  border-radius: var(--cutout-radius);
  font-size: 16px;
  font-weight: 500;
}
.hattie-footer .hattie-footer-cta:hover { background: var(--cutout-button-hover); color: var(--cutout-button-ink); }
.hattie-footer-cta > span:last-child { font-size: 24px; line-height: 1; }
.hattie-footer-connections {
  display: grid;
  grid-template-columns: 1fr minmax(340px, .9fr);
  gap: 48px;
  align-items: start;
  padding-block: 36px;
}
.hattie-footer-identity { display: grid; justify-items: start; gap: 10px; min-width: 0; }
.hattie-footer .hattie-footer-brand {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--cutout-white);
  font-family: Hanken, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1.25;
}
.hattie-footer .hattie-footer-email {
  color: var(--cutout-nav);
  font-size: 15px;
  min-height: 44px;
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.hattie-footer-social { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.hattie-footer-social a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-size: 15px;
  color: var(--cutout-nav);
}
.hattie-footer-social a > span:last-child { color: #777; }
.hattie-footer a:hover { color: var(--cutout-white); }
.hattie-footer a:focus-visible { outline: 3px solid var(--cutout-lilac); outline-offset: 5px; }
.hattie-footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--footer-line);
  padding-block: 16px;
  color: var(--cutout-nav);
}
.hattie-footer-legal small { font-size: var(--footer-legal-size); }
.hattie-footer-legal nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.hattie-footer-legal a { display: flex; align-items: center; min-height: 44px; color: var(--cutout-nav); font-size: var(--footer-legal-size); }
@media (max-width: 800px) {
  .hattie-footer-inner { width: calc(100% - 48px); }
  .hattie-footer-connections { grid-template-columns: 1fr 1fr; gap: 28px; }
  .hattie-footer-social { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}
@media (max-width: 560px) {
  .design-cutout .hattie-footer { margin-top: 40px; }
  .hattie-footer-invitation { align-items: start; flex-direction: column; gap: 24px; padding-block: 36px 32px; }
  .hattie-footer-invitation h2 { font-size: 28px; }
  .hattie-footer-invitation p { margin-top: 12px; font-size: var(--footer-secondary-size); }
  .hattie-footer-connections { grid-template-columns: 1fr; gap: 20px; padding-block: 28px; }
  .hattie-footer-social { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
  .hattie-footer-social a { font-size: var(--footer-secondary-size); gap: 6px; }
  .hattie-footer-legal { align-items: start; flex-direction: column; gap: 4px; padding-block: 22px 16px; }
  .hattie-footer-legal nav { gap: 4px 20px; }
}
@media (max-width: 360px) {
  .hattie-footer-social { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}