/* ==========================================================================
   the goo collection — shared styles
   Brand tokens sourced from .claude/skills/goo-website-design/SKILL.md
   ========================================================================== */

:root {
  /* neutrals */
  --cream: #fffefb;
  --ink: #50341e; /* universal text ink, drawn from the yellow group's accent */
  --white: #ffffff;

  /* group 1 — dragoo (green) */
  --green: #95d46c;
  --green-accent: #f39067;
  --green-accent2: #597f2f;

  /* group 2 — honeygoo (yellow) */
  --yellow: #ffce57;
  --yellow-accent: #50341e;
  --yellow-accent2: #b4ccd6;

  /* group 3 — unigoo (pink) */
  --pink: #ebd0fb;
  --pink-accent: #fff7e4;
  --pink-accent2: #ff9e8e;

  /* type */
  --font-display: "Fredoka", sans-serif;
  --font-body: "Comfortaa", sans-serif;

  /* spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* radius */
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 40px;
  --radius-pill: 999px;

  /* motion */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  /* Rubber-band overscroll bounces the page away from the viewport edge and
     exposes the bare canvas, which read as a gap above the hero. Pinning the
     scroll chain stops the bounce; the canvas matches the hero's flat cream
     base so any strip that does appear on browsers ignoring the above is
     invisible rather than a white void. */
  overscroll-behavior-y: none;
  background: var(--cream);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  /* js/protect.js takes the context menu and the drag; these close the routes
     the browser handles natively — the iOS long-press save sheet, and the
     drag ghost some engines start before the JS listener sees it. */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

a {
  color: inherit;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Focus & motion baseline
   ========================================================================== */

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--green-accent2);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Site mark (logo overlay, sits above the hero)
   ========================================================================== */

.site-mark {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 50;
}

.site-mark img {
  width: clamp(88px, 10vw, 130px);
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(80, 52, 30, 0.18));
}

.site-mark a {
  display: inline-block;
  transition: transform 0.4s var(--ease-smooth);
}

.site-mark a:hover {
  transform: translateY(-2px) scale(1.03);
}

/* ==========================================================================
   Sound button (standalone treatment; inside the nav bar it is restyled by
   css/nav.css, which is where the button actually lives)
   ========================================================================== */

.sound-toggle {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
  box-shadow:
    0 14px 26px -14px rgba(80, 52, 30, 0.35),
    0 3px 8px -2px rgba(80, 52, 30, 0.15);
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth), background 0.35s var(--ease-smooth);
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  transform: scale(1.1);
  box-shadow:
    0 18px 32px -14px rgba(80, 52, 30, 0.4),
    0 4px 10px -2px rgba(80, 52, 30, 0.2);
}

.sound-toggle.is-playing {
  background: linear-gradient(180deg, var(--yellow) 0%, var(--cream) 100%);
}

/* ==========================================================================
   Hero — cinematic entrance reveal
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 5vh, 3.5rem);
  padding: 16vh var(--space-3) 8vh;
  text-align: center;
  background: var(--cream);
}

/* The wash is one filtered group: children merge inside it, and the group as a
   whole lays over the cream. Bleeding it past the hero edges keeps the blur from
   ever revealing the layer's own boundary. */
.hero__wash {
  position: absolute;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  filter: url(#gooWash) blur(58px);
  isolation: isolate;
}

/* Re-running a full-viewport filter every frame is not free, so the wash stops
   once the hero is scrolled past. */
.hero__wash.is-idle * {
  animation-play-state: paused;
}

.hero__wash-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Alpha stays high across most of the blob so the filter's alpha ramp has a
   surface to threshold — a soft low-alpha gradient would dissolve entirely.
   Softness comes back from the group blur instead. */
.wash__blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  background: radial-gradient(
    circle at center,
    rgba(var(--c), 0.88) 0%,
    rgba(var(--c), 0.76) 38%,
    rgba(var(--c), 0) 70%
  );
  will-change: transform;
}

/* An orbit is an empty full-size frame spun around an origin far outside the
   hero, so its blob traces a wide arc instead of an obvious circle. */
.wash__orbit {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* Every blob rides an orbit; the drift and pulse on top of it keep the traced
   path from reading as a plain circle. Origins sit a few hundred px off each
   blob's own centre, so they sweep the hero rather than swinging out of it. */
.wash__orbit--gold {
  transform-origin: calc(50% - 3vmax) calc(50% - 20vmax);
  animation: washSpin 58s linear infinite;
}

.wash__blob--gold {
  --c: 255, 206, 87;
  top: 2%;
  left: 16%;
  width: min(46vmax, 580px);
  height: min(46vmax, 580px);
  animation: washDriftY 26s ease-in-out infinite;
}

.wash__orbit--coral {
  transform-origin: calc(50% - 34vmax) 50%;
  animation: washSpin 44s linear infinite;
}

.wash__blob--coral {
  --c: 255, 158, 142;
  top: 10%;
  left: 12%;
  width: min(42vmax, 520px);
  height: min(37vmax, 450px);
}

.wash__orbit--lilac {
  transform-origin: calc(50% + 24vmax) calc(50% + 6vmax);
  animation: washSpin 52s linear infinite reverse;
}

/* Deeper than the pink token so it still reads through the group's low opacity;
   the token value washes out to nothing at this scale. */
.wash__blob--lilac {
  --c: 219, 176, 250;
  top: 28%;
  left: 46%;
  animation: washPulse 34s ease-in-out infinite;
  width: min(45vmax, 560px);
  height: min(40vmax, 500px);
}

.wash__orbit--mist {
  transform-origin: calc(50% - 10vmax) calc(50% - 4vmax);
  animation: washSpin 47s linear infinite reverse;
}

.wash__blob--mist {
  --c: 180, 204, 214;
  top: 40%;
  left: 16%;
  width: min(33vmax, 410px);
  height: min(28vmax, 350px);
  opacity: 0.4;
  animation: washDriftX 38s ease-in-out infinite;
}

.wash__orbit--peach {
  transform-origin: calc(50% - 58vmax) calc(50% + 26vmax);
  animation: washSpin 33s linear infinite;
}

.wash__blob--peach {
  --c: 243, 144, 103;
  top: 22%;
  left: 56%;
  width: min(25vmax, 300px);
  height: min(25vmax, 300px);
  opacity: 0.45;
}

/* Pointer-led blob. Sits inert until js/site.js starts feeding it a position,
   so it never appears as a stuck spot on touch or reduced-motion. */
.wash__blob--cursor {
  --c: 255, 206, 87;
  top: 50%;
  left: 50%;
  width: min(33vmax, 400px);
  height: min(33vmax, 400px);
  translate: -50% -50%;
  opacity: 0;
  transition: opacity 0.8s var(--ease-smooth);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
}

.wash__blob--cursor.is-live {
  opacity: 0.5;
}

@keyframes washSpin {
  to { transform: rotate(360deg); }
}

@keyframes washDriftY {
  0%, 100% { transform: translate3d(0, -5%, 0) scale(1); }
  50% { transform: translate3d(0, 6%, 0) scale(1.07); }
}

@keyframes washPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

@keyframes washDriftX {
  0%, 100% { transform: translate3d(-6%, 2%, 0); }
  50% { transform: translate3d(7%, -3%, 0); }
}

.hero__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: -0.03em;
  font-size: clamp(2.75rem, 9vw, 7.5rem);
  color: #131313;
  text-align: center;
  line-height: 0.95;
  margin: 0;
}

.hero__title-line {
  display: block;
}

.hero__scene-img {
  position: relative;
  z-index: 2;
  width: min(34vw, 380px);
  filter: drop-shadow(0 30px 40px rgba(80, 52, 30, 0.18));
}

.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48vh;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 254, 251, 0) 0%,
    rgba(255, 254, 251, 0) 10%,
    rgba(255, 254, 251, 0.35) 40%,
    rgba(255, 254, 251, 0.72) 65%,
    var(--cream) 88%,
    var(--cream) 100%
  );
  pointer-events: none;
}

/* The cue is made of the same stuff as the rest of the page: a bead of goo
   gathers under the line, necks, and drops. Lowercase and untracked — the
   spaced-out capitals it replaced could have sat on any site. */
.hero__scroll-cue {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--ink);
  opacity: 0.6;
}

.hero__scroll-drip {
  position: relative;
  width: 9px;
  height: 36px;
}

/* The bead that hangs off the line and stretches before it lets go. */
.hero__scroll-drip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  transform-origin: 50% 0;
  /* Timed per keyframe rather than across the whole loop: gathering is slow,
     letting go is sudden. */
  animation: drip-swell 2.6s linear infinite;
}

/* The drop that falls away from it, thinning as it goes. */
.hero__scroll-drip::after {
  content: "";
  position: absolute;
  top: 0;
  left: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: drip-fall 2.6s linear infinite;
}

@keyframes drip-swell {
  0%, 10% {
    transform: scale(0.5, 0.5);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  32% {
    transform: scale(0.95, 1.4);
    animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.2);
  }
  /* Necked out as thin as it goes — the next frame is the one where it lets go. */
  39% {
    transform: scale(0.78, 2);
    animation-timing-function: cubic-bezier(0.2, 1.5, 0.5, 1);
  }
  48% { transform: scale(0.66, 0.58); }
  64%, 100% { transform: scale(0.5, 0.5); }
}

@keyframes drip-fall {
  /* Nothing to see until the neck breaks. */
  0%, 38% { transform: translateY(6px) scale(0.72, 1); opacity: 0; }
  41% {
    transform: translateY(9px) scale(0.82, 1.15);
    opacity: 0.95;
    /* Accelerating: it is falling, not drifting. */
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.45);
  }
  60% { transform: translateY(24px) scale(0.7, 1.25); opacity: 0.8; }
  68%, 100% { transform: translateY(28px) scale(0.74, 0.85); opacity: 0; }
}

/* Nothing falls; the bead just sits there under the line. */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-drip { height: 12px; }
  .hero__scroll-drip::before { animation: none; transform: scale(0.8); }
  .hero__scroll-drip::after { animation: none; display: none; }
}

@media (max-width: 640px) {
  .hero { padding-top: 13vh; gap: 1.5rem; }
  .hero__scene-img { width: min(52vw, 260px); }
}

/* ==========================================================================
   Crew content section
   ========================================================================== */

.crew {
  position: relative;
  overflow: hidden; /* critters are centre-anchored; keeps them from causing h-scroll */
  background: var(--cream);
  padding: var(--space-8) var(--space-3) var(--space-8);
}

/* The stage is the shared anchor: text column and critters both hang off it, so
   the crew stays clustered around the copy instead of drifting with section
   padding. */
.crew__stage {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.crew__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.crew__critter {
  --rot: 0deg;
  --scale: 1;
  --lift: 0px;
  --glow: rgba(80, 52, 30, 0.2);
  position: absolute;
  z-index: 0;
  display: block;
  cursor: pointer;
  transform: translateY(var(--lift)) rotate(var(--rot)) scale(var(--scale));
  transition:
    transform 0.55s var(--ease-smooth),
    opacity 0.4s var(--ease-smooth);
}

.crew__critter img {
  filter: drop-shadow(0 20px 26px rgba(80, 52, 30, 0.16));
}

/* Colour halo that fades in when the character and its name are linked. Lives
   on a pseudo-element so only opacity animates, never the filter. */
.crew__critter::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--glow) 0%, transparent 68%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
}

/* Widths differ per character because each crop has a different aspect ratio
   (unigoo is tall/narrow, honeygoo is wide/flat). Unigoo and dragoo are matched
   in visual mass; honeygoo runs smaller, the way the bee sits smaller than the
   unicorn and dragon in the logo lockup. */

/* Unigoo and dragoo share a bottom edge so they read as standing on one line;
   honeygoo drops in from above. All three sit just off the text column — close
   enough to touch it, never close enough to cross a letter. */

.crew__critter--unigoo {
  --rot: -4deg;
  --glow: rgba(214, 158, 250, 0.4);
  width: min(15vw, 157px);
  right: calc(100% - 2px);
  bottom: -16px;
}

.crew__critter--dragoo {
  --rot: 4deg;
  --glow: rgba(149, 212, 108, 0.55);
  width: min(20vw, 215px);
  left: calc(100% - 2px);
  bottom: -16px;
}

/* The only one that overlaps the text column — it drops in over its top-right
   corner — so it sits above `.crew__inner`, which would otherwise swallow every
   click on the half of the bee that lies inside the column. */
.crew__critter--honeygoo {
  --rot: -10deg;
  --glow: rgba(255, 206, 87, 0.6);
  width: min(14.5vw, 152px);
  left: calc(100% - 92px);
  top: -28px;
  z-index: 2;
}

/* Linked state — the character and its chip light up together. */
.crew__critter.is-active {
  --lift: -8px;
  --scale: 1.07;
  opacity: 1;
}

.crew__critter.is-active::before {
  opacity: 1;
}

/* Just enough step back to send the eye to the highlighted pair — the other two
   stay clearly present. */
.crew__critter.is-muted {
  opacity: 0.78;
}

/* Below ~1120px there isn't room for the 720px text column plus a critter each
   side, so re-anchor them to the viewport edges and drop them back to a faint
   accent behind the (centred, narrower) copy. */
@media (max-width: 1120px) {
  /* Dropping the stage's positioning hands the critters back to .crew, so they
     can hang off the viewport edges instead of the text column. */
  .crew__stage {
    position: static;
  }

  /* Back to background decoration: behind the copy, and out of its way. */
  .crew__critter {
    opacity: 0.42;
    pointer-events: none;
    z-index: 0;
  }

  .crew__critter--unigoo {
    right: auto;
    left: 0;
    bottom: 6%;
  }

  .crew__critter--dragoo {
    left: auto;
    right: 0;
    bottom: 6%;
  }

  .crew__critter--honeygoo {
    left: auto;
    right: 0;
    top: 4%;
  }
}

@media (max-width: 860px) {
  .crew__critter {
    display: none;
  }
}

.crew__eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  color: var(--green-accent2);
  margin: 0 0 var(--space-2);
}

.crew__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: var(--space-5);
}

.crew__lede {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  margin-bottom: var(--space-4);
}

.crew__body {
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.crew__body strong,
.crew__lede strong {
  font-weight: 700;
}

.crew__chip {
  --chip-glow: rgba(80, 52, 30, 0.3);
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  padding: 0.15em 0.65em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.4s var(--ease-smooth),
    box-shadow 0.4s var(--ease-smooth);
}

/* Hover, focus and the paired highlight from js/site.js all land in the same
   place, so reaching a name by keyboard looks exactly like pointing at it. */
.crew__chip:hover,
.crew__chip:focus-visible,
.crew__chip:active {
  transform: translateY(0);
}

.crew__chip--pink { background: var(--pink); --chip-glow: rgba(214, 158, 250, 0.55); }
.crew__chip--green { background: var(--green); --chip-glow: rgba(149, 212, 108, 0.6); }
.crew__chip--yellow { background: var(--yellow); --chip-glow: rgba(255, 206, 87, 0.65); }

.crew__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-3);
  padding: 0.85em 1.6em;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  transition: transform 0.35s var(--ease-smooth), background 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
  box-shadow: 0 10px 24px -12px rgba(80, 52, 30, 0.5);
}

.crew__cta span {
  transition: transform 0.35s var(--ease-smooth);
}

.crew__cta:hover {
  background: var(--green-accent2);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(89, 127, 47, 0.55);
}

.crew__cta:hover span {
  transform: translateX(4px);
}

.crew__cta:active {
  transform: translateY(0);
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* ---- The foot of every page ---------------------------------------------
   Injected by js/footer.js. Three things, read left to right: where to follow
   us, whose site this is, and how to reach a person. The community page keeps
   its own foot instead — the same icons and address, but sitting in the goo
   beside a privacy notice that belongs only to that form.

   No blanket `opacity` on the block any more: it used to dim the whole strip,
   which is right for the copyright line and wrong for anything you can click,
   because a link that cannot reach full contrast on hover reads as disabled. */
.site-footer {
  background: var(--cream);
  border-top: 1px solid rgba(80, 52, 30, 0.12);
  padding: var(--space-3);
  color: var(--ink);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.site-footer__legal {
  margin: 0;
  font-size: 0.8rem;
  text-align: center;
  opacity: 0.7;
}

/* ---- Where to follow us, and where to reach us --------------------------
   Shared with the community foot, which is where both started. Kept here so
   every page has them; community.css keeps only what its own strip needs. */

.social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-self: start;
}

.social__link {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  color: var(--ink);
  opacity: 0.72;
  transition:
    opacity 0.35s var(--ease-smooth),
    transform 0.35s var(--ease-out-back, var(--ease-spring)),
    background 0.35s var(--ease-smooth);
}

.social__link svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* The chip that appears on hover is a drop of goo, not a circle — same shape
   language as every other marker on the site. */
.social__link:hover,
.social__link:focus-visible {
  opacity: 1;
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 62% 38% 45% 55% / 52% 58% 42% 48%;
}

.social__link:active {
  transform: translateY(0);
}

.reach {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  justify-self: end;
  color: var(--ink);
}

.reach__label {
  flex: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
  opacity: 0.75;
  white-space: nowrap;
}

.reach__lines {
  display: grid;
  justify-items: start;
  gap: 0.12rem;
}

.reach__link {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.8;
  text-decoration: none;
  white-space: nowrap;
  /* Underlined only on the way in, so two addresses stacked read as one block
     of fine print rather than as a list of links. */
  transition:
    opacity 0.3s var(--ease-smooth),
    color 0.3s var(--ease-smooth);
}

/* The number is a WhatsApp number. The mark says which app opens, so the line
   does not have to spend a word on it. */
.reach__link--wa {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.reach__wa {
  width: 1em;
  height: 1em;
  flex: none;
}

.reach__link:hover,
.reach__link:focus-visible {
  opacity: 1;
  color: var(--pick-ink, var(--ink));
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* Stacked, the two ways of reaching us come first and the fine print goes
   last — the order the three-column desktop foot cannot have. */
@media (max-width: 760px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-2);
  }

  .site-footer__legal {
    order: 3;
  }

  .social {
    justify-self: center;
  }

  .reach {
    justify-self: center;
    flex-direction: column;
    gap: 0.2rem;
  }

  .reach__lines {
    justify-items: center;
  }
}