:root { color-scheme: light; --ink: #091836; }
* { box-sizing: border-box; }
html { min-width: 320px; background: #fff; }
body { margin: 0; color: var(--ink); font-family: "Questrial", Arial, Helvetica, sans-serif; }

.page {
  container-type: inline-size;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  overflow: hidden;
  background: #fff;
}

.site-header {
  height: 15cqw;
  padding: 1.05cqw 5.2cqw 1.05cqw 4.78cqw;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.5cqw;
}
.logo { display: block; width: 12.9cqw; height: 12.9cqw; object-fit: contain; }
.women-owned-logo { display: block; width: auto; height: 3.225cqw; object-fit: contain; }
.contact {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 1.8cqw;
  margin: 0 .43cqw 0 0;
  font-size: 1.68cqw;
  line-height: 1.1;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.contact-item { display: inline-flex; align-items: baseline; gap: .25em; }
.contact a { color: #5cbd10; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.contact a:hover, .contact a:focus-visible { color: #00a8a6; }

.hero { position: relative; aspect-ratio: 1536 / 765; overflow: hidden; }
.hero-image { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-image-mobile { display: none; }
.hero-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-copy { position: absolute; z-index: 1; top: 5.05cqw; left: 6.25cqw; }
.hero-copy h1 {
  margin: 0;
  font-size: 6.55cqw;
  line-height: .955;
  letter-spacing: -.025em;
  font-weight: 700;
}
.hero-copy h1 span { display: block; }
.blue { color: #063a9e; }
.teal { color: #00a8a6; }
.green { color: #5cbd10; }
.lozenge {
  width: 8cqw;
  height: 1cqw;
  margin-top: 2cqw;
  border-radius: 999px;
  background: linear-gradient(90deg, #0862ee, #00b9b9 55%, #76db1a);
}
.intro {
  margin: 2cqw 0 0;
  max-width: 43cqw;
  font-size: calc(2cqw + 2pt);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.founder {
  margin: 1cqw 0 0;
  font-size: 1.9cqw;
  font-weight: 700;
  letter-spacing: -.025em;
}
.founder .established { display: block; }
@media (min-width: 640px) {
  .founder .established { margin-top: 2px; }
}

.site-footer {
  min-height: 5.47cqw;
  padding: 1cqw 6.25cqw;
  display: flex;
  align-items: center;
  font-size: calc(.77cqw + 2pt);
  letter-spacing: -.035em;
}
.site-footer p { margin: 0; }
.footer-items { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25cqw; row-gap: .6cqw; width: 100%; }
.footer-items > p { white-space: nowrap; }
.footer-items > .footer-trademark { white-space: normal; }
.footer-items > .footer-copyright { width: 100%; }
.footer-secondary { display: flex; align-items: center; gap: 1.25cqw; width: 100%; }
.footer-secondary > p { white-space: nowrap; }
.footer-secondary > .footer-entry:first-child .footer-separator { display: none; }
.footer-entry { display: inline-flex; align-items: baseline; gap: 1.25cqw; }
.footer-women-owned-logo { display: none; }
.footer-separator { flex: 0 0 auto; }
.privacy { color: inherit; text-decoration: underline; text-underline-offset: .25em; }
.privacy:hover, .privacy:focus-visible { text-decoration: none; }

@media (max-width: 779px) {
  .page { --mobile-logo-size: min(100px, calc(29cqw - 10px)); }
  .site-header {
    height: auto;
    padding: 9.5px calc(6.25cqw - 4px);
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand women" "contact contact";
    column-gap: 8px;
    row-gap: 8px;
  }
  .logo { grid-area: brand; width: var(--mobile-logo-size); height: var(--mobile-logo-size); }
  .women-owned-logo { grid-area: women; height: calc(var(--mobile-logo-size) / 4); justify-self: end; align-self: end; }
  .contact { grid-area: contact; justify-self: end; gap: 2.5vw; margin-right: 0; font-size: 3.25vw; line-height: 1.25; }
}
@media (min-width: 640px) and (max-width: 779px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand contact women"; row-gap: 0; }
  .women-owned-logo { align-self: center; }
  .contact { margin-right: .43cqw; font-size: 2.275vw; }
}
@media (max-width: 639px) {
  .site-header { height: calc(var(--mobile-logo-size) + 19px); padding-inline: calc(6.4cqw - 4px); grid-template-areas: "brand contact"; row-gap: 0; }
  .women-owned-logo { display: none; }
  .contact { display: grid; gap: 3px; }
  .contact-item { justify-content: flex-end; }
  .hero { aspect-ratio: 390 / 600; background: #c38d72; }
  .hero-image-desktop { display: none; }
  .hero-image-mobile { display: block; object-position: calc(60% + 45px) center; }
  .hero-panel-desktop { display: none; }
  .hero-copy { top: 9cqw; left: 6.4cqw; }
  .hero-copy h1 { font-size: 9.9cqw; letter-spacing: -.05em; line-height: .99; }
  .lozenge { width: 12.8cqw; height: 1.28cqw; margin-top: 3.59cqw; }
  .intro { width: 39.75cqw; max-width: none; margin-top: 4.36cqw; font-size: calc(3.077cqw + 1pt); line-height: 1.45; letter-spacing: .01em; }
  .desktop-break { display: none; }
  .founder { margin-top: 2.18cqw; font-size: calc(3.077cqw - 3pt); line-height: 1.5; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
  .founder span { display: inline; }
  .site-footer {
    min-height: 0;
    padding: 3cqw 10px 6cqw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    font-size: 2.56cqw;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
  }
  .footer-items { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
  .footer-secondary { flex-direction: column; gap: 6px; }
  .footer-items > p, .footer-secondary > p { width: 100%; }
  .trademark-end { display: block; }
  .footer-entry { display: flex; justify-content: center; }
  .footer-women-owned-logo {
    display: block;
    width: auto;
    height: calc(var(--mobile-logo-size) / 2 - var(--mobile-logo-size) / 16);
    margin-bottom: calc(3cqw - 5px);
  }
  .footer-separator { display: none; }
  .privacy { color: inherit; }
}
@media (max-width: 360px) {
  .site-footer { font-size: 9px; }
}