/* ─── TOKENS (mirrors index / work exactly) ──────────────
   Same palette as the home and work pages. Accent cobalt
   stays IDENTICAL across light and dark modes; only the
   surface and text shift so the mode switch feels like a
   room's lights dimming, not a palette change.

   Strictly true-blue family — no cyans, magentas, or pinks.
   ──────────────────────────────────────────────────────── */
:root {
  /* ── LIGHT MODE ── */

  /* Ink & surface */
  --ink:           #0A1628;
  --ink-dim:       #5B6A82;
  --surface:       #FFFFFF;
  --panel:         #F2F6FB;

  /* Blue ladder (dark → electric) */
  --dark:          #0D1B2E;
  --navy:          #1A3A5C;
  --blue:          #2563AE;
  --sky:           #5BA8D9;

  /* Accent — the glow. Grounded cobalt. IDENTICAL in dark mode. */
  --accent:        #2563EB;
  --accent-dark:   #1D4ED8;
  --accent-glow:   rgba(37, 99, 235, .28);
  --accent-glow-2: rgba(37, 99, 235, .12);
  --accent-halo:   rgba(37, 99, 235, .40);

  /* Subtle accent tint — used for step-icon hover, step-output
     badge background, project-tag hover, etc. */
  --accent-tint:   rgba(37, 99, 235, .07);
  --accent-border: rgba(37, 99, 235, .20);

  /* Text colour that sits on top of the accent — white for contrast. */
  --on-accent:     #FFFFFF;

  /* Neutrals */
  --border-l:      #E2E8F0;

  /* Nav */
  --nav-bg:        rgba(255, 255, 255, .94);
  --nav-cta-bg:    #E8EEF5;
  --nav-cta-bg-h:  #D5DFEC;
  --nav-cta-text:  #0A1628;

  /* Special card surface (the "accent" pcard) — barely-off-from-
     surface tone with a whisper of cobalt, so it stands out from
     its siblings without shouting. */
  --pcard-accent-bg: #FBFDFF;

  /* Hero glow tokens — mirror the contact page palette, used to
     paint the same atmospheric navy + cobalt look on the contact
     form below. */
  --hero-glow-1:   rgba(37, 99, 174, .25);
  --hero-glow-2:   rgba(26, 58, 92, .40);

  /* Scrollbar thumb for the .process-left panel — mode-flipped
     so the thin track remains faintly visible in both modes. */
  --scrollbar-thumb: rgba(0, 0, 0, .12);

  /* Shape */
  --radius:        12px;
  --radius-lg:     18px;
  --nav-h:         56px;

  /* Motion */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-gentle:   cubic-bezier(.25, .46, .45, .94);
}

/* ─── DARK MODE ───────────────────────────────────────────
   Same hue family, lights dimmed. Accent unchanged.
   ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --ink:           #E6EDF7;
  --ink-dim:       #8DA0BD;
  --surface:       #0A1321;
  --panel:         #111E37;

  --dark:          #050B17;
  --navy:          #1E3A6B;
  --blue:          #3B82F6;
  --sky:           #60A5FA;

  --accent:        #2563EB;
  --accent-dark:   #1D4ED8;
  --accent-glow:   rgba(37, 99, 235, .30);
  --accent-glow-2: rgba(37, 99, 235, .14);
  --accent-halo:   rgba(37, 99, 235, .45);
  --accent-tint:   rgba(37, 99, 235, .10);
  --accent-border: rgba(37, 99, 235, .28);

  --border-l:      #1B2742;

  --nav-bg:        rgba(10, 19, 33, .85);
  --nav-cta-bg:    #172340;
  --nav-cta-bg-h:  #223152;
  --nav-cta-text:  #E6EDF7;

  --pcard-accent-bg: #0F1A30;

  --scrollbar-thumb: rgba(255, 255, 255, .15);

  /* Hero glow tokens — mirror the contact page palette in dark
     mode (slightly brighter to read against the deeper base). */
  --hero-glow-1:   rgba(37, 99, 235, .30);
  --hero-glow-2:   rgba(59, 130, 246, .22);
}

/* ─── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans', sans-serif;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s ease, color .4s ease;
}
a { text-decoration: none; color: inherit; }
img, video { display: block; width: 100%; }
ul { list-style: none; }

/* ─── NAV ────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-l);
  transition: box-shadow .3s var(--ease-out-expo),
              background-color .4s ease,
              border-color .4s ease;
}
nav.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.07);
}

.nav-left { display: flex; align-items: center; gap: 20px; }
.nav-logo {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.3px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity .2s, color .4s ease;
}
.nav-logo:hover { opacity: .85; }

/* ─── LOGO MARK (rhombus with 90° angles) ───────────────
   Outer diamond stroke inherits the text colour via
   currentColor (auto-themes dark-on-light / light-on-dark).
   Inner diamond stays in the accent colour across modes —
   the "gem" inside the frame.
   ──────────────────────────────────────────────────────── */
.nav-logo-mark {
  flex-shrink: 0;
  overflow: visible;
}
.nav-logo-mark .logo-outer {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  fill: none;
  transition: stroke .4s ease;
}
.nav-logo-mark .logo-inner {
  fill: var(--accent);
  transform-origin: center;
  transform-box: fill-box;
  transition: fill .4s ease, transform .3s var(--ease-spring);
}
.nav-logo:hover .logo-inner { transform: scale(1.25); }

.nav-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-dim);
  transition: color .4s ease;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22C55E;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 14px;
  color: var(--ink-dim);
  transition: color .2s;
}

/* Accent underline — plain links only, NOT .nav-cta */
.nav-links a:not(.nav-cta) {
  position: relative;
  padding-bottom: 2px;
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: var(--accent-dark);
  border-radius: 2px;
  transition: width .25s var(--ease-out-expo), background-color .4s ease;
}
.nav-links a:not(.nav-cta):hover        { color: var(--ink); }
.nav-links a:not(.nav-cta):hover::after { width: 100%; }

.nav-active {
  font-weight: 600;
  color: var(--ink) !important;
}
.nav-active:not(.nav-cta)::after { width: 100% !important; }

/* Contact CTA — neutral tile, tinted to the palette in both modes */
.nav-cta {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  background: var(--nav-cta-bg);
  color: var(--nav-cta-text) !important;
  border-radius: 8px;
  transition: background .2s, transform .15s, color .4s ease;
}
.nav-cta:hover { background: var(--nav-cta-bg-h); transform: translateY(-1px); }

/* ─── THEME TOGGLE (desktop button in nav) ──────────────
   Circular icon button. Subtle hover lift, icon rotates
   slightly for a tactile feel.
   ──────────────────────────────────────────────────────── */
.theme-toggle {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-l);
  border-radius: 50%;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
  transition:
    color        .25s ease,
    border-color .25s ease,
    background   .25s ease,
    transform    .3s var(--ease-spring);
}
.theme-toggle:hover {
  color: var(--accent-dark);
  border-color: var(--accent);
  background: var(--accent-glow-2);
  transform: rotate(-12deg);
}
[data-theme="dark"] .theme-toggle:hover {
  color: var(--accent);
  transform: rotate(12deg);
}
.tt-icon { display: none; }
[data-theme="light"] .tt-moon,
:root:not([data-theme="dark"]) .tt-moon { display: block; }
[data-theme="dark"]  .tt-sun  { display: block; }

/* ─── HAMBURGER ──────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s var(--ease-out-expo), opacity .2s, background-color .4s ease;
}

/* Hamburger → X when open */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border-l);
  padding: 20px 32px 24px;
  z-index: 99;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-6px);
  opacity: 0;
  transition: transform .25s var(--ease-out-expo),
              opacity .2s,
              background-color .4s ease,
              border-color .4s ease;
}
.mobile-menu.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}
.mobile-menu a {
  font-size: 16px;
  color: var(--ink-dim);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-l);
  transition: color .2s, border-color .4s ease;
}
.mobile-menu a:hover { color: var(--ink); }
/* :last-of-type so the Contact anchor has no border even
   though the toggle button now follows it. */
.mobile-menu a:last-of-type { border-bottom: none; }

/* Mobile theme-toggle row inside the mobile menu */
.mobile-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0 2px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-l);
  margin-top: 6px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .2s, border-color .4s ease;
}
.mobile-theme-toggle:hover { color: var(--accent-dark); }
[data-theme="dark"] .mobile-theme-toggle:hover { color: var(--accent); }
.mtt-label-light,
.mtt-label-dark { display: none; }
[data-theme="light"] .mtt-label-light,
:root:not([data-theme="dark"]) .mtt-label-light { display: inline; }
[data-theme="dark"]  .mtt-label-dark  { display: inline; }
.mtt-icon-wrap {
  width: 30px; height: 30px;
  border: 1px solid var(--border-l);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: border-color .2s;
}
.mobile-theme-toggle:hover .mtt-icon-wrap { border-color: var(--accent); }

/* ─── PAGE LAYOUT ────────────────────────────────────── */
.process-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--nav-h));
  padding-top: var(--nav-h);
}

/* ─────────────────────────────────────────────────────────
   LEFT PANEL
   ───────────────────────────────────────────────────────── */
.process-left {
  background: var(--surface);
  border-right: 1px solid var(--border-l);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  transition: background-color .4s ease, border-color .4s ease;
}
.process-left::-webkit-scrollbar { width: 3px; }
.process-left::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 2px;
}

/* ── Toggle ──────────────────────────────────────────── */
.process-toggle-wrap {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 14px 44px 12px;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-l);
  transition: background-color .4s ease, border-color .4s ease;
}
.process-toggle {
  display: flex;
  gap: 0;
  background: var(--panel);
  border: 1px solid var(--border-l);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
  transition: background-color .4s ease, border-color .4s ease;
}
.ptoggle-btn {
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background .25s var(--ease-gentle), color .25s, box-shadow .25s;
  letter-spacing: .1px;
}
.ptoggle-btn:hover { color: var(--ink); }
.ptoggle-btn--active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 6px rgba(0,0,0,.1);
}

/* ── Steps track ───────────────────────────────────────
   On desktop, the track flex-grows inside the left column so
   the bottom of the last step aligns with the bottom of the
   right-side image grid. Steps are distributed top-to-bottom
   via justify-content: space-between, with no per-step bottom
   padding (flex handles the gaps). The base padding-bottom is
   restored at the ≤960px stacked breakpoint below. */
.steps-track {
  position: relative;
  padding: 28px 44px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 0;
  z-index: 1;
}
.steps-track--hidden { display: none; }

/* Vertical connector — fades in at both ends, with an accent
   glow at the midpoint. All segments are cobalt-based. */
.step-connector {
  position: absolute;
  left: calc(44px + 20px);
  top: 28px;
  bottom: 32px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(37, 99, 235, 0)    0%,
    rgba(37, 99, 235, .35) 15%,
    var(--accent)          50%,
    rgba(37, 99, 235, .35) 85%,
    rgba(37, 99, 235, 0)  100%
  );
  border-radius: 2px;
}

/* ── Individual step ─────────────────────────────────── */
.step {
  display: flex;
  gap: 0;
  position: relative;
  padding-bottom: 0;
  cursor: default;
}
.step:last-child { padding-bottom: 0; }

/* Step number + dot */
.step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 42px;
  flex-shrink: 0;
  padding-top: 2px;
}
.step-num {
  font-family: 'Noto Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 6px;
  transition: color .4s ease;
}
.step-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--blue);
  transition: border-color .25s, background .25s, transform .25s var(--ease-spring);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.step:hover .step-dot,
.step.is-linked .step-dot {
  border-color: var(--accent);
  background: var(--accent);
  transform: scale(1.3);
}

/* Step body: icon + content */
.step-body {
  flex: 1;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-left: 20px;
}

/* Icon box */
.step-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border-l);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  flex-shrink: 0;
  transition:
    background .25s var(--ease-gentle),
    border-color .25s,
    color .25s,
    transform .25s var(--ease-spring);
}
.step:hover .step-icon,
.step.is-linked .step-icon {
  background: var(--accent-tint);
  border-color: var(--accent-glow);
  color: var(--blue);
  transform: scale(1.06);
}

/* Content */
.step-content { flex: 1; }

.step-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.step-title {
  font-family: 'Noto Sans', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.3px;
  line-height: 1;
  transition: color .2s;
}
.step:hover .step-title,
.step.is-linked .step-title { color: var(--navy); }

/* Output badge — subtle cobalt-tinted pill */
.step-output {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  border-radius: 20px;
  padding: 3px 10px;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .4s ease, background-color .4s ease, border-color .4s ease;
}

.step-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
  transition: color .25s;
}
.step:hover .step-desc,
.step.is-linked .step-desc { color: var(--ink); }

/* ─── RIGHT PANEL ────────────────────────────────────── */
.process-right {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  background: var(--panel);
  border-left: 1px solid var(--border-l);
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: background-color .4s ease, border-color .4s ease;
}

.process-right-inner {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  height: 100%;
}

.process-right-content { display: flex; flex-direction: column; gap: 0; }

.process-eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--blue);
  margin-bottom: 12px;
  transition: color .4s ease;
}

/* Heading sized to fit on one line at typical desktop widths.
   Drops to a smaller size on narrow viewports and is allowed to
   wrap naturally below the layout's stacked breakpoint. The
   `text-wrap: balance` keeps any wrap evenly distributed. */
.process-heading {
  font-family: 'Noto Sans', sans-serif;
  font-size: clamp(22px, 1.8vw, 32px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.6px;
  line-height: 1.18;
  margin-bottom: 14px;
  text-wrap: balance;
  transition: color .4s ease;
}

/* Body — no max-width so it can spread horizontally instead of
   wrapping into a tall column. Will fit on one line on very wide
   screens and wrap to ~2 lines on standard desktops. */
.process-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
  margin-bottom: 0;
  transition: color .4s ease;
}
.process-body:last-of-type { margin-bottom: 0; }

/* CTA sits below the image grid. Slightly smaller font cap than
   before so it stays proportionate to the new heading size. */
.process-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'Noto Sans', sans-serif;
  font-size: clamp(15px, 1.1vw, 20px);
  font-weight: 600;
  border-radius: 10px;
  transition: background .2s, transform .2s var(--ease-spring), box-shadow .2s;
  align-self: flex-start;
  flex-shrink: 0;
}
.process-cta:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-halo);
}
.process-cta:active { transform: translateY(0); }

/* ─── CARDS GRID ─────────────────────────────────────── */
.process-cards-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: stretch;
}

/* Individual card */
.pcard {
  background: var(--surface);
  border: 1px solid var(--border-l);
  border-radius: var(--radius);
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition:
    box-shadow .3s var(--ease-gentle),
    transform  .3s var(--ease-gentle),
    border-color .25s,
    background-color .4s ease;
}
.pcard:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
  transform: translateY(-3px);
  border-color: transparent;
}
.pcard:active { transform: translateY(-1px); }

/* Accent card (Calendly) — barely-off-from-surface background
   with a visible cobalt rim. Same idea as before, just cobalt
   instead of lime. */
.pcard--accent {
  background: var(--pcard-accent-bg);
  border-color: var(--accent-halo);
}
.pcard--accent:hover {
  border-color: transparent;
  box-shadow: 0 8px 28px var(--accent-glow);
}
/* In dark mode, hovered cards need a subtly brighter shadow
   so they still feel "lifted" against the dark surface. */
[data-theme="dark"] .pcard:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .pcard--accent:hover {
  box-shadow: 0 8px 28px var(--accent-glow);
}

/* Card icon */
.pcard-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 2px;
  transition: transform .25s var(--ease-spring),
              background-color .4s ease,
              border-color .4s ease,
              color .4s ease;
}
.pcard:hover .pcard-icon { transform: scale(1.08); }

/* Research card — primary blue */
.pcard-icon--research {
  background: rgba(37, 99, 235, .08);
  color: var(--blue);
  border: 1px solid rgba(37, 99, 235, .15);
}

/* AI card — sky blue (deliberately in the blue family, not the
   old purple, to keep the palette strictly cobalt-adjacent). */
.pcard-icon--ai {
  background: rgba(91, 168, 217, .12);
  color: var(--sky);
  border: 1px solid rgba(91, 168, 217, .25);
}
[data-theme="dark"] .pcard-icon--ai {
  background: rgba(96, 165, 250, .14);
  border-color: rgba(96, 165, 250, .28);
}

/* (Unused in current HTML but retained for future cards.) */
.pcard-icon--design {
  background: rgba(91, 168, 217, .10);
  color: var(--sky);
  border: 1px solid rgba(91, 168, 217, .20);
}

/* Calendly card — cobalt accent (replaces the old lime). */
.pcard-icon--calendly {
  background: var(--accent-glow-2);
  color: var(--accent);
  border: 1px solid var(--accent-glow);
}

/* Label */
.pcard-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink-dim);
  transition: color .4s ease;
}

/* Card title */
.pcard-title {
  font-family: 'Noto Sans', sans-serif;
  font-size: 1.25em;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.2px;
  line-height: 1.2;
  margin-top: -4px;
  transition: color .4s ease;
}

/* Card description */
.pcard-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-dim);
  flex: 1;
  transition: color .4s ease;
}

/* Card button */
.pcard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 1.25em;
  font-weight: 600;
  border-radius: 8px;
  text-align: center;
  white-space: nowrap;
  transition: background .2s, transform .15s var(--ease-spring);
  margin-top: 4px;
}

.pcard-btn--blue {
  background: var(--blue);
  color: #fff;
}
.pcard:hover .pcard-btn--blue { background: var(--navy); }

/* .pcard-btn--lime kept as a class name for HTML stability, but
   now styled in the cobalt accent instead of the old lime. */
.pcard-btn--lime {
  background: var(--accent);
  color: var(--on-accent);
}
.pcard:hover .pcard-btn--lime { background: var(--accent-dark); }

/* ─── RIGHT-PANEL IMAGE PLACEHOLDERS ──────────────────────
   Two grids — one per toggle mode — share the same slot in
   the right panel. Whichever is visible takes the same role
   the original .process-cards-grid used to: a 3-column grid
   that fills the remaining vertical space below the heading
   block.
   ───────────────────────────────────────────────────────── */
.pimg-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  align-items: stretch;
}
.pimg-grid--hidden { display: none; }

/* Single placeholder = frame + caption stacked. */
.pimg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

/* The frame holds either the empty state OR the real image.
   Image is positioned absolutely on top so when it loads it
   covers the empty state automatically. */
.pimg-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border-l);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    border-color .25s,
    box-shadow .3s var(--ease-gentle),
    transform .3s var(--ease-gentle),
    background-color .4s ease;
}
.pimg:hover .pimg-frame,
.pimg.is-linked .pimg-frame {
  border-color: transparent;
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
  transform: translateY(-3px);
}
[data-theme="dark"] .pimg:hover .pimg-frame,
[data-theme="dark"] .pimg.is-linked .pimg-frame {
  border-color: var(--accent-glow);
  box-shadow:
    0 8px 32px rgba(37, 99, 235, .35),
    0 0 0 1px var(--accent-glow);
}

/* Step containers also lift very subtly when their image is
   hovered — gives the connection a directional feel without
   being noisy. */
.step.is-linked,
.step:hover {
  cursor: default;
}
.step.is-linked .step-icon,
.step:hover .step-icon { box-shadow: 0 4px 14px var(--accent-halo); }

/* The actual image inside each placeholder frame.
   By default it sits in greyscale, scaled to 1.0. When the
   user hovers either the image itself OR the matching step
   on the left (which adds .is-linked via the cross-link JS),
   it returns to full colour and scales up by 5%. The frame
   has overflow: hidden, so the scale stays cleanly clipped.
   ──────────────────────────────────────────────────────── */
.pimg-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transform: scale(1);
  transform-origin: center;
  transition:
    filter .35s var(--ease-gentle),
    transform .35s var(--ease-gentle);
}
.pimg:hover .pimg-frame img,
.pimg.is-linked .pimg-frame img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Empty state — describes the kind of image that should go
   here. Visible until a real image is supplied via src=.
   Tuned for the 3×2 grid: compact icon, tight spacing. */
.pimg-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  text-align: center;
  background:
    linear-gradient(135deg, var(--panel) 0%, var(--surface) 100%);
  color: var(--ink-dim);
  pointer-events: none;
  transition: background .4s ease, color .4s ease;
}
.pimg-empty-icon {
  color: var(--blue);
  opacity: .55;
  flex-shrink: 0;
  transition: opacity .25s, transform .25s var(--ease-spring), color .4s ease;
}
.pimg:hover .pimg-empty-icon,
.pimg.is-linked .pimg-empty-icon {
  opacity: .85;
  transform: scale(1.08);
}
.pimg-empty-title {
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -.05px;
  transition: color .4s ease;
}
.pimg-empty-hint {
  font-family: 'Noto Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-dim);
  max-width: 180px;
  margin-top: 2px;
  transition: color .4s ease;
}

/* Caption beneath each frame — tight, single line. Number pill
   keeps the cobalt accent. */
.pimg-caption {
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.05px;
  line-height: 1.3;
  padding: 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .4s ease;
}
.pimg-caption-num {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--blue);
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  border-radius: 20px;
  padding: 2px 7px;
  flex-shrink: 0;
  transition: color .4s ease, background-color .4s ease, border-color .4s ease;
}

/* ─── CONTACT FORM (sits in slot 6 of the image grid) ──────
   Visually mirrors a .pimg cell: the .pcontact-frame plays the
   role of .pimg-frame, with its caption underneath in the same
   spot. The frame inverts vs. the right-panel background to
   stand out as the page's primary CTA.

     LIGHT mode  → blue frame on light panel
     DARK  mode  → white frame on dark panel

   ─────────────────────────────────────────────────────────── */
.pcontact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

/* ── LIGHT-MODE  ·  navy + cobalt-glow form (matches contact page) ── */
.pcontact-frame {
  flex: 1;
  min-height: 0;
  position: relative;
  background:
    radial-gradient(ellipse 90% 70% at 25% 20%, var(--hero-glow-1) 0%, transparent 70%),
    radial-gradient(ellipse 80% 70% at 80% 95%, var(--hero-glow-2) 0%, transparent 75%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)),
    var(--dark);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(13, 27, 46, .25);
  transition:
    border-color .25s,
    box-shadow .3s var(--ease-gentle),
    transform .25s var(--ease-gentle);
}
.pcontact-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 110%, var(--accent-glow-2), transparent 45%);
}
.pcontact:hover .pcontact-frame {
  border-color: var(--accent-glow);
  box-shadow:
    0 10px 30px rgba(13, 27, 46, .35),
    0 0 0 1px var(--accent-glow);
  transform: translateY(-2px);
}
.pcontact:focus-within .pcontact-frame {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px var(--accent-halo),
    0 10px 30px rgba(13, 27, 46, .35);
}

.pcontact-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -.05px;
  margin-bottom: 2px;
  position: relative;
  z-index: 1;
  transition: color .4s ease;
}
.pcontact-head-icon {
  color: rgba(255, 255, 255, .9);
  flex-shrink: 0;
  transition: color .4s ease;
}

.pcontact-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
}
.pcontact-field--message { flex: 1; min-height: 0; }

/* Visually-hidden labels for screen readers; placeholders
   carry the visible label. */
.pcontact-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pcontact-field input,
.pcontact-field textarea {
  width: 100%;
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 8px;
  padding: 7px 10px;
  outline: none;
  transition: border-color .2s, background-color .25s, color .4s ease, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.pcontact-field textarea {
  resize: none;
  min-height: 38px;
  flex: 1;
  font-family: inherit;
  line-height: 1.4;
}
.pcontact-field input::placeholder,
.pcontact-field textarea::placeholder {
  color: rgba(255, 255, 255, .7);
  opacity: 1;
}
.pcontact-field input:hover,
.pcontact-field textarea:hover {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .18);
}
.pcontact-field input:focus,
.pcontact-field textarea:focus {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

/* Send button — white on the dark form for clear contrast. */
.pcontact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: background .2s, color .2s, transform .15s var(--ease-spring), box-shadow .2s;
  margin-top: 2px;
}
.pcontact-btn:hover {
  background: #F2F6FB;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.pcontact-btn:active { transform: translateY(0); }
.pcontact-btn svg { stroke: currentColor; }


/* ── DARK-MODE  ·  same navy + cobalt-glow look (matches contact page) ──
   The form in dark mode keeps the contact-page treatment but with
   slightly brighter glows so it reads against the dark right panel. */
[data-theme="dark"] .pcontact-frame {
  background:
    radial-gradient(ellipse 90% 70% at 25% 20%, var(--hero-glow-1) 0%, transparent 70%),
    radial-gradient(ellipse 80% 70% at 80% 95%, var(--hero-glow-2) 0%, transparent 75%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)),
    var(--dark);
  border-color: var(--navy);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .04);
}
[data-theme="dark"] .pcontact-frame::after {
  background: radial-gradient(circle at 50% 110%, var(--accent-glow), transparent 45%);
}
[data-theme="dark"] .pcontact:hover .pcontact-frame {
  border-color: var(--accent);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, .6),
    0 0 0 1px var(--accent-glow),
    0 0 24px var(--accent-halo);
}
[data-theme="dark"] .pcontact:focus-within .pcontact-frame {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px var(--accent-halo),
    0 12px 36px rgba(0, 0, 0, .6);
}

/* Form internals stay the same as light mode (white text on navy)
   because the navy frame is the same in both modes. The lines below
   override the previous v7 dark-mode form rules that targeted a
   white background. */
[data-theme="dark"] .pcontact-head      { color: #FFFFFF; }
[data-theme="dark"] .pcontact-head-icon { color: rgba(255, 255, 255, .9); }

[data-theme="dark"] .pcontact-field input,
[data-theme="dark"] .pcontact-field textarea {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  font-weight: 500;
}
[data-theme="dark"] .pcontact-field input::placeholder,
[data-theme="dark"] .pcontact-field textarea::placeholder {
  color: rgba(255, 255, 255, .65);
}
[data-theme="dark"] .pcontact-field input:hover,
[data-theme="dark"] .pcontact-field textarea:hover {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .16);
}
[data-theme="dark"] .pcontact-field input:focus,
[data-theme="dark"] .pcontact-field textarea:focus {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, .20);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

/* Send button stays white-with-cobalt-text in both modes — the
   navy form is dark in both, so a white button is the correct
   high-contrast inverse in both. */
[data-theme="dark"] .pcontact-btn {
  background: #FFFFFF;
  color: var(--accent);
}
[data-theme="dark"] .pcontact-btn:hover {
  background: #F2F6FB;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

/* ─── FOOTER ─────────────────────────────────────────── */
.process-footer {
  padding: 32px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--border-l);
  transition: border-color .4s ease;
}
.footer-copy { font-size: 12px; color: var(--ink-dim); transition: color .4s ease; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { font-size: 12px; color: var(--ink-dim); transition: color .2s; }
.footer-links a:hover { color: var(--ink); }

/* ═══════════════════════════════════════════════════════
   MOBILE-ONLY CONTACT + NAVIGATION SECTION
   ═══════════════════════════════════════════════════════
   .process-mobile-cta is HIDDEN at desktop (the right panel
   shows the heading, image grid, and inline form there).
   At @media (max-width: 960px) it becomes visible and the
   right panel hides — the new section takes over: a fuller
   contact form, then two side-by-side CTAs to Work / About.

   All section-specific class names are prefixed `.pmcta-`
   to avoid collisions with the existing `.pcontact-`, `.pcard-`,
   and `.pimg-` rules elsewhere in this file.
   ═══════════════════════════════════════════════════════ */
.process-mobile-cta { display: none; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   960 → 768 → 480
   ═══════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .process-layout { grid-template-columns: 1fr; }

  /* ─── Hide the right panel below 960px ──────────────────────
     The right panel houses image grids and a small inline form.
     Below 960px we hide it and replace it with a purpose-built
     mobile section (.process-mobile-cta) that has a fuller
     contact form + Work/About CTAs.
     ─────────────────────────────────────────────────────────── */
  .process-right { display: none; }

  /* Restore natural step spacing when stacked — the desktop
     flex-grow / space-between distribution is no longer needed
     because the left column has its own height now. */
  .process-left { min-height: 0; }
  .steps-track {
    flex: none;
    justify-content: flex-start;
  }
  .step { padding-bottom: 22px; }
  .step:last-child { padding-bottom: 0; }

  .process-cards-grid {
    flex: none;
    grid-template-columns: repeat(3, 1fr);
    min-height: 0;
  }

  .process-footer { padding: 24px 36px; }

  /* ═══════════════════════════════════════════════════════
     SHOW + STYLE THE MOBILE-ONLY SECTION
     ═══════════════════════════════════════════════════════
     The section has two children:
       1. .pmcta-form  — full-width contact form
       2. .pmcta-nav   — two side-by-side CTAs (Work / About)
     Order: 2 keeps it BELOW .process-left (which has order: -1
     elsewhere in this file). Visitors finish reading the steps,
     then encounter the form, then the two CTAs.
     ═══════════════════════════════════════════════════════ */
  .process-mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    order: 2;
    padding: 40px 36px;
    background: var(--panel);
    border-top: 1px solid var(--border-l);
    transition: background-color .4s ease, border-color .4s ease;
  }

  /* ─── Contact form ────────────────────────────────────── */
  .pmcta-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border-l);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 28px rgba(13, 27, 46, .08);
    transition:
      background-color .4s ease,
      border-color .4s ease,
      box-shadow .4s ease;
  }
  [data-theme="dark"] .pmcta-form {
    box-shadow: 0 6px 28px rgba(0, 0, 0, .35);
  }

  .pmcta-form-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 2px;
  }
  .pmcta-form-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--ink);
    line-height: 1.2;
    transition: color .4s ease;
  }
  .pmcta-form-title svg {
    color: var(--accent);
    flex-shrink: 0;
  }
  .pmcta-form-sub {
    font-size: 14px;
    color: var(--ink-dim);
    line-height: 1.5;
    transition: color .4s ease;
  }

  /* Two-column row for Name + Email at this breakpoint —
     collapses to single column at 540px (rule below). */
  .pmcta-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .pmcta-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .pmcta-label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--ink-dim);
    text-transform: uppercase;
    transition: color .4s ease;
  }
  .pmcta-field input,
  .pmcta-field textarea {
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--border-l);
    border-radius: var(--radius);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition:
      border-color .2s ease,
      background .2s ease,
      box-shadow .2s ease,
      color .4s ease;
  }
  .pmcta-field input::placeholder,
  .pmcta-field textarea::placeholder {
    color: var(--ink-dim);
    opacity: .85;
  }
  .pmcta-field input:focus,
  .pmcta-field textarea:focus {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  .pmcta-field textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.55;
  }

  .pmcta-form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 2px;
    padding: 13px 18px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--on-accent, #fff);
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: 0 8px 18px var(--accent-glow);
    transition:
      background .2s ease,
      transform .2s var(--ease-spring),
      box-shadow .2s ease;
  }
  .pmcta-form-btn:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px var(--accent-halo);
  }
  .pmcta-form-btn:active {
    transform: translateY(0);
  }

  /* ─── Two-CTA navigation (Work | About) ─────────────────────
     Page-closing CTAs that sit BELOW the contact form. Each
     CTA takes ~half the row width.

     Layout: contents are centered as a group (chevron + label
     sit close together near the middle of each button). This
     mirrors how btn-primary works on the home page — small
     chevron next to label, both centered within the button.
     The directional cue comes from WHICH SIDE of the label
     the chevron sits on, plus the hover-nudge animation.
     ─────────────────────────────────────────────────────────── */
  .pmcta-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .pmcta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1.5px solid var(--border-l);
    border-radius: var(--radius-lg);
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(13, 27, 46, .04);
    transition:
      background .25s ease,
      border-color .25s ease,
      color .25s ease,
      box-shadow .25s ease,
      transform .2s var(--ease-spring);
  }
  [data-theme="dark"] .pmcta-link {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  }
  .pmcta-link:hover,
  .pmcta-link:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent, #fff);
    box-shadow: 0 12px 28px var(--accent-halo);
    transform: translateY(-2px);
    outline: none;
  }

  /* ─── Chevron icon ─────────────────────────────────────────
     Same horizontal chevron used in the home-page carousel
     (M11 4L6 9L11 14 / M7 4L12 9L7 14) — a clean stroke-only
     `<` or `>` with rounded line caps and joins. Inherits the
     link's text colour via currentColor:
       at rest    → accent blue (set below)
       on hover   → white (inherited from .pmcta-link's hover)
     ─────────────────────────────────────────────────────────── */
  .pmcta-link-arrow {
    flex-shrink: 0;
    color: var(--accent);
    transition:
      color     .25s ease,
      transform .25s var(--ease-out-expo);
  }
  .pmcta-link:hover .pmcta-link-arrow,
  .pmcta-link:focus-visible .pmcta-link-arrow {
    color: var(--on-accent, #fff);
  }
  /* Directional nudge on hover: the chevron shifts in the
     direction it's pointing — reinforces the "going there" cue. */
  .pmcta-link--prev:hover .pmcta-link-arrow,
  .pmcta-link--prev:focus-visible .pmcta-link-arrow {
    transform: translateX(-4px);
  }
  .pmcta-link--next:hover .pmcta-link-arrow,
  .pmcta-link--next:focus-visible .pmcta-link-arrow {
    transform: translateX(4px);
  }

  .pmcta-link-label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.2;
    color: inherit;
  }
}

@media (max-width: 820px) {
  .process-cards-grid {display: none;}
}

@media (max-width: 768px) {
  nav { padding: 0 20px; }
  .nav-links, .nav-status, .nav-cta { display: none; }
  /* Desktop theme-toggle lives inside .nav-links so it collapses
     with the rest; the mobile menu hosts its own toggle row. */
  .hamburger { display: flex; }

  .process-toggle-wrap { padding: 16px 24px 12px; }
  .steps-track { padding: 28px 24px 40px; }
  .step-connector { left: calc(24px + 20px); }

  .step:hover .step-icon { transform: none; }

  .process-right-inner { padding: 32px 24px; }

  .process-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .pimg-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .process-footer {
    padding: 20px 24px;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Tighten the mobile section's outer padding to match the
     nav / steps padding at this width so everything aligns. */
  .process-mobile-cta { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .step-body   { gap: 10px; padding-left: 14px; }
  .step-icon   { width: 34px; height: 34px; }
  .step-title  { font-size: 16px; }
  .step-desc   { font-size: 14px; }
  .process-heading { font-size: 24px; }
  .ptoggle-btn { padding: 8px 14px; font-size: 12px; }
  .process-footer { padding: 20px; }

  .process-cards-grid { grid-template-columns: 1fr; }
  .pimg-grid          { grid-template-columns: 1fr; }
  .pimg-empty-hint    { max-width: 260px; }

  .pcard {
    flex-direction: column;
    gap: 8px;
  }
  .pcard-icon   { flex-shrink: 0; }
  .pcard-label  { width: 100%; }
  .pcard-title  { width: 100%; margin-top: 0; }
  .pcard-desc   { width: 100%; }
  .pcard-btn    { width: 100%; }

  /* ─── Mobile section refinements at phone widths ─────────────
     - Name + Email row collapses to a single column so each
       field gets its full width (cramped 2-col looks bad here).
     - CTAs stay side-by-side per the spec, just with tighter
       padding and smaller arrow circles to fit narrow phones.
     ─────────────────────────────────────────────────────────── */
  .process-mobile-cta { padding: 28px 18px; gap: 18px; }
  .pmcta-form { padding: 20px; }
  .pmcta-form-title { font-size: 18px; }
  .pmcta-field-row { grid-template-columns: 1fr; gap: 14px; }

  .pmcta-nav { gap: 10px; }
  .pmcta-link {
    padding: 16px 14px;
    gap: 8px;
    border-radius: var(--radius);
  }
  /* The chevron itself stays at its 22×22 SVG-attribute size —
     it's already small and clean — so we only retune the label
     here so it fits comfortably alongside it on narrow phones. */
  .pmcta-link-label { font-size: 15px; }
}