/* GravenReach Media: shared foot band and social plates for the static pages (V2 item 12, 23 Oct 2026).
   tools/postbuild.mjs links this file and writes the markup from src/app/socials.json, the same list the home page uses.
   Plates: a cream face on an ink border with a hard shadow; the face lifts on hover and focus and sinks on press.
   Nothing here is below 16px. Motion stops for prefers-reduced-motion and for the Pause motion switch. */

/* the four profiles, as icon plates beside "Talk to us" and as named plates in the foot band */
.grm-soc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.grm-soc li { margin: 0; padding: 0; list-style: none; }
.grm-soc li::before, .grm-soc li::marker { content: none; }
.grm-soc a { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: var(--grm-h, 44px); height: var(--grm-h, 44px); padding: 0 9px; margin: 0;
  background: #F8F6EF; color: #151515; border: 2.5px solid #151515; border-radius: 0; box-shadow: 3px 3px 0 #151515;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0; text-decoration: none; text-transform: none;
  transition: transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s cubic-bezier(.22,1,.36,1); }
.grm-soc svg { display: block; width: 21px; height: 21px; flex: none; }
.grm-soc-named a { padding: 0 14px 0 11px; }
@media (hover: hover) and (pointer: fine) { .grm-soc a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #151515; } }
.grm-soc a:focus-visible { outline: 3px solid #151515; outline-offset: 5px; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #151515; }
.grm-soc a:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #151515; transition-duration: 80ms; }

/* a "Talk to us" link with the plates on its left, in one line wherever there is room */
.grm-talk { display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 12px 14px; max-width: 100%; margin-top: 28px; justify-self: start; vertical-align: bottom; }
/* the wrapper takes over the link's own top margin, so the plates and the link share one line and one height */
.grm-talk > a { margin-top: 0 !important; margin-bottom: 0 !important; }
.grm-talk > .grm-soc { gap: 6px; align-items: stretch; }
.grm-talk > .grm-soc li { display: flex; }
.grm-talk > .grm-soc a { height: auto; min-height: 44px; aspect-ratio: 1; padding: 0; }
.grm-talk-bar, .actions > .grm-talk { margin-top: 0; }
.grm-talk-bar { flex: none; }
/* in a page's top bar the logo needs the room on a phone: the plates sit in the foot band there instead */
@media (max-width: 700px) { .grm-talk-bar > .grm-soc { display: none; } }

/* the foot band */
.grm-foot { box-sizing: border-box; display: block; margin: 0; padding: 30px max(16px, 4.5vw) calc(30px + env(safe-area-inset-bottom));
  background: #1D3FBF; color: #F8F6EF; border-top: 4px solid #E5177B; font-size: 17px; line-height: 1.5; text-align: left; }
.grm-foot-in { box-sizing: border-box; max-width: 1360px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; }
.grm-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; margin: 0; padding: 0; list-style: none; }
.grm-foot-links li { margin: 0; padding: 0; list-style: none; }
.grm-foot-links li::before, .grm-foot-links li::marker { content: none; }
.grm-foot-links a { display: inline-block; padding: 8px 0; color: #F8F6EF; font: inherit; font-weight: 650; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: rgba(248, 246, 239, .55);
  transition: color .26s cubic-bezier(.22,1,.36,1), text-decoration-color .26s cubic-bezier(.22,1,.36,1), transform .26s cubic-bezier(.22,1,.36,1); }
.grm-foot-links a.grm-home { font-weight: 800; }
@media (hover: hover) and (pointer: fine) { .grm-foot-links a:hover { color: #FFC20E; text-decoration-color: #FFC20E; } }
.grm-foot-links a:focus-visible { outline: 3px solid #FFC20E; outline-offset: 3px; color: #FFC20E; text-decoration-color: #FFC20E; }
.grm-foot-links a:active { color: #FFC20E; text-decoration-color: #FFC20E; transform: translate(1px, 2px); transition-duration: 80ms; }
.grm-foot .grm-soc { gap: 12px 14px; }
.grm-foot .grm-soc a:focus-visible { outline-color: #FFC20E; }

/* Pause motion: shown only on pages that run endless motion (grm-foot.js decides) */
.grm-pause { box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 16px;
  background: transparent; color: #F8F6EF; border: 2px solid rgba(248, 246, 239, .7); border-radius: 0; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 650; line-height: 1.2;
  transition: background-color .26s cubic-bezier(.22,1,.36,1), border-color .26s cubic-bezier(.22,1,.36,1), transform .26s cubic-bezier(.22,1,.36,1); }
.grm-pause[hidden] { display: none; }
.grm-pause i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #FFC20E; }
.grm-pause[aria-pressed="true"] i { border-radius: 0; }
@media (hover: hover) and (pointer: fine) { .grm-pause:hover { background: rgba(248, 246, 239, .14); border-color: #FFC20E; } }
.grm-pause:focus-visible { outline: 3px solid #FFC20E; outline-offset: 3px; border-color: #FFC20E; }
.grm-pause:active { background: rgba(248, 246, 239, .22); border-color: #FFC20E; transform: translate(1px, 2px); transition-duration: 80ms; }

/* the switch holds every looping animation still, on this page and the next ones (it is remembered) */
html.grm-motion-off *, html.grm-motion-off *::before, html.grm-motion-off *::after { animation-play-state: paused !important; }

@media (max-width: 700px) {
  .grm-foot { font-size: 16px; }
  .grm-foot-in { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .grm-soc a, .grm-foot-links a, .grm-pause { transition: none; }
}