/* ---------- Footer: "Please get in touch" ---------- */
:root { --foot-btn-bg: #D2C5AF; --foot-btn-fg: #101010; }
html[data-theme="light"] { --foot-btn-bg: #131516; --foot-btn-fg: #FFFFFF; }
.footer-section { border-top: 0 !important; }
.site-foot { padding: clamp(96px, 12vw, 160px) 0 40px; }
.site-foot .container-large { display: grid; gap: 0; }
.foot-ask {
  font-family: var(--serif) !important; font-weight: 400; font-optical-sizing: none; font-variation-settings: "opsz" 24;
  font-size: 48px; line-height: 1.15; letter-spacing: -0.012em; margin: 0; max-width: 19em;
}
.foot-ask span { display: block; color: var(--grey); }
.foot-ask strong { display: block; font-weight: 400; color: var(--silver); margin-top: 20px; }

.foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; margin-top: 64px; }
.foot-btn {
  display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 30px; border-radius: 999px;
  background: var(--foot-btn-bg); color: var(--foot-btn-fg) !important; text-decoration: none;
  font: 500 18px/1 var(--sans); transition: transform .2s, opacity .2s;
}
.foot-btn:hover { transform: translateY(-2px); opacity: .92; }
.foot-link { display: inline-flex; align-items: center; gap: 12px; color: var(--silver) !important; text-decoration: none; font: 400 18px/1 var(--sans); }
.foot-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.foot-btn svg, .foot-link svg { width: 18px; height: 18px; transition: transform .2s; }
.foot-btn:hover svg, .foot-link:hover svg { transform: translateX(3px); }

/* the handwritten promise, with a curly arrow pointing up at the email button */
.foot-note { display: flex; align-items: flex-start; gap: 14px; margin: 10px 0 0 200px; max-width: 30rem; }
.foot-note svg { width: 40px; height: 49px; flex: none; color: var(--bright-red); opacity: .6; }
.foot-note p { margin: 54px 0 0; font: 300 20px/1.5 Kalam, "Comic Sans MS", cursive; color: var(--grey); }

.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 56px; margin-top: clamp(80px, 9vw, 120px); padding: 0; list-style: none; }
.foot-links a { color: var(--grey) !important; text-decoration: none; font: 400 16px/1 var(--sans); transition: color .2s; }
.foot-links a:hover { color: var(--silver) !important; }
.foot-links .home svg { width: 24px; height: 24px; display: block; }

@media (max-width: 767px) {
  .foot-ask { font-size: 30px; }
  .foot-ask strong { margin-top: 14px; }
  .foot-actions { margin-top: 40px; }
  .foot-btn { height: 54px; padding: 0 24px; font-size: 17px; }
  /* phones: email button, then the note pointing at it, then the About link */
  .foot-actions { display: contents; }
  .foot-ask { order: 1; } .foot-btn { order: 2; margin-top: 40px; justify-self: start; } .foot-note { order: 3; } .foot-link { order: 4; margin-top: 36px; } .foot-links { order: 5; }
  .foot-note { margin-left: 120px; }
  .foot-note p { font-size: 18px; }
  .foot-links { gap: 18px 28px; }
}