/* Projects. Every selector sits under .page-projects. The flow comes first, right under a band with its heading;
   then what we've built; then the call to action. */
.page-projects .roadmap-section { padding-top: var(--space-8); }

/* What we've built: our work for clients, then our own products. On wide screens the project is a row, its
   screenshot beside its words, and the products a row of links under it; each stacks on narrow screens. */
.page-projects .built { padding-top: var(--space-8); }
.page-projects .built-title { margin-bottom: var(--space-8); text-align: center; }
.page-projects .built-grid { display: grid; gap: var(--space-6); }
.page-projects .project-card, .page-projects .built-products {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-secondary);
  transition: border-color var(--duration-normal) var(--ease-default);
}
.page-projects .project-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.page-projects .card-image { position: relative; aspect-ratio: 2400 / 1407; overflow: hidden; border-right: 1px solid var(--border-default); background: #181818; }
.page-projects .card-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Solid badge, readable on any image */
.page-projects .status-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
}
.page-projects .status-badge::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--success); vertical-align: 1px; }
.page-projects .status-badge.in-progress::before { background: var(--warning); }
.page-projects .status-badge.archived::before { background: var(--text-tertiary); }
.page-projects .card-content { display: flex; flex: 1; flex-direction: column; padding: var(--space-5) var(--space-6) var(--space-6); }
.page-projects .card-category { margin-bottom: var(--space-2); color: var(--accent-text); font-size: var(--text-xs); font-weight: 600; }
.page-projects .card-title { margin-bottom: var(--space-2); font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
.page-projects .card-description { flex: 1; margin-bottom: var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); }
.page-projects .card-year { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-default); color: var(--text-tertiary); font-size: var(--text-xs); }

/* A card with a product page is one big link: the title's link covers the card (audit M6, like the product cards) */
.page-projects .project-card.linked { position: relative; }
.page-projects .linked .card-title a { color: inherit; }
.page-projects .linked .card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.page-projects .linked .card-title a:focus-visible { outline: none; }
.page-projects .project-card.linked:has(a:focus-visible) { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
.page-projects .card-more { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent-text); font-size: var(--text-sm); font-weight: 600; }
.page-projects .card-more svg { transition: transform var(--duration-normal) var(--ease-default); }
.page-projects .project-card.linked:hover { border-color: var(--accent-primary); }
.page-projects .project-card.linked:hover .card-more svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .page-projects .project-card.linked:hover .card-more svg { transform: none; }
}


/* Our products: the heading and a line, all of them on the right, then logo, name and what it is for each, each a
   link to its page */
.page-projects .built-products {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title all" "lede all" "list list";
  align-items: center;
  padding: var(--space-6);
}
.page-projects .built-products h3 { grid-area: title; font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
.page-projects .built-products > p { grid-area: lede; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--text-sm); }
.page-projects .built-products ul { grid-area: list; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.page-projects .built-products li a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  min-height: 44px;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default);
}
.page-projects .built-products li a:hover { border-color: var(--accent-primary); background: var(--bg-hover); color: var(--text-primary); }
.page-projects .bp-text { display: grid; min-width: 0; }
.page-projects .bp-name { font-size: var(--text-sm); font-weight: 600; }
.page-projects .bp-short { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-snug); }
.page-projects .bp-all { grid-area: all; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--accent-text); font-size: var(--text-sm); font-weight: 600; }

@media (max-width: 960px) {
  .page-projects .project-card { grid-template-columns: minmax(0, 1fr); }
  .page-projects .card-image { border-right: 0; border-bottom: 1px solid var(--border-default); }
  .page-projects .built-products ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .page-projects .built-products { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lede" "list" "all"; }
  .page-projects .built-products ul { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-2); }
}

/* How a project runs: one line winds down from step to step, switching sides at each, with a mark where it passes.
   Each step's box holds what we do and, past the arrow, what you do. A dashed line runs from the last step back up
   to the step that repeats: new needs after launch go round again. On phones the line runs straight down the left.
   The line is the borders of each step's ::before (down its side, then under its box to the middle) and ::after
   (from the middle across to the other side and down into the next step). */
.page-projects .rm-path {
  --w: 3px;
  --r: 28px;
  --side: 40px;
  --out: 10px;
  --gap: 48px;
  --inset: calc(var(--side) + var(--w) + var(--space-8));
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.page-projects .rm-step { position: relative; padding: 0 var(--side) var(--space-10) var(--inset); }
.page-projects .rm-step:nth-child(even) { padding: 0 var(--inset) var(--space-10) var(--side); }
.page-projects .rm-step + .rm-step { margin-top: var(--gap); }
.page-projects .rm-step::before, .page-projects .rm-step::after { content: ''; position: absolute; border: 0 solid var(--accent-primary); pointer-events: none; }
.page-projects .rm-step::before { inset: 0 50% 0 var(--side); border-left-width: var(--w); border-bottom-width: var(--w); border-bottom-left-radius: var(--r); }
.page-projects .rm-step::after { top: calc(100% - var(--w)); right: var(--side); left: 50%; height: calc(var(--gap) + var(--w)); border-top-width: var(--w); border-right-width: var(--w); border-top-right-radius: var(--r); }
.page-projects .rm-step:nth-child(even)::before { inset: 0 var(--side) 0 50%; border-left-width: 0; border-right-width: var(--w); border-bottom-left-radius: 0; border-bottom-right-radius: var(--r); }
.page-projects .rm-step:nth-child(even)::after { right: 50%; left: var(--side); border-right-width: 0; border-left-width: var(--w); border-top-right-radius: 0; border-top-left-radius: var(--r); }
.page-projects .rm-step:last-child::after { content: none; }

.page-projects .rm-icon {
  position: absolute;
  top: 50%;
  left: calc(var(--side) + var(--w) / 2);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-primary);
  color: var(--accent-text);
  translate: -50% -50%;
}
.page-projects .rm-step:nth-child(even) .rm-icon { right: calc(var(--side) + var(--w) / 2); left: auto; translate: 50% -50%; }

.page-projects .rm-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.page-projects .rm-head h3 { margin: 0; font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-tight); }
.page-projects .rm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 50%, transparent);
  border-radius: var(--radius-md);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 600;
}
.page-projects .rm-chip svg { width: 14px; height: 14px; stroke-width: 2.5; }
.page-projects .rm-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-xl);
  background: var(--bg-secondary);
}
.page-projects .rm-box p { align-self: stretch; margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.page-projects .rm-we { padding-block: var(--space-3); color: var(--text-secondary); }
.page-projects .rm-you { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent-primary) 9%, transparent); color: var(--text-primary); }
.page-projects .rm-who { display: block; margin-bottom: var(--space-1); color: var(--accent-text); font-size: var(--text-xs); font-weight: 600; }
.page-projects .rm-pass { display: grid; color: var(--accent-text); }
/* the hand-over: a line faint where it leaves us and full where it reaches you, like the home page's path */
.page-projects .rm-hand { width: 40px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 15%, transparent), var(--accent-primary)); }

/* The way back: dashed, outside the main line on the right, from the bottom of the last step up into the box of the
   step that repeats, where it ends in an arrowhead. */
.page-projects .rm-loop { position: absolute; right: var(--out); bottom: calc(-1 * var(--gap)); border: 0 dashed color-mix(in srgb, var(--accent-primary) 60%, transparent); border-right-width: var(--w); pointer-events: none; }
.page-projects .rm-loop:not(.rm-loop--start) { top: 0; }
.page-projects .rm-loop--start { top: 96px; width: calc(var(--side) - var(--out)); border-top-width: var(--w); border-top-right-radius: var(--r); }
.page-projects .rm-loop--start::before { content: ''; position: absolute; top: calc(var(--w) / 2); left: 2px; width: 10px; height: 10px; border: solid color-mix(in srgb, var(--accent-primary) 60%, transparent); border-width: 0 0 var(--w) var(--w); rotate: 45deg; translate: 0 -50%; }
.page-projects .rm-loop--end { bottom: 0; left: 50%; border-bottom-width: var(--w); border-bottom-right-radius: var(--r); }
.page-projects .rm-again {
  position: absolute;
  bottom: calc(var(--w) / 2);
  left: 50%;
  z-index: 1;
  display: grid;
  justify-items: center;
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--accent-solid);
  color: #FFFFFF;
  line-height: var(--leading-snug);
  text-align: center;
  white-space: nowrap;
  translate: -50% 50%;
}
.page-projects .rm-again span { color: #EDE9FE; font-size: var(--text-xs); }
.page-projects .rm-again strong { font-size: var(--text-sm); }

@media (max-width: 760px) {
  .page-projects .rm-path { --side: 21px; --gap: var(--space-10); }
  .page-projects .rm-step, .page-projects .rm-step:nth-child(even) { padding: 0 0 0 60px; }
  .page-projects .rm-step::before, .page-projects .rm-step:nth-child(even)::before { inset: 0 auto 0 var(--side); border-width: 0 0 0 var(--w); border-radius: 0; }
  .page-projects .rm-step::after, .page-projects .rm-step:nth-child(even)::after { top: 100%; right: auto; left: var(--side); height: var(--gap); border-width: 0 0 0 var(--w); border-radius: 0; }
  .page-projects .rm-step:last-child::before { bottom: auto; height: 22px; }
  .page-projects .rm-icon, .page-projects .rm-step:nth-child(even) .rm-icon { top: 0; right: auto; left: calc(var(--side) + var(--w) / 2); translate: -50% 0; }
  .page-projects .rm-head { min-height: 44px; }
  .page-projects .rm-head h3 { font-size: var(--text-xl); }
  .page-projects .rm-box { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
  .page-projects .rm-we { padding-block: 0; }
  .page-projects .rm-pass, .page-projects .rm-loop { display: none; }
  .page-projects .rm-again { position: static; justify-items: start; justify-self: start; width: max-content; max-width: 100%; margin-top: var(--space-4); text-align: left; white-space: normal; translate: none; }
}

/* The roadmap draws itself as you scroll. The line's tip sits at 70% of the viewport height: each step's line runs
   down its side and under its box while the step rises past that point, then across and down into the next step
   while the gap does. A step's box comes in just before the line reaches it, its mark as the line passes, and the way
   back appears once the line reaches the end. Where the browser can't tie animation to scrolling, or motion is
   reduced, it is all simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-projects .rm-path { --tip: 30vh; view-timeline: --rm-path block; }
    .page-projects .rm-step { view-timeline: --rm-step block; }
    .page-projects .rm-step::before, .page-projects .rm-step::after, .page-projects .rm-icon,
    .page-projects .rm-head, .page-projects .rm-box { animation: linear both; animation-timeline: --rm-step; }
    .page-projects .rm-step::before { animation-name: rm-down; animation-range: entry-crossing var(--tip) entry-crossing calc(100% + var(--tip)); }
    .page-projects .rm-step:nth-child(even)::before { animation-name: rm-down-r; }
    .page-projects .rm-step::after { animation-name: rm-across; animation-range: entry-crossing calc(100% + var(--tip)) entry-crossing calc(100% + var(--tip) + var(--gap)); }
    .page-projects .rm-step:nth-child(even)::after { animation-name: rm-across-r; }
    .page-projects .rm-icon { animation-name: rm-pop; animation-range: entry-crossing calc(50% + var(--tip) - 40px) entry-crossing calc(50% + var(--tip)); }
    .page-projects .rm-head { animation-name: rm-in; animation-range: entry-crossing 4vh entry-crossing 18vh; }
    .page-projects .rm-box { animation-name: rm-in; animation-range: entry-crossing calc(56px + 4vh) entry-crossing calc(56px + 18vh); }
    .page-projects .rm-loop, .page-projects .rm-again { animation: rm-show linear both; animation-timeline: --rm-path; animation-range: entry-crossing calc(100% + var(--tip)) entry-crossing calc(100% + var(--tip) + 80px); }
    .page-projects .rm-again { animation-name: rm-show, rm-pop; }
    @media (max-width: 760px) {
      .page-projects .rm-icon { animation-range: entry-crossing calc(var(--tip) - 40px) entry-crossing var(--tip); }
    }
  }
}
/* The line as clip-path insets: down the side first (until the corner), then along under the box to the middle. */
@keyframes rm-down { from { clip-path: inset(0 calc(100% - var(--r)) 100% 0); } 75% { clip-path: inset(0 calc(100% - var(--r)) 0 0); } to { clip-path: inset(0); } }
@keyframes rm-down-r { from { clip-path: inset(0 0 100% calc(100% - var(--r))); } 75% { clip-path: inset(0 0 0 calc(100% - var(--r))); } to { clip-path: inset(0); } }
/* From the middle across to the far side (until the corner), then down into the next step. */
@keyframes rm-across { from { clip-path: inset(0 100% calc(100% - var(--r)) 0); } 60% { clip-path: inset(0 0 calc(100% - var(--r)) 0); } to { clip-path: inset(0); } }
@keyframes rm-across-r { from { clip-path: inset(0 0 calc(100% - var(--r)) 100%); } 60% { clip-path: inset(0 0 calc(100% - var(--r)) 0); } to { clip-path: inset(0); } }
@keyframes rm-pop { from { opacity: 0; scale: 0.5; } }
@keyframes rm-in { from { opacity: 0; translate: 0 12px; } }
@keyframes rm-show { from { opacity: 0; } }