:root {
  --ink: #034b75;
  --blue: #2fa8d8;
  --sky: #e0f5fc;
  --coral: #ee513c;
  --pink: #ffd6cd;
  --yellow: #ffcd3e;
  --mint: #bdebd4;
}
.site-header { justify-content: flex-end; }
.hero { background: linear-gradient(to bottom, #fffaf2 0%, #fffaf2 18%, #e5f6fb 100%); }
.hero-copy > .eyebrow {
  color: var(--ink);
  font-family: 'Fredoka', sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow { font-size: 14px; }
nav { font-size: 15px; }
.trust-row { font-size: 14px; }
.project-grid p { font-size: 16px; }
.time { font-size: 14px; }
.contact li { font-size: 16px; }
form label { font-size: 15px; }
form small,
footer > small { font-size: 14px; }
footer > div { font-size: 15px; }

/* Organic transitions between every content block. Each divider has a
   slightly different silhouette so the page feels playful, not repetitive. */
.section-wave {
  --wave-from: var(--cream);
  --wave-to: var(--ink);
  position: relative;
  height: 76px;
  margin: -1px 0;
  overflow: hidden;
  background: var(--wave-from);
  isolation: isolate;
}
.section-wave::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -6%;
  bottom: -58px;
  width: 112%;
  height: 118px;
  background: var(--wave-to);
  border-radius: 52% 48% 0 0 / 76% 68% 0 0;
}
.wave-to-project {
  --wave-from: var(--cream);
  --wave-to: var(--ink);
}
.wave-to-project::after {
  left: -12%;
  width: 124%;
  bottom: -64px;
  transform: rotate(-1deg);
  border-radius: 44% 56% 0 0 / 74% 64% 0 0;
}
.wave-to-services {
  --wave-from: var(--ink);
  --wave-to: var(--cream);
}
.wave-to-services::after {
  left: -8%;
  width: 116%;
  bottom: -54px;
  transform: rotate(.8deg);
  border-radius: 58% 42% 0 0 / 62% 78% 0 0;
}
.wave-to-cta {
  --wave-from: var(--cream);
  --wave-to: var(--coral);
  height: 66px;
}
.wave-to-cta::after {
  left: -4%;
  width: 108%;
  bottom: -68px;
  height: 128px;
  border-radius: 38% 62% 0 0 / 76% 58% 0 0;
}
.wave-to-contact {
  --wave-from: var(--coral);
  --wave-to: var(--cream);
  height: 70px;
}
.wave-to-contact::after {
  left: -10%;
  width: 120%;
  bottom: -62px;
  transform: rotate(-.7deg);
  border-radius: 64% 36% 0 0 / 62% 82% 0 0;
}
.wave-to-footer {
  --wave-from: var(--cream);
  --wave-to: var(--ink);
  height: 72px;
}
.wave-to-footer::after {
  left: -7%;
  width: 114%;
  bottom: -56px;
  transform: rotate(.5deg);
  border-radius: 47% 53% 0 0 / 82% 62% 0 0;
}
.brand { gap: 0; }
.brand > img { display: block; width: 250px; height: 84px; object-fit: contain; object-position: left center; }
.photo-card { width: min(112%, 650px); height: 510px; right: -4%; top: -4px; padding: 0; transform: rotate(2.5deg); background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.photo-card img { padding: 0; background: transparent; border-radius: 0; }
.footer-brand { width: max-content; background: #fff; padding: 6px 10px; border-radius: 16px; }
.footer-brand > img { width: 185px; height: 92px; }
.project, footer { background: #034b75; }
.cta-band { background: #ee513c; }
.morning { background: #ffedab; }
.lunch { background: #d5f4e4; }
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding-top: 34px;
  padding-bottom: 34px;
}
footer > p,
footer > small { white-space: nowrap; }
footer > small {
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 901px) and (max-width: 1150px) {
  .brand > img { width: 215px; }
  nav { gap: 18px; }
}
@media (max-width: 600px) {
  .hero-copy > .eyebrow { display: none; }
  .eyebrow,
  .time { font-size: 15px; }
  .hero-copy > p,
  .intro-copy p,
  .values p,
  .service-card > p,
  .contact-card > div > p { font-size: 18px; }
  .trust-row,
  .project-grid p,
  .contact li { font-size: 17px; }
  form label { font-size: 16px; }
  form small { font-size: 15px; }
  footer > p,
  footer > div,
  footer > small { font-size: 16px; }
  .brand > img { width: 180px; height: 68px; }
  html, body { background: #fffaf2; }
  .hero { padding-top: 80px; background: linear-gradient(to bottom, #fffaf2 0%, #fffaf2 18%, #e5f6fb 100%); }
  .hero-art { order: -1; margin-top: -45px; margin-bottom: -10px; }
  .photo-card { width: 108%; height: 355px; right: -4%; top: 0; transform: rotate(2deg); }
  .footer-brand > img { width: 165px; height: 82px; }
  .hero-copy,
  .section-heading,
  .intro-copy,
  .project-grid article,
  .service-card,
  .contact-card > div,
  .cta-band,
  footer { text-align: center; }
  .section-heading { margin-inline: auto; }
  .hero-actions { align-items: stretch; }
  .trust-row { justify-items: center; }
  .values article { flex-direction: column; align-items: center; text-align: center; }
  .text-link { justify-content: center; }
  .cta-band { align-items: center; }
  .contact li { justify-items: center; }
  form label { text-align: left; }
  footer { flex-direction: column; gap: 12px; padding: 28px 16px; overflow: visible; }
  footer > p,
  footer > small { margin: 0; }
  footer > div { flex-wrap: nowrap; justify-content: center; }
  .section-wave { height: 44px; }
  .section-wave::after {
    left: -15%;
    bottom: -44px;
    width: 130%;
    height: 76px;
  }
  .wave-to-project::after { transform: rotate(-1.8deg); }
  .wave-to-services::after { transform: rotate(1.5deg); }
  .wave-to-cta,
  .wave-to-contact,
  .wave-to-footer { height: 40px; }
  .wave-to-cta::after,
  .wave-to-contact::after,
  .wave-to-footer::after { bottom: -46px; height: 76px; }
}