/* ========================================================================
   Mercurial Phoenix — design tokens
   ======================================================================== */
:root {
  --color-ink: #1a1817;
  --color-ink-soft: #4a4744;
  --color-paper: #faf8f5;
  --color-paper-raised: #ffffff;
  --color-primary: #ff5d00;
  --color-primary-dark: #b64300;
  --color-primary-tint: #ffece0;
  --color-slate: #56534f;
  --color-terracotta: #de9066;
  --color-line: rgba(26, 24, 23, 0.12);
  --color-line-on-dark: rgba(255, 255, 255, 0.18);

  /* The one semantic pair in the palette. The contact form can now fail —
     a rejected address, a send that did not go through — and reporting
     that in the brand orange would read as another success state. Kept
     deliberately muted so it sits beside the orange rather than fighting
     it. */
  --color-error: #9c2b1b;
  --color-error-wash: #fbe9e6;

  /* General Sans (Fontshare) — free-to-use stand-in for pairnow.ai's
     Aeonik, which is a paid commercial typeface we can't legally embed.
     Same bold geometric-grotesk character, used for both display and
     body text to match their single-typeface system. */
  --font-display: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "General Sans", "Helvetica Neue", Arial, sans-serif;

  --container-w: 1180px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================================================
   Reset
   ======================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-paper-raised);
  color: var(--color-ink);
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(26, 24, 23, 0.2);
  transform: translateY(calc(-100% - var(--space-2)));
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

main:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 3px;
}

.drawer :focus-visible {
  outline-color: #fff;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

@media (min-width: 720px) {
  .container {
    padding-inline: var(--space-4);
  }
}

section {
  padding-block: var(--space-6);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ========================================================================
   Buttons
   ======================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-ghost-light {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.btn-ghost-dark {
  border-color: var(--color-line);
  color: var(--color-ink);
}

.btn-ghost-dark:hover {
  border-color: var(--color-ink);
}

.btn-on-white {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn-on-white:hover {
  background: var(--color-primary-dark);
}

/* ========================================================================
   Header / nav
   ======================================================================== */
/* The frosted-glass effect lives on ::before rather than directly on
   .site-header — a `backdrop-filter` on the header itself would create a
   new CSS containing block, trapping the mobile nav's `position: fixed`
   panel inside the header's own box instead of the full viewport. */
/* No background of its own at all — pairnow's header is genuinely
   just a transparent fixed bar. Legibility comes from the hamburger/
   icon colour and the CTA's own solid pill, not a backdrop.
   position: fixed (not sticky) so it floats directly over whatever's
   at the top of the page — the entrance hero's photo on the homepage
   — rather than reserving its own 76px of flow above it. Every first
   section already carries enough top padding to clear it. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* A thin, tint-free blur hairline pinned to the very top edge of the
   viewport — independent of the header's own (much taller) blur, this
   is the subtle "content softens as it exits past the top" effect,
   sitting above the header so it reads on every section. */
.top-edge-blur {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  z-index: 60;
  pointer-events: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  mask-image: linear-gradient(to bottom, black, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}

.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-ink);
}

/* Icon-only in the header, always — no wordmark here, ever. On the
   homepage this element's own icon stays permanently invisible (see
   body.has-flip-mark below); the floating .transition-mark plays
   that role instead once it docks. */
.header-brand {
  justify-self: center;
  min-width: 0;
}

.brand-mark {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

.brand-word {
  white-space: nowrap;
}

.nav-toggle {
  justify-self: start;
  background: none;
  border: none;
  padding: 0.5rem;
  margin-left: -0.5rem;
  cursor: pointer;
}

/* Orange by default rather than the page's ink colour — the header
   floats (position: fixed, no backdrop of its own) over both dark and
   light sections as the user scrolls the whole page, not just the
   hero, so the icon needs a colour that reads reasonably against
   either rather than one tuned for a single background. */
.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-primary-dark);
  margin: 5px 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease),
    width 0.25s var(--ease), border-radius 0.25s var(--ease), background 0.25s var(--ease);
}

/* Hover: the middle bar collapses into a small dot, echoing pairnow's
   hamburger hover treatment. Skipped while the drawer is open so it
   doesn't fight the click-triggered X transform. */
.nav-toggle:hover .bar:nth-child(1),
.nav-toggle:hover .bar:nth-child(3) {
  background: var(--color-primary-dark);
}

.nav-toggle:hover .bar:nth-child(2) {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-inline: auto;
  background: var(--color-primary-dark);
}

/* Once the drawer is open, the toggle sits on the drawer's own orange
   background (it renders above the drawer, z-index-wise) — needs a
   colour that contrasts with that specific, known background rather
   than the page-dependent default. */
body.nav-open .nav-toggle .bar {
  background: #fff;
}

body.nav-open .nav-toggle:hover .bar:nth-child(2) {
  width: 22px;
  height: 2px;
  border-radius: 0;
  margin: 5px 0;
}

body.nav-open .nav-toggle .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.nav-open .nav-toggle .bar:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header-cta {
  justify-self: end;
}

@media (max-width: 480px) {
  .header-cta {
    padding: 0.7em 1em;
    font-size: 0.72rem;
    white-space: nowrap;
  }
}

/* ========================================================================
   Full-screen drawer menu
   ======================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  background: var(--color-primary-dark);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}

.drawer-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0.45rem;
  margin-left: -0.45rem;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}

.drawer-close svg {
  width: 24px;
  height: 24px;
  transition: transform 0.25s var(--ease);
}

.drawer-close:hover svg {
  transform: rotate(90deg);
}

.drawer[inert] {
  visibility: hidden;
}

.drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

body.nav-open {
  overflow: hidden;
}

.drawer-inner {
  width: 100%;
  padding-block: calc(76px + var(--space-5)) var(--space-6);
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}

.drawer-time .time-status,
.drawer-time .time-zone-label {
  justify-content: flex-start;
}

.drawer-time .time-zone-label {
  color: #fff;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.drawer-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 3.8rem);
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s var(--ease);
}

.drawer-nav a:hover,
.drawer-nav a[aria-current="page"] {
  color: var(--color-ink);
}

@media (max-width: 700px) {
  .drawer-inner {
    justify-content: flex-start;
  }

  .drawer-nav {
    align-items: flex-start;
  }
}

/* ========================================================================
   Entrance hero (homepage only) — full-height photo section the header
   brand fades in from once scrolled past; see main.js.
   ======================================================================== */
/* Shares the same ink background and glow recipe as the .hero section
   right after it, and carries no bottom border/shadow of its own, so
   the two stack into what reads as one continuous dark section rather
   than two visually distinct ones. */
/* Wraps .entrance-hero and .hero so they share one continuous
   background canvas — a single ink fill and a single glow layer sized
   to their combined height — rather than each section independently
   painting its own copy of the same gradient, which reads as two
   sections placed back to back instead of one. */
.intro-block {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  color: #fff;
}

.intro-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 30% at 82% 5%, rgba(226, 96, 31, 0.55), transparent 60%),
    radial-gradient(35% 22% at 8% 96%, rgba(222, 144, 102, 0.28), transparent 65%);
  pointer-events: none;
}

.entrance-hero {
  position: relative;
  padding-block: var(--space-7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.entrance-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding-inline: var(--space-3);
}

.entrance-mark-anchor {
  display: block;
  height: clamp(64px, 9vw, 108px);
  aspect-ratio: 1;
}

/* The real icon — position: fixed, driven entirely by JS transform/size
   as the user scrolls, so it visually flies from its resting spot in
   the entrance hero up into the header's brand slot, rather than one
   icon fading out while a second one fades in elsewhere. */
/* No transition here by default — the very first positioning (on
   load) must snap instantly, not animate in from the element's
   untransformed top-left default. JS enables the transition only
   after that first placement has been committed, via .flip-ready, so
   every animation after that is a deliberate scroll-triggered dock/
   undock rather than a load-time flash. */
.transition-mark {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 65;
  opacity: 0;
  pointer-events: none;
  will-change: transform, width, height;
}

.transition-mark.flip-ready {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

body.has-flip-mark .header-brand .brand-mark {
  opacity: 0;
}

.entrance-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 8vw, 6.5rem);
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}

.entrance-eyebrow {
  color: var(--color-terracotta);
}

/* ========================================================================
   Hero
   ======================================================================== */
.hero {
  position: relative;
  padding-block: var(--space-7) var(--space-6);
  text-align: center;
}

.hero .container {
  position: relative;
}

.hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(50vw, 600px);
  opacity: 0.08;
  pointer-events: none;
}

.hero-inner {
  max-width: 820px;
  margin-inline: auto;
}

.hero-eyebrow {
  justify-content: center;
  color: var(--color-terracotta);
}

.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.hero h1 {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1.05;
  margin-top: var(--space-3);
  color: #fff;
}

.hero h1 em {
  font-style: normal;
  color: var(--color-primary);
}

.hero-lede {
  margin-top: var(--space-3);
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
  margin-inline: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* stat / proof bar */
.proof-bar {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper-raised);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.proof-item .num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.proof-item .label {
  margin-top: 0.35rem;
  color: var(--color-slate);
  font-size: 0.92rem;
}

/* ========================================================================
   Section headers
   ======================================================================== */
.section-head {
  max-width: 640px;
  margin-bottom: var(--space-5);
}

.section-head .eyebrow {
  color: var(--color-primary-dark);
}

.section-head h2 {
  margin-top: var(--space-2);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
}

.section-head p {
  margin-top: var(--space-2);
  color: var(--color-slate);
  font-size: 1.05rem;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

/* ========================================================================
   Our work / prose section
   ======================================================================== */
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .work-grid {
    grid-template-columns: 0.8fr 1fr;
    align-items: start;
  }
}

.work-copy p + p {
  margin-top: var(--space-3);
}

.work-copy p {
  color: var(--color-ink-soft);
  font-size: 1.05rem;
}

/* ========================================================================
   Services cards
   ======================================================================== */
.services-section {
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-lg);
  margin-inline: var(--space-3);
}

@media (max-width: 719px) {
  #services > .container {
    padding-inline: 0;
  }

  .services-section {
    margin-inline: var(--space-2);
  }
}

@media (min-width: 720px) {
  .services-section {
    margin-inline: var(--space-4);
  }
}

.services-section .section-head p {
  color: rgba(255, 255, 255, 0.7);
}

.services-section .section-head .eyebrow {
  color: var(--color-terracotta);
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-line-on-dark);
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (min-width: 640px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.service-card {
  background: var(--color-ink);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background 0.3s var(--ease);
}

@media (max-width: 719px) {
  .service-card {
    padding: var(--space-3);
  }
}

@media (min-width: 640px) {
  .service-card--wide {
    grid-column: 1 / -1;
  }

  .service-card--wide p {
    max-width: 65ch;
  }
}

.service-card:hover {
  background: #241f1c;
}

.service-card .icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
}

.service-card h3 {
  font-size: 1.1rem;
  color: #fff;
}

.service-card p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.95rem;
}

/* ========================================================================
   Cards / grids (generic)
   ======================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

.info-card {
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.info-card h3 {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.info-card .step-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.info-card p {
  margin-top: 0.6rem;
  color: var(--color-slate);
  font-size: 0.96rem;
}

/* ========================================================================
   Audience routes
   ======================================================================== */
.audience-section {
  background: var(--color-primary-tint);
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 800px) {
  .audience-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.audience-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-4);
  border: 1px solid rgba(26, 24, 23, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.audience-number {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
}

.audience-card h3 {
  margin-top: var(--space-3);
  font-size: 1.35rem;
}

.audience-card p {
  margin-top: var(--space-2);
  color: var(--color-ink-soft);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin-top: auto;
  padding-top: var(--space-4);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.text-link span {
  transition: transform 0.2s var(--ease);
}

.text-link:hover span {
  transform: translateX(4px);
}

/* ========================================================================
   MP Ventures signpost
   ======================================================================== */
/* mercp.com and mp.ventures are separate properties with separate
   palettes, type, and components. This panel points at the other one;
   it does not bring any of its look across. Everything below is this
   site's own design system — the only thing shared is the destination. */
.venture-section {
  background: var(--color-paper-raised);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.venture-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

@media (min-width: 900px) {
  .venture-panel {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-5);
    padding: var(--space-5);
    align-items: start;
  }
}

.venture-copy .eyebrow {
  color: var(--color-primary-dark);
}

.venture-copy h2 {
  margin-top: var(--space-2);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.venture-copy p {
  margin-top: var(--space-3);
  color: var(--color-ink-soft);
  font-size: 1.05rem;
}

.venture-copy .btn {
  margin-top: var(--space-4);
}

.venture-terms {
  display: grid;
  gap: var(--space-2);
}

.venture-terms li {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.venture-terms strong {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}

/* Off-site arrow. Deliberately not .row-arrow: the two would fight over
   transform (the footer's rule is later in the file and would win), and
   this glyph should travel up and to the right along its own diagonal. */
.arrow-external {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.footer-row-link .arrow-external {
  opacity: 0.6;
}

.footer-row-link:hover .arrow-external {
  opacity: 1;
}

.btn:hover .arrow-external,
.footer-row-link:hover .arrow-external {
  transform: translate(3px, -3px);
}

.footer-row-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

/* ========================================================================
   Advantage section (full-bleed CTA + logo marquee)
   ======================================================================== */
.advantage-section {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  color: #fff;
  padding-block: var(--space-7) var(--space-6);
}

.advantage-bg {
  position: absolute;
  inset: -24px;
  background-image:
    linear-gradient(rgba(10, 9, 8, 0.6), rgba(10, 9, 8, 0.85)),
    url("../img/advantage-bg.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(6px);
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
  /* A committed transform from the very first frame, not just a
     will-change hint — promoting to a compositing layer mid-scroll
     (rather than having one already active) is exactly the kind of
     transition that can cause a browser to miss repainting a
     scroll-driven transform update in time, even though the
     computed style value itself is correct throughout. */
  transform: translateZ(0) scale(1);
}

.advantage-content {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.advantage-content h2 {
  font-size: clamp(2.8rem, 7.5vw, 6rem);
  line-height: 1.02;
  color: #fff;
}

.advantage-content p {
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1rem;
}

.advantage-content .btn {
  margin-top: var(--space-4);
}

.advantage-logos {
  position: relative;
  margin-top: var(--space-7);
}

.advantage-logos .logos-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-4);
}

.logo-marquee {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.logo-track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: max-content;
  animation: logo-scroll 34s linear infinite;
}

.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}

@keyframes logo-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
  }
}

.logo-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 34px;
}

.logo-chip img {
  height: 100%;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.25s var(--ease);
}

.logo-chip img:hover {
  opacity: 1;
}

/* ========================================================================
   Footer
   ======================================================================== */
/* position: relative + a raised z-index unconditionally (not gated
   behind :has() support) — this is what lets the footer visually
   paint over a still-pinned .ready-talk-section as it scrolls up
   from below; without it, browsers lacking :has() would silently
   fall back to default stacking and the reveal effect would just
   never happen for them. */
.site-footer {
  position: relative;
  z-index: 10;
  transform: translateZ(0);
  background: var(--color-primary);
  color: #fff;
  margin-top: var(--space-6);
}

/* These full-bleed closing sections already supply their own bottom
   spacing, so the footer's usual top margin would create a blank bar. */
main:has(.advantage-section) + .site-footer,
main:has(.contact-clients) + .site-footer {
  margin-top: 0;
}

/* ========================================================================
   Ready to talk — child-page closing CTA, full-bleed with the same
   sticky-reveal mechanic pairnow uses: the section pins to the
   viewport (position: sticky) for the extra height of its wrapper,
   then releases as that wrapper runs out, right as the footer
   (position: relative, raised z-index, opaque background) scrolls up
   from below and visually slides over it.
   ======================================================================== */
.ready-talk-wrapper {
  position: relative;
  height: 220vh;
}

.ready-talk-section {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  z-index: 1;
  /* Forces its own GPU compositing layer — without this, some
     browsers can get the paint order between a sticky element and a
     later, higher z-index sibling wrong specifically while actively
     scrolling (correct once scrolling stops), which reads as "the
     footer just follows normally" instead of visibly sliding over. */
  transform: translateZ(0);
}

/* Shared layout/treatment; each page supplies its own photo via a
   modifier class below, so About/Team/For Founders don't all repeat
   the same background. */
.ready-talk-bg {
  position: absolute;
  inset: -24px;
  background-size: cover;
  background-position: center;
  filter: blur(6px);
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}

.ready-talk-bg--about {
  background-image:
    linear-gradient(rgba(10, 9, 8, 0.55), rgba(10, 9, 8, 0.8)),
    url("../img/ready-talk-about.jpg");
}

.ready-talk-bg--team {
  background-image:
    linear-gradient(rgba(10, 9, 8, 0.55), rgba(10, 9, 8, 0.8)),
    url("../img/ready-talk-team.jpg");
}

.ready-talk-bg--for-founders {
  background-image:
    linear-gradient(rgba(10, 9, 8, 0.55), rgba(10, 9, 8, 0.8)),
    url("../img/ready-talk-for-founders.jpg");
}

.ready-talk-content {
  position: relative;
  max-width: 640px;
  padding-inline: var(--space-3);
}

.ready-talk-content h2 {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  color: #fff;
}

.ready-talk-content p {
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1rem;
}

.ready-talk-content .btn {
  margin-top: var(--space-4);
}

main:has(.ready-talk-wrapper) + .site-footer {
  margin-top: 0;
}

.footer-top {
  padding-block: var(--space-7) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.footer-brand .brand {
  color: #fff;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.footer-brand .brand .brand-mark {
  filter: brightness(0) invert(1);
  height: 96px;
}

.footer-brand .brand .brand-word {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 700;
}

.footer-brand p {
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.85);
  max-width: 36ch;
}

.footer-time {
  text-align: left;
}

@media (min-width: 720px) {
  .footer-time {
    text-align: right;
  }

  .time-status {
    justify-content: flex-end;
  }

  .time-zone-label {
    justify-content: flex-end;
  }
}

.footer-links {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.footer-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

@media (max-width: 560px) {
  .footer-links-grid {
    grid-template-columns: 1fr;
  }
}

.footer-link-col {
  display: flex;
  flex-direction: column;
}

.footer-link-col + .footer-link-col {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

@media (max-width: 560px) {
  .footer-link-col + .footer-link-col {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
  }

  /* Stacked to a single column here, so the last column's text
     should left-align the same as the first's instead of keeping its
     wider default left padding from the two-column layout. */
  .footer-link-col:last-child .footer-row-link {
    padding-left: var(--space-3);
  }

  .footer-link-col:last-child .footer-row-link:hover {
    padding-left: calc(var(--space-3) + 0.4rem);
  }
}

.footer-row-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
  transition: background 0.2s var(--ease), padding-left 0.2s var(--ease);
}

.footer-link-col .footer-row-link:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.footer-row-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.footer-link-col:not(:first-child) .footer-row-link:hover {
  padding-left: calc(var(--space-4) + 0.4rem);
}

/* The link rows span the full edge-to-edge width of the footer (kept
   deliberately, so the hover highlight and borders still reach the
   true viewport edge), but the text inside is inset to line up with
   the site's normal container content — the "About" column starts at
   the same x as "Helping make better technology..." above it, and
   the last column mirrors that on the right. Falls back to the plain
   space-3/4 padding at narrow widths, once the container itself is
   no longer wider than the viewport and the calc term goes negative. */
.footer-link-col:first-child .footer-row-link {
  padding-left: max(var(--space-3), calc((100vw - var(--container-w)) / 2 + var(--space-3)));
}

.footer-link-col:first-child .footer-row-link:hover {
  padding-left: calc(max(var(--space-3), calc((100vw - var(--container-w)) / 2 + var(--space-3))) + 0.4rem);
}

.footer-link-col:last-child .footer-row-link {
  padding-right: max(var(--space-3), calc((100vw - var(--container-w)) / 2 + var(--space-3)));
}

@media (min-width: 720px) {
  .footer-link-col:first-child .footer-row-link {
    padding-left: max(var(--space-4), calc((100vw - var(--container-w)) / 2 + var(--space-4)));
  }

  .footer-link-col:first-child .footer-row-link:hover {
    padding-left: calc(max(var(--space-4), calc((100vw - var(--container-w)) / 2 + var(--space-4))) + 0.4rem);
  }

  .footer-link-col:last-child .footer-row-link {
    padding-right: max(var(--space-4), calc((100vw - var(--container-w)) / 2 + var(--space-4)));
  }
}

.footer-row-link .row-arrow {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.footer-row-link:hover .row-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.footer-bottom {
  padding-block: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.footer-bottom-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
}

.scroll-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.scroll-top-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  transform: translateY(-2px);
}

.scroll-top-btn svg {
  width: 18px;
  height: 18px;
}

.time-status {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: #fff;
}

.time-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: time-dot-pulse 2.4s ease-out infinite;
}

@keyframes time-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .time-dot {
    animation: none;
  }
}

.time-zone-label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

.time-zone-label svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.time-clock {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ========================================================================
   Page hero (inner pages)
   ======================================================================== */
/* Same glow recipe as the homepage's shared .intro-bg, reused here so
   every inner-page hero carries the same background treatment instead
   of a flat black fill. */
.page-hero {
  background: var(--color-ink);
  color: #fff;
  padding-block: var(--space-6) var(--space-5);
  position: relative;
  overflow: hidden;
}

.page-hero .hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 30% at 82% 5%, rgba(226, 96, 31, 0.55), transparent 60%),
    radial-gradient(35% 22% at 8% 96%, rgba(222, 144, 102, 0.28), transparent 65%);
  pointer-events: none;
}

.page-hero .container {
  position: relative;
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  margin-top: var(--space-2);
  max-width: 20ch;
}

.page-hero .eyebrow {
  color: var(--color-terracotta);
}

.page-hero p {
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1rem;
  max-width: 60ch;
}

/* ========================================================================
   Team
   ======================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.team-card {
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.team-card h3 {
  font-size: 1.2rem;
}

.team-card .role {
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 0.2rem;
}

.team-card p.bio {
  margin-top: var(--space-2);
  color: var(--color-slate);
  font-size: 0.96rem;
}

/* ========================================================================
   Values
   ======================================================================== */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.value-card {
  padding: var(--space-3);
  border-left: 3px solid var(--color-primary);
  background: var(--color-paper-raised);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.value-card h3 {
  font-size: 1rem;
}

.value-card p {
  margin-top: 0.4rem;
  color: var(--color-slate);
  font-size: 0.93rem;
}

/* ========================================================================
   Contact
   ======================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-direct {
  padding: var(--space-4);
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-md);
}

.contact-direct .eyebrow {
  color: var(--color-terracotta);
}

.contact-direct .email-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  border-bottom: 2px solid var(--color-primary);
}

.contact-direct ul {
  margin-top: var(--space-4);
  display: grid;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.94rem;
}

.form-field {
  display: grid;
  gap: 0.4rem;
  margin-bottom: var(--space-3);
}

.form-field label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
}

.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8em 1em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-line);
  background: var(--color-paper-raised);
  color: var(--color-ink);
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-primary);
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.form-note {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-slate);
}

/* Spam trap. Off-screen rather than display:none or visibility:hidden,
   both of which the better bots check for before deciding whether to fill
   a field. aria-hidden and tabindex="-1" on the markup keep it away from
   screen readers and the tab order. */
.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Where the submission reports itself, in place, without the visitor
   losing the page. Pending is a plain line; the two outcomes that need
   reading get a washed panel, because a status the sender scrolls past is
   the same as no status at all. */
.form-status {
  font-size: 0.9rem;
  line-height: 1.55;
}

.form-status.is-pending {
  margin-top: var(--space-2);
  color: var(--color-slate);
}

.form-status.is-success,
.form-status.is-error {
  margin-top: var(--space-2);
  padding: 0.8em 1em;
  border-radius: var(--radius-sm);
  border-left: 3px solid;
  font-weight: 500;
}

.form-status.is-success {
  background: var(--color-primary-tint);
  border-left-color: var(--color-primary);
  color: var(--color-ink);
}

.form-status.is-error {
  background: var(--color-error-wash);
  border-left-color: var(--color-error);
  color: var(--color-error);
}

/* The page api/enquiry.js renders for a submission made with JavaScript
   off that did not succeed — a validation message, a failed send, or a
   dry run. It has no header or footer of its own, so it carries its own
   vertical rhythm. */
.form-outcome {
  padding-block: var(--space-6);
}

.form-outcome .eyebrow {
  color: var(--color-primary-dark);
}

.form-outcome h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: var(--space-2);
}

.form-outcome p {
  margin-top: var(--space-3);
  color: var(--color-ink-soft);
  font-size: 1.05rem;
  max-width: 60ch;
}

/* :not(.btn) because the button below is an anchor too, and this rule is
   specific enough to beat .btn-primary's own colour — which would put
   orange text on the ink pill. */
.form-outcome a:not(.btn) {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* Also carries the pair of onward links on thanks.html, hence the wrap.
   Deliberately sets no colour: the buttons here are .btn-primary on the
   outcome page and .btn-ghost-dark on thanks.html, and those two want
   opposite ink. */
.form-outcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.contact-clients {
  background: #f0efed;
  padding-block: var(--space-7);
}

.contact-clients h2 {
  text-align: center;
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.contact-logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-4);
  margin-top: var(--space-5);
}

.contact-logo {
  flex: 0 0 50%;
  height: 72px;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-logo img {
  width: auto;
  height: auto;
  max-width: min(150px, 100%);
  max-height: 46px;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
}

@media (min-width: 560px) {
  .contact-logo {
    flex-basis: 33.333%;
  }
}

@media (min-width: 900px) {
  .contact-logo {
    flex-basis: 20%;
    height: 84px;
    padding-inline: var(--space-3);
  }
}

/* ========================================================================
   Misc page prose
   ======================================================================== */
.prose {
  max-width: 72ch;
}

.prose p + p,
.prose ul {
  margin-top: var(--space-3);
}

.prose p {
  color: var(--color-ink-soft);
  font-size: 1.05rem;
}

.prose h2 {
  margin-top: var(--space-2);
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.prose h2 + p {
  margin-top: var(--space-3);
}

.founder-principles-section {
  background: var(--color-primary-tint);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ========================================================================
   Manifesto (About)
   ======================================================================== */
.manifesto {
  display: grid;
  gap: var(--space-3);
  max-width: 62ch;
}

.manifesto-line {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-primary-tint);
  transition: border-color 0.25s var(--ease);
}

.manifesto-line:hover {
  border-color: var(--color-primary);
}

.manifesto-note {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-slate);
}

.manifesto-note strong {
  color: var(--color-ink);
}

/* ========================================================================
   Pull quote (For Founders)
   ======================================================================== */
.pull-quote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-4);
  margin: 0;
}

.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-ink);
}

.pull-quote cite {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: 0.95rem;
  color: var(--color-slate);
}

.avatar-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-3);
  border: 3px solid var(--color-paper-raised);
  box-shadow: 0 0 0 1px var(--color-line);
}