/* =============================================================
   PRIMARY BUTTON SYSTEM
   Loaded last, after every skin patch.

   Every primary CTA on the site is one component with one fill in
   each skin — the See-the-work fill. Earlier layers gave the footer,
   nav and pack CTAs their own gradients, rim borders and hover
   colour swaps, which is why the same action looked like three
   different buttons depending on where it sat.

   The hero CTA is the single exception: it keeps its liquid shader.
   Everything else lifts with a slight glow on hover, same fill.
   ============================================================= */

:root {
  /* Matches liquid.js uDeep for the light skin. */
  --cta-fill: #0b1734;
  /* liquid.js uMid — what the shader lifts to under the cursor. */
  --cta-sheen: #133cb8;
  --cta-ink: #f4f1ea;
  --cta-glow: rgb(11 23 52 / .34);
}

html[data-skin="nocturne"] {
  /* Matches liquid.js uDeep for the dark skin. */
  --cta-fill: #2961db;
  --cta-sheen: #4087f7;
  --cta-ink: #f2f6ff;
  --cta-glow: rgb(41 97 219 / .45);
}

/* The hero CTA is a WebGL surface: the shader lights uDeep toward uMid across
   the button, which is the depth the flat CTAs were missing — most obvious in
   nocturne, where the hero button reads as lit and the others as painted-on.
   These two gradients are that lighting approximated in CSS, so every primary
   CTA matches the hero in both skins without any of them running a shader. */

html .button--dark,
html .footer-cta-button,
html #footer .footer-cta-button,
html .site-header .site-nav .nav-contact,
html .nav-contact,
html .pack .button,
html #packs .pack-rail-card-cta,
html #packs .pack-rail-card .pack-rail-card-cta.button--dark {
  border: 1px solid var(--cta-fill);
  background-color: var(--cta-fill);
  background-image: linear-gradient(152deg,
    color-mix(in srgb, var(--cta-sheen) 42%, var(--cta-fill)) 0%,
    var(--cta-fill) 62%);
  color: var(--cta-ink);
  box-shadow: none;
  filter: none;
  transition: box-shadow 220ms ease, transform 220ms ease, background-color 220ms ease;
}

html .button--dark .button-copy,
html .footer-cta-button .button-copy,
html #footer .footer-cta-button .button-copy,
html .nav-contact .button-copy,
html #packs .pack-rail-card-cta .button-copy {
  color: var(--cta-ink);
  -webkit-text-fill-color: var(--cta-ink);
}

/* Hover is a lift, not a repaint: the fill holds and the button glows. */
html .button--dark:hover,
html .button--dark:focus-visible,
html .footer-cta-button:hover,
html .footer-cta-button:focus-visible,
html #footer .footer-cta-button:hover,
html #footer .footer-cta-button:focus-visible,
html .site-header .site-nav .nav-contact:hover,
html .site-header .site-nav .nav-contact:focus-visible,
html .nav-contact:hover,
html .nav-contact:focus-visible,
html .pack .button:hover,
html .pack .button:focus-visible,
html #packs .pack-rail-card-cta:hover,
html #packs .pack-rail-card-cta:focus-visible,
html #packs .pack-rail-card .pack-rail-card-cta.button--dark:hover,
html #packs .pack-rail-card .pack-rail-card-cta.button--dark:focus-visible {
  border-color: var(--cta-sheen);
  background-color: var(--cta-sheen);
  background-image: linear-gradient(152deg,
    color-mix(in srgb, #ffffff 16%, var(--cta-sheen)) 0%,
    var(--cta-sheen) 64%);
  color: var(--cta-ink);
  box-shadow: 0 0 0 1px var(--cta-glow), 0 8px 22px var(--cta-glow);
  filter: none;
}

html .footer-cta-button:hover .button-copy,
html .footer-cta-button:focus-visible .button-copy,
html #footer .footer-cta-button:hover .button-copy,
html #footer .footer-cta-button:focus-visible .button-copy,
html .nav-contact:hover .button-copy,
html .nav-contact:focus-visible .button-copy,
html #packs .pack-rail-card-cta:hover .button-copy,
html #packs .pack-rail-card-cta:focus-visible .button-copy {
  color: var(--cta-ink);
  -webkit-text-fill-color: var(--cta-ink);
}

/* The hero CTA paints its own surface, so it takes the fill as a backing
   colour only — no glow competing with the liquid. */
html .hero .hero-actions .button[data-liquid-button]:hover,
html .hero .hero-actions .button[data-liquid-button]:focus-visible {
  box-shadow: none;
}

/* U+2197 has an emoji presentation on iOS, which is where the blue tile
   next to "Discuss a project" came from. Keep every inline arrow textual. */
.button-copy span[aria-hidden="true"],
.case-study-link span[aria-hidden="true"] {
  font-variant-emoji: text;
}

@media (max-width: 720px) {
  /* The footer CTA shares a row with the email address — it was reading as
     the heaviest thing in the footer. */
  #footer .footer-cta-button {
    min-height: 42px;
    padding: 11px 18px;
    font-size: .8rem;
  }

  #footer .footer-cta-button .button-copy { gap: 6px; }
}

/* -------------------------------------------------------------
   DARK SKIN — same weight as the skin patches it replaces
   page-polish.css and styles.css carry nocturne rules at
   [data-skin] + #packs + three classes, which outranked the
   generic block above and left the pack CTA on its old gradient
   with near-black text on a blue fill. These match that weight and
   load later, so the one fill wins in both skins.
   ------------------------------------------------------------- */
html[data-skin="nocturne"] .button--dark,
html[data-skin="nocturne"] .footer-cta-button,
html[data-skin="nocturne"] #footer .footer-cta-button,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact,
html[data-skin="nocturne"] .pack .button,
html[data-skin="nocturne"] #packs .pack-rail-card-cta,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark {
  border: 1px solid var(--cta-fill) !important;
  background-color: var(--cta-fill) !important;
  /* Was background-image:none, which is what flattened these in nocturne — the
     hero kept its shader lighting and the rest went matte. Same lighting as the
     light skin now, so all four read as one component in both. */
  background-image: linear-gradient(152deg,
    color-mix(in srgb, var(--cta-sheen) 42%, var(--cta-fill)) 0%,
    var(--cta-fill) 62%) !important;
  color: var(--cta-ink) !important;
  -webkit-text-fill-color: var(--cta-ink);
  box-shadow: none !important;
  filter: none !important;
}

/* Hover in nocturne: the shader's own uMid, matching the light skin's rule. */
html[data-skin="nocturne"] .button--dark:hover,
html[data-skin="nocturne"] .button--dark:focus-visible,
html[data-skin="nocturne"] .footer-cta-button:hover,
html[data-skin="nocturne"] .footer-cta-button:focus-visible,
html[data-skin="nocturne"] #footer .footer-cta-button:hover,
html[data-skin="nocturne"] #footer .footer-cta-button:focus-visible,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:hover,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:focus-visible,
html[data-skin="nocturne"] .pack .button:hover,
html[data-skin="nocturne"] .pack .button:focus-visible,
html[data-skin="nocturne"] #packs .pack-rail-card-cta:hover,
html[data-skin="nocturne"] #packs .pack-rail-card-cta:focus-visible {
  border-color: var(--cta-sheen) !important;
  background-color: var(--cta-sheen) !important;
  background-image: linear-gradient(152deg,
    color-mix(in srgb, #ffffff 16%, var(--cta-sheen)) 0%,
    var(--cta-sheen) 64%) !important;
  box-shadow: 0 0 0 1px var(--cta-glow), 0 8px 22px var(--cta-glow) !important;
}

html[data-skin="nocturne"] .button--dark .button-copy,
html[data-skin="nocturne"] .footer-cta-button .button-copy,
html[data-skin="nocturne"] #footer .footer-cta-button .button-copy,
html[data-skin="nocturne"] .nav-contact .button-copy,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta .button-copy {
  color: var(--cta-ink) !important;
  -webkit-text-fill-color: var(--cta-ink) !important;
}

/* Same hover as the light skin, at the weight the pack rail needs.
   This block used to hold a different hover — fill held, background-image
   cleared — which, being the last one in the file, beat the sheen hover above
   it. So nocturne had two hovers on paper and the flat one in practice, and a
   "Send a message" next to a "Back home" lifted to two different colours. The
   selectors stay (page-polish.css and styles.css carry nocturne pack rules at
   this weight); only the values come into line. */
html[data-skin="nocturne"] .button--dark:hover,
html[data-skin="nocturne"] .button--dark:focus-visible,
html[data-skin="nocturne"] .footer-cta-button:hover,
html[data-skin="nocturne"] .footer-cta-button:focus-visible,
html[data-skin="nocturne"] #footer .footer-cta-button:hover,
html[data-skin="nocturne"] #footer .footer-cta-button:focus-visible,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:hover,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:focus-visible,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta:hover,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta:focus-visible,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark:hover,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark:focus-visible {
  border-color: var(--cta-sheen) !important;
  background-color: var(--cta-sheen) !important;
  background-image: linear-gradient(152deg,
    color-mix(in srgb, #ffffff 16%, var(--cta-sheen)) 0%,
    var(--cta-sheen) 64%) !important;
  color: var(--cta-ink) !important;
  box-shadow: 0 0 0 1px var(--cta-glow), 0 8px 22px var(--cta-glow) !important;
  filter: none !important;
}

/* The hero CTA hands its fill to the liquid canvas once that has painted. */
html[data-skin="nocturne"] [data-liquid-button].has-liquid,
html[data-skin="nocturne"] [data-liquid-button].has-liquid:hover,
html[data-skin="nocturne"] [data-liquid-button].has-liquid:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}