/* ═══════════════════════════════════════════════════════════════════════════
   SONO XR — THE SITE FOOTER. One definition, every page.  (2026-08-09)

   Michael: "the home page footer should be on all pages, it's not."

   It wasn't: the homepage had the React Footer (seal, full lockup, contact,
   newsletter, social row), pricing had a completely separate `.pg-foot` with
   different columns and no newsletter, building.html had a bare <footer>, and
   the legal pages had none at all. Four footers, same as the five headers.

   ⚠️ SAME TWO-RENDERER CONTRACT AS THE HEADER. This file is the source of
   truth for the look; the markup exists twice:
       · js/sxr-footer.js          — static pages
       · src/components/Footer.jsx — the React homepage
   Change one, change the other.

   ⚠️ WHY THIS IS HAND-WRITTEN CSS AND NOT TAILWIND. Footer.jsx is built from
   Tailwind utilities, and the static pages do not load Tailwind — porting the
   classes verbatim would have produced an unstyled footer on exactly the pages
   this is meant to fix. Every utility is reproduced here as real CSS.

   ⚠️ AND WHY ?v= MATTERS. Netlify serves this with a one-year max-age and no
   content hash, so the query string is the only cache key. Bump it on every
   change — the header module lost an afternoon to exactly that.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ THE CURTAIN ══════════════════════════════════════════════════════════
   RESTORED 2026-08-11. Michael: "the top footer gets covered up by the bottom
   footer… we worked a long time to get it right… I'd like it back."

   He was right that it was lost, and here is where it went: `ab01275` recovered
   it from the pre-split build, `272f3ef` refined it to a full-viewport cover,
   and then `49b46b7` ("Deploy new Hybrid SONO XR Platform landing page")
   replaced index.html wholesale and took `.talk` and `.pfoot` with it. Only the
   rotating seal survived into the current footer, which is why the footer has
   always half-felt like the old one.

   ⚠️ THE WHOLE EFFECT IS TWO DECLARATIONS. There is no scroll listener, no
   IntersectionObserver, no library. The closer is `position: sticky; top: 0` at
   z-index 1; the footer is `position: relative` at z-index 2 with an OPAQUE
   background. The closer pins to the viewport while the page keeps scrolling,
   and the footer — being later in the document and higher in the stack — rides
   up over it like a curtain. Anything that makes the footer's background
   translucent breaks it instantly, because you would see the pinned block
   through it.

   ⚠️ AND IT IS OFF BELOW 860px. Sticky positioning over a phone-height viewport
   means the closer occupies the entire screen for the length of its own scroll,
   which reads as a broken page rather than an effect. Both blocks go static and
   the footer simply follows the closer, which is the correct fallback and was
   in the original.

   ⚠️ .sxr-talk IS OPTIONAL. It renders only when the mount asks for it
   (data-talk on #sxr-footer). The legal pages get the plain footer — a jumbo
   "Let's talk" under a privacy policy is the wrong register, and without the
   closer there is nothing to cover, so the curtain simply does not occur. */
/* ⚠️ THE GAP WAS A CONTENT PROBLEM, NOT A SPACING ONE (Michael, 2026-08-12:
   "the LETS TALK section has huge gap above/below too").

   The block is min-height 88vh because the CURTAIN needs a screen-tall box to
   pin — that is not padding and cannot simply be reduced without weakening the
   effect. What filled it was a headline, one line of lede and three links:
   maybe 300px of content centred in ~800px, which reads as two big voids.

   So the fix is the same change Michael asked for next — make the closer
   carry what plat-form's does (a real form, an offer list, contact details).
   Filling the box removes the gap, and `align-items: start` with generous
   internal rhythm stops the remainder pooling in one place. */
.sxr-talk {
  position: sticky; top: 0; z-index: 1;
  background: var(--f-ground, #0B0A09);
  min-height: 88vh;
  display: flex; align-items: center;
  border-top: 1px solid rgba(212, 220, 228, 0.14);
}
.sxr-talk-in {
  max-width: 1240px; margin: 0 auto; width: 100%;
  padding: clamp(28px, 4vh, 48px) clamp(16px, 3vw, 32px);
}

/* ── the headline band — its own full-width row, as in the reference ────── */
/* ⚠️ CENTRED AND FULL-BLEED, ITS OWN BAND (Michael, 2026-08-12: "the text
   LETS TALK. is VERY BIG and CENTERED ABOVE SECTION"). The reference gives the
   headline an entire row to itself and lets it run nearly edge to edge — it is
   the loudest thing on the screen, and left-aligning it at 140px made it read
   as a section label instead. 14vw is what actually fills the container at
   1240px; the clamp floor keeps it sane on a phone. */
.sxr-talk h2 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(3.4rem, 14vw, 12rem); font-weight: 600;
  letter-spacing: -0.045em; line-height: 0.86;
  color: #d4dce4; margin: 0 0 clamp(16px, 2.2vh, 26px);
  text-align: center;
}
.sxr-talk h2 em { font-style: normal; color: #B08D57; }

/* ── the card grid ──────────────────────────────────────────────────────── */
.sxr-talk-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  align-items: start;
}
.sxr-talk-col { display: flex; flex-direction: column; gap: 12px; }
.sxr-card {
  background: rgba(212, 220, 228, 0.055);
  border: 1px solid rgba(212, 220, 228, 0.15);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 30px);
}
.sxr-card h3 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 500;
  color: #f2f5f8; margin: 0 0 4px; letter-spacing: -0.01em;
}
.sxr-card p.sub {
  color: rgba(212, 220, 228, 0.72); font-weight: 300;
  font-size: 0.95rem; margin: 0;
}

/* what you can hire us for — bulleted, like the reference's "What we offer" */
.sxr-card ul { list-style: none; margin: 14px 0 0; padding: 0; }
.sxr-card li {
  position: relative; padding-left: 18px; margin-bottom: 10px;
  color: rgba(212, 220, 228, 0.88); font-size: 0.95rem; font-weight: 300;
  line-height: 1.5;
}
.sxr-card li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(212, 220, 228, 0.45);
}
.sxr-card .ledger {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  color: #B08D57; text-decoration: none; font-size: 0.9rem;
  transition: gap 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sxr-card .ledger:hover { gap: 13px; }

/* Follow us — one real account, laid out like the reference's social row */
.sxr-card-follow { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.sxr-card-follow h3 { margin: 0; }
.sxr-social { display: flex; align-items: center; gap: 10px; }
/* ⚠️ ICON ONLY (Michael, 2026-08-12) — the handle text is gone, so the link
   carries its name in aria-label or it has NO accessible name at all. Same
   rule the header's Home orb needed. Square, not a pill, so a single icon does
   not read as an oversized button. */
.sxr-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(212, 220, 228, 0.18);
  color: rgba(212, 220, 228, 0.88); text-decoration: none;
  transition: border-color 200ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sxr-social a svg { width: 19px; height: 19px; }
.sxr-social a:hover { border-color: rgba(176, 141, 87, 0.55); color: #B08D57; }
@media (max-width: 560px) { .sxr-card-follow { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* the Digital / Where split, mirroring the reference's Digital | Office */
.sxr-card-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sxr-card-split .k {
  display: flex; align-items: center; gap: 9px;
  color: #f2f5f8; font-size: 1.02rem; font-weight: 400; margin-bottom: 10px;
}
.sxr-card-split .k svg { width: 17px; height: 17px; opacity: 0.55; }
.sxr-card-split a, .sxr-card-split span.v {
  display: block; color: rgba(212, 220, 228, 0.85);
  font-size: 0.95rem; font-weight: 300; text-decoration: none; line-height: 1.6;
}
.sxr-card-split a:hover { color: #B08D57; }

/* ── the form — each field is its own card, as in the reference ─────────── */
.sxr-talk-form { display: flex; flex-direction: column; gap: 12px; }
.sxr-talk-form input,
.sxr-talk-form textarea {
  width: 100%; display: block;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
  /* Michael: "be nice too if the fields and text for email form was lighter
     grey and the text brighter white so easier to read/see sections" — field
     fill 0.035 → 0.075, hairline 0.10 → 0.18, ink to near-white. */
  background: rgba(212, 220, 228, 0.075);
  border: 1px solid rgba(212, 220, 228, 0.18);
  border-radius: 16px;
  color: #f2f5f8; font-family: inherit;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem); font-weight: 300;
  transition: border-color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sxr-talk-form textarea { resize: vertical; min-height: 132px; }
.sxr-talk-form input::placeholder,
.sxr-talk-form textarea::placeholder { color: rgba(212, 220, 228, 0.60); }
.sxr-talk-form input:focus,
.sxr-talk-form textarea:focus { outline: none; border-color: rgba(176, 141, 87, 0.5); }

/* the submit row — note on the left, circular arrow on the right */
.sxr-talk-send {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: rgba(212, 220, 228, 0.075);
  border: 1px solid rgba(212, 220, 228, 0.18);
  border-radius: 16px; padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
}
.sxr-talk-send .note {
  color: rgba(212, 220, 228, 0.75); font-size: 0.9rem; font-weight: 300; margin: 0;
}
.sxr-talk-send button {
  flex: none; width: 54px; height: 54px; border-radius: 14px; border: none;
  background: #B08D57; color: #0B0A09; cursor: pointer;
  display: grid; place-items: center;
  transition: background 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sxr-talk-send button svg { width: 21px; height: 21px; }
.sxr-talk-send button:hover { background: #bd9a63; }
.sxr-talk-send button:active { transform: scale(0.96); }
.sxr-talk-send button[disabled] { opacity: 0.5; cursor: default; }

.sxr-talk-form .ok,
.sxr-talk-form .err { display: none; font-size: 0.95rem; }
.sxr-talk-form .ok  { color: #B08D57; }
.sxr-talk-form .err { color: rgba(212, 220, 228, 0.78); }
/* ⚠️ THE HONEYPOT MUST BE OFF-SCREEN, NOT display:none — a hidden input is a
   signal some bots check for. It rendered VISIBLE on the homepage on 08-12
   because this rule lived only in the static stylesheet; the two are shared
   now, which is what stops that recurring. */
.sxr-talk-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 980px) {
  .sxr-talk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* the fallback that makes the curtain safe to ship — see the warning above */
  .sxr-talk { position: static; min-height: 0; }
  .sxr-card-split { grid-template-columns: 1fr; gap: 16px; }
}

.sxr-foot {
  /* ⚠️ z-index 2 + an OPAQUE background are what make this the curtain rather
     than just the next section. Do not give this a transparent or blurred
     background — the pinned closer would show through and the effect dies. */
  position: relative; z-index: 2; overflow: hidden;
  background: #030509;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 64px 0 40px;
  color: #94a3b8;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.sxr-foot::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 300px; pointer-events: none;
  /* Phase 2: was rgba(0,240,255,0.05) cyan. A cyan wash directly under a chrome
     header was the most visible seam on the site. */
  background: radial-gradient(ellipse at center, rgba(176, 141, 87, 0.05) 0%, transparent 70%);
}
.sxr-foot-in {
  position: relative; z-index: 1;
  max-width: 80rem; margin: 0 auto; padding: 0 1rem;
}
@media (min-width: 640px) { .sxr-foot-in { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sxr-foot-in { padding: 0 2rem; } }

/* ── top row: brand + contact ─────────────────────────────────────────── */
.sxr-foot-top {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  align-items: start;
}
@media (min-width: 768px) { .sxr-foot-top { grid-template-columns: 1fr 1fr; } }

.sxr-seal { position: relative; width: 5rem; height: 5rem; margin-bottom: 0.25rem; }
.sxr-seal svg { width: 100%; height: 100%; animation: sxrSealSpin 26s linear infinite; }
.sxr-seal .dot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: #B08D57;   /* the seal dot marks state; glow removed per DESIGN.md */
}
@keyframes sxrSealSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sxr-seal svg { animation: none; } }

.sxr-foot-lock { width: 100%; max-width: 300px; height: auto; display: block; margin: 0.875rem 0; }
.sxr-foot-desc {
  font-size: 0.875rem; font-weight: 300; line-height: 1.65;
  color: #cbd5e1; max-width: 28rem; margin: 0 0 0.875rem;
}
/* .sxr-foot-pill DELETED 2026-08-13 — it styled the "WE RUN INFRASTRUCTURE •
   YOU LEAD INNOVATION" badge, which BRAND.md bans by name and CC-BUILD-BRIEF
   1.3 says to delete rather than replace. The rule goes with it: leaving a
   ready-made pill style behind is an invitation to hang another slogan on it. */

/* the contact column sits on the row's baseline, not its top — top-aligned it
   hung at the head of a cell as tall as the brand lockup and left a gap */
.sxr-foot-contact {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; height: 100%; gap: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem;
}
@media (min-width: 768px) { .sxr-foot-contact { align-items: flex-end; text-align: right; } }
.sxr-foot-contact .lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.25em; color: #64748b;
}
.sxr-foot-contact a.mail {
  display: inline-flex; align-items: center; gap: 0.375rem;
  color: #fff; font-weight: 700; font-size: 0.875rem;
  text-decoration: underline; transition: color 0.18s ease;
}
.sxr-foot-contact a.mail:hover { color: #B08D57; }
.sxr-foot-contact .where { display: flex; align-items: center; gap: 0.375rem; color: #94a3b8; }
.sxr-foot-contact svg { width: 1rem; height: 1rem; flex: none; }

/* ── middle row: nav columns + newsletter ─────────────────────────────── */
.sxr-foot-mid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding: 2.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) { .sxr-foot-mid { grid-template-columns: 1fr 1fr 2fr; } }
.sxr-foot-col h5 {
  font-family: 'Syne', sans-serif; font-size: 0.75rem; font-weight: 700;
  color: #fff; text-transform: uppercase; letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}
.sxr-foot-col ul { list-style: none; margin: 0; padding: 0; }
.sxr-foot-col li { margin-bottom: 0.5rem; }
.sxr-foot-col a {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem;
  color: #94a3b8; text-decoration: none; transition: color 0.18s ease;
}
.sxr-foot-col a:hover { color: #fff; }

.sxr-foot-news {
  padding: 1.5rem; border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.02);
}
@media (min-width: 640px) { .sxr-foot-news { padding: 2rem; } }
.sxr-foot-news h4 {
  font-family: 'Syne', sans-serif; font-size: 1.125rem; font-weight: 700;
  color: #fff; margin: 0 0 0.75rem;
}
.sxr-foot-news p {
  font-size: 0.75rem; color: #cbd5e1; font-weight: 300; line-height: 1.65;
  margin: 0 0 1rem;
}
.sxr-foot-news form { display: flex; gap: 0.5rem; }
.sxr-foot-news input {
  flex: 1; min-width: 0; padding: 0.625rem 1rem; border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem;
}
.sxr-foot-news input:focus { outline: none; border-color: rgba(212,220,228,0.45); }
.sxr-foot-news button {
  flex: none; padding: 0.625rem 1.25rem; border-radius: 0.75rem; border: 0;
  background: #B08D57;   /* the subscribe button — a fill, so bronze */
  color: #05080f; cursor: pointer; display: inline-flex; align-items: center;
  transition: filter 0.2s ease;
}
.sxr-foot-news button:hover { filter: brightness(1.1); }
.sxr-foot-news button:disabled { opacity: 0.6; cursor: not-allowed; }
.sxr-foot-news .note {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  color: #64748b; margin-top: 0.75rem;
}
.sxr-foot-news .ok, .sxr-foot-news .err {
  display: none; padding: 0.75rem; border-radius: 0.75rem; margin-top: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem;
}
.sxr-foot-news .ok.on { display: block; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.4); color: #34d399; }
.sxr-foot-news .err.on { display: block; background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.4); color: #fcd34d; }

/* ── bottom bar ───────────────────────────────────────────────────────── */
.sxr-foot-bot {
  padding-top: 1.5rem; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; gap: 1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem; color: #94a3b8;
}
@media (min-width: 640px) { .sxr-foot-bot { flex-direction: row; } }
.sxr-foot-bot .left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sxr-foot-bot .sep { color: rgba(255, 255, 255, 0.2); }
.sxr-foot-bot img { height: 1.75rem; width: auto; display: block; }
.sxr-foot-bot .social { display: flex; align-items: center; gap: 1rem; }
.sxr-foot-bot .social a {
  padding: 0.5rem; border-radius: 999px; color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  display: inline-flex; transition: color 0.18s ease, border-color 0.18s ease;
}
.sxr-foot-bot .social a:hover { color: #B08D57; border-color: rgba(176,141,87,0.5); }
.sxr-foot-bot .social svg { width: 1rem; height: 1rem; }