.work-page {
  position: relative;
  padding: 20px 0 0;
}

.work-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas:
    "copy illustration"
    "services services";
  align-items: center;
  gap: 48px;
}

.work-page__copy {
  grid-area: copy;
  position: relative;
  z-index: 2;
  padding-block: 40px;
  animation: work-arrive 650ms cubic-bezier(.2,.65,.3,1) both;
}

.cluster-light .work-page h1.title {
  max-width: 12ch;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 4.7vw, 4.1rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.work-page .lead {
  max-width: 48ch;
  margin: 28px 0 0;
  color: var(--site-muted);
  font-size: 1rem;
  line-height: 1.85;
}

.work-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.work-page__actions .brand-cta-primary,
.work-page__actions .brand-cta-secondary {
  gap: 9px;
  padding: 12px 18px;
  cursor: pointer;
}

.work-page__actions > a::after {
  content: "↗";
  font-size: 1.05em;
  transition: transform 180ms ease;
}

.work-page__actions > a:hover::after {
  transform: translate(2px, -2px);
}

.work-page__actions > :is(a, button):focus-visible {
  outline: 2px solid var(--site-ink);
  outline-offset: 4px;
}

.ruby-page { --ruby-red: #d30001; }

@media (prefers-reduced-motion: no-preference) {
  html:has(.ruby-page) { scroll-behavior: smooth; }
}

.ruby-hero {
  display: flex;
  max-width: none;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.ruby-hero .work-page__copy { flex: 1 1 auto; max-width: 620px; }
.ruby-hero__brand {
  display: block;
  flex: 0 0 190px;
  width: 190px;
  height: auto;
}
.ruby-hero .work-page__actions > a::after { content: "↓"; }
.ruby-hero .work-page__actions > a:hover::after { transform: translateY(2px); }
.ruby-section {
  padding: 104px 0;
  border-top: 1px solid var(--color-border);
}

.ruby-section__heading { max-width: 700px; }
.ruby-section__heading--wide { max-width: 780px; }
.cluster-light .ruby-section h2,
.cluster-light .ruby-contact h2 {
  max-width: 17ch;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 4vw, 3.35rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.ruby-section__heading > p {
  max-width: 64ch;
  margin: 24px 0 0;
  color: var(--site-muted);
  line-height: 1.75;
}

.ruby-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  margin-top: 48px;
}

.ruby-problem-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
}

.ruby-card-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  color: var(--ruby-red);
  background: color-mix(in srgb, var(--ruby-red) 8%, transparent);
}

.ruby-card-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ruby-problem-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.ruby-problem-card p {
  grid-column: 2;
  margin: 0;
  color: var(--site-muted);
  font-size: .84rem;
  line-height: 1.6;
}

.ruby-full-stack {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 64px;
}

.ruby-full-stack,
.ruby-education {
  position: relative;
  isolation: isolate;
}

.ruby-full-stack::before,
.ruby-education::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--site-content-gutter));
  background: #fff;
  pointer-events: none;
}

.ruby-full-stack .ruby-section__heading > p { max-width: 58ch; }
.ruby-full-stack .ruby-section__heading > p + p { margin-top: 16px; }

.ruby-philosophy {
  --ruby-red: #f3b6a5;
  --site-ink: #fff5ef;
  --site-muted: #d9c6c5;
  --color-border: rgb(255 235 227 / 18%);
  position: relative;
  isolation: isolate;
  padding-inline: 32px;
  border-top-color: transparent;
  color: var(--site-ink);
  background: #291e26;
}
.ruby-philosophy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--site-content-gutter));
  background:
    radial-gradient(ellipse at 100% 0, rgb(160 66 64 / 35%), transparent 65%),
    repeating-radial-gradient(circle at 100% 0, transparent 0 62px, rgb(255 216 198 / 7%) 63px 64px, transparent 65px 96px),
    #291e26;
  pointer-events: none;
}
.cluster-light .ruby-philosophy h2 { color: var(--site-ink); }
.ruby-philosophy .ruby-ai-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: rgb(27 20 26 / 45%);
}
.ruby-philosophy .ruby-ai-table th { padding-top: 18px; }
.ruby-philosophy .ruby-ai-table td:first-child { color: var(--ruby-red); }
.ruby-philosophy .ruby-section__heading > p { max-width: 74ch; }
.ruby-ai-table-wrap { margin-top: 48px; }
.ruby-ai-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ruby-ai-table th {
  padding: 0 20px 12px;
  color: var(--site-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-align: left;
  text-transform: uppercase;
}
.ruby-ai-table th:first-child { width: 36%; }
.ruby-ai-table td {
  padding: 22px 20px;
  border-top: 1px solid var(--color-border);
  color: var(--site-muted);
  font-size: .86rem;
  line-height: 1.65;
  vertical-align: top;
}
.ruby-ai-table td:first-child { color: var(--site-ink); }
.ruby-ai-table strong { font-size: .92rem; font-weight: 650; }

.ruby-stack { overflow: hidden; }
.ruby-stack-carousel {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: 42px;
}
.ruby-stack-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ruby-stack-row {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ruby-stack-track {
  display: flex;
  width: max-content;
  gap: 10px;
  animation: ruby-stack-scroll 34s linear infinite;
}
.ruby-stack-row--reverse .ruby-stack-track {
  animation-direction: reverse;
  animation-duration: 38s;
}
.ruby-stack-row--slow .ruby-stack-track { animation-duration: 43s; }
.ruby-stack-carousel:hover .ruby-stack-track { animation-play-state: paused; }
.ruby-stack-group {
  display: flex;
  flex: none;
  gap: 10px;
}
.ruby-stack-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  width: 300px;
  min-height: 72px;
  padding: 10px 14px;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--site-white);
}
.ruby-stack-item > svg {
  width: 22px;
  height: 22px;
  padding: 6px;
  box-sizing: content-box;
  border-radius: 9px;
  color: var(--ruby-red);
  background: color-mix(in srgb, var(--ruby-red) 7%, transparent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ruby-stack-item span { min-width: 0; }
.ruby-stack-item strong {
  display: block;
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.3;
}
.ruby-stack-item small {
  display: block;
  margin-top: 4px;
  color: var(--site-muted);
  font-size: .61rem;
  line-height: 1.35;
}
.ruby-education {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  align-items: start;
  gap: 56px;
}
.ruby-education__links { display: grid; gap: 12px; }
.ruby-education__links a {
  position: relative;
  display: grid;
  padding: 20px 46px 20px 20px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--site-ink);
  text-decoration: none;
  transition: background-color 180ms ease;
}
.ruby-education__links a::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 20px;
  color: var(--site-muted);
  transform: translateY(-50%);
}
.ruby-education__links a:hover { background: color-mix(in srgb, var(--site-yellow) 7%, transparent); }
.ruby-education__links a:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 4px; }
.ruby-education__links span { color: var(--ruby-red); font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.ruby-education__links strong { margin-top: 7px; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 400; }
.ruby-education__links small { margin-top: 5px; color: var(--site-muted); font-size: .75rem; line-height: 1.5; }

.ruby-proof-list { margin-top: 48px; border-top: 1px solid var(--color-border); }
.ruby-proof-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 24px;
  padding: 24px 18px 24px 6px;
  border-bottom: 1px solid var(--color-border);
  color: var(--site-ink);
  text-decoration: none;
  transition: background 180ms ease;
}
.ruby-proof-item:hover { background: color-mix(in srgb, var(--site-yellow) 7%, transparent); }
.ruby-proof-item:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 4px; }
.ruby-proof-item__year { color: var(--ruby-red); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.ruby-proof-item strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 400; }
.ruby-proof-item small { display: block; margin-top: 7px; color: var(--site-muted); font-size: .78rem; line-height: 1.55; }
.ruby-proof-item__arrow { color: var(--site-muted); transition: transform 180ms ease; }
.ruby-proof-item:hover .ruby-proof-item__arrow { transform: translate(2px, -2px); }

.ruby-contact {
  scroll-margin-top: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
  padding: 48px;
  border-radius: 18px;
  color: white;
  background: #111;
}
.cluster-light .ruby-contact h2 { max-width: 14ch; font-size: clamp(2rem, 3.6vw, 3rem); }
.ruby-contact > div > p:last-child { max-width: 54ch; margin: 20px 0 0; color: #b7b7b7; line-height: 1.7; }
.ruby-contact__actions { display: flex; flex: 0 0 auto; align-items: stretch; flex-direction: column; gap: 10px; }
.ruby-contact :is(.brand-cta-primary, .brand-cta-secondary) { min-height: 44px; padding: 12px 18px; white-space: nowrap; }
.ruby-contact .brand-cta-primary { background: white; color: #111; }
.ruby-contact .brand-cta-secondary { border-color: #4d4d4d; background: transparent; color: white; }
.ruby-contact .brand-cta-secondary:hover { border-color: white; color: white; }

.work-page__illustration {
  grid-area: illustration;
  position: relative;
  min-width: 0;
  margin: 0;
  isolation: isolate;
  animation: work-arrive 900ms cubic-bezier(.2,.65,.3,1) 120ms both;
}

.work-page__lighthouse {
  position: relative;
  width: 100%;
}

.work-page__engraving {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
  border-radius: 24% / 16%;
  --edge-fade: radial-gradient(ellipse at 50% 46%, #000 48%, #000 60%, transparent 75%);
  --edge-horizontal: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  --edge-vertical: linear-gradient(to bottom, transparent, #000 7%, #000 84%, transparent);
  mask-image: var(--edge-fade), var(--edge-horizontal), var(--edge-vertical);
  mask-composite: intersect;
}

.has-flying-birds .work-page__engraving {
  mask-image: var(--edge-fade), var(--edge-horizontal), var(--edge-vertical), var(--bird-cutout);
}

.work-page__beam {
  position: absolute;
  z-index: 0;
  top: 8%;
  left: 48%;
  width: 52%;
  height: 13%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--site-yellow) 24%, transparent), transparent);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  transform-origin: 0 50%;
  animation: work-beacon-sweep 4s ease-in-out infinite alternate;
}

.work-page__beacon {
  position: absolute;
  z-index: 2;
  top: 14.5%;
  left: 48%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--site-yellow);
  box-shadow: 0 0 14px color-mix(in srgb, var(--site-yellow) 40%, transparent);
  transform: translate(-50%, -50%);
}

.work-page__cloud {
  position: absolute;
  z-index: -1;
  top: -2%;
  left: -15%;
  width: 44%;
  height: auto;
  opacity: .65;
  border-radius: 50%;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 72%);
  animation: work-cloud-appear 1200ms ease-out both, work-cloud-drift 9s ease-in-out infinite alternate;
  pointer-events: none;
}

.work-page__birds {
  display: none;
  position: absolute;
  top: -60vh;
  left: 0;
  height: calc(var(--artwork-height) + 60vh);
  overflow: clip;
  z-index: 3;
  pointer-events: none;
}

.has-flying-birds .work-page__birds { display: block; }

.work-page__bird {
  position: absolute;
  display: block;
  opacity: 0;
  animation: work-bird-flight var(--flight-duration) linear var(--flight-delay) infinite both;
}

.work-page__bird svg {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
  transform-origin: 50% 60%;
  animation: work-bird-bank 3.8s ease-in-out var(--flight-delay) infinite alternate;
}

.work-bird__wing { fill: #202020; stroke: #121212; stroke-width: .6; stroke-linejoin: round; }
.work-bird__wing--far { fill: #383838; }
.work-bird__body { fill: #171717; }
.work-bird__feathers { fill: none; stroke: #f7f7f7; stroke-width: .6; opacity: .42; }

.work-page__wind {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 74%);
}

.work-page__wind path {
  fill: none;
  stroke: var(--site-muted);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 48 240;
  animation: work-wind-stream var(--wind-speed) linear var(--wind-delay) infinite;
}

.work-page__illustration:not(.is-animating) .work-page__bird,
.work-page__illustration:not(.is-animating) .work-page__bird svg,
.work-page__illustration:not(.is-animating) .work-page__wind path,
.has-flying-birds:not(.is-animating) .work-page__cloud,
.has-flying-birds:not(.is-animating) .work-page__beam { animation-play-state: paused; }

@keyframes work-bird-flight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  5% { opacity: .9; }
  25% { opacity: .9; transform: translate3d(18vw, -8vh, 0) rotate(-4deg); }
  50% { opacity: .8; transform: translate3d(50vw, -22vh, 0) rotate(-8deg) scale(.85); }
  72% { opacity: .6; transform: translate3d(85vw, -32vh, 0) rotate(-3deg) scale(.75); }
  85%, 100% { opacity: 0; transform: translate3d(110vw, -38vh, 0) rotate(0deg) scale(.7); }
}

@keyframes work-bird-bank {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-3px) rotate(2deg); }
}

@keyframes work-wind-stream {
  0% { stroke-dashoffset: 110; opacity: 0; }
  20% { opacity: .22; }
  65% { opacity: .22; }
  100% { stroke-dashoffset: -210; opacity: 0; }
}

@keyframes work-cloud-appear {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: .65; filter: blur(0); }
}

@keyframes work-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes work-beacon-sweep {
  from { transform: rotate(-16deg); opacity: .45; }
  to { transform: rotate(12deg); opacity: .85; }
}

@keyframes work-cloud-drift {
  from { transform: translate3d(-16px, 2px, 0); }
  to { transform: translate3d(40px, -4px, 0); }
}

@keyframes ruby-stack-scroll {
  to { transform: translateX(calc(-50% - 5px)); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .work-page__layout { gap: 28px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .work-page__actions { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767px) {
  .work-page { padding-top: 4px; }
  .work-page__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "services"
      "illustration";
    gap: 24px;
  }
  .work-page__copy { padding-block: 0; }
  .cluster-light .work-page h1.title { max-width: 15ch; font-size: clamp(2.5rem, 9.5vw, 3.5rem); }
  .work-page .lead { margin-top: 22px; font-size: .95rem; line-height: 1.8; }
  .work-page__actions { margin-top: 26px; gap: 10px; }
  .work-page__actions .brand-cta-primary,
  .work-page__actions .brand-cta-secondary { min-height: 44px; font-size: .82rem; padding-inline: 16px; }
  .work-page__illustration { width: min(100%, 340px); margin: 8px auto -24px; }
  .work-page__cloud { left: 0; top: -1%; width: 38%; }
  .ruby-section { padding: 72px 0; }
  .ruby-hero { align-items: flex-start; flex-direction: column; gap: 20px; }
  .ruby-hero__brand { align-self: flex-end; flex-basis: auto; width: min(150px, 42vw); }
  .ruby-philosophy { padding-inline: 20px; }
  .ruby-full-stack { grid-template-columns: 1fr; gap: 40px; }
  .ruby-problem-grid { grid-template-columns: 1fr; }
  .ruby-problem-card { padding-block: 18px; }
  .ruby-stack-carousel { margin-inline: calc(-1 * var(--site-content-gutter)); }
  .ruby-stack-item { width: 278px; min-height: 68px; padding-inline: 12px; }
  .ruby-ai-table thead { display: none; }
  .ruby-ai-table,
  .ruby-ai-table tbody,
  .ruby-ai-table tr,
  .ruby-ai-table td { display: block; width: 100%; }
  .ruby-ai-table tr { padding: 20px 0; border-top: 1px solid var(--color-border); }
  .ruby-ai-table td { padding: 0; border: 0; }
  .ruby-ai-table td + td { margin-top: 16px; }
  .ruby-ai-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--ruby-red);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .ruby-proof-item { grid-template-columns: minmax(0, 1fr) 28px; gap: 8px 16px; padding-block: 22px; }
  .ruby-proof-item__year { grid-column: 1 / -1; }
  .ruby-contact { align-items: flex-start; flex-direction: column; padding: 32px 24px; }
  .ruby-contact__actions { width: 100%; }
  .ruby-education { grid-template-columns: 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.ruby-page) { scroll-behavior: auto; }
  .work-page__copy,
  .work-page__illustration,
  .work-page__beam,
  .work-page__cloud,
  .work-page__bird,
  .work-page__bird svg { animation: none; }
  .work-page__wind { display: none; }
  .work-page__actions > a::after { transition: none; }
  .ruby-stack-row { overflow-x: auto; mask-image: none; scrollbar-width: none; }
  .ruby-stack-row::-webkit-scrollbar { display: none; }
  .ruby-stack-track { animation: none; }
  .ruby-stack-group[aria-hidden="true"] { display: none; }
}

.work-page__services {
  grid-area: services;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.work-page__service {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--site-ink);
  text-decoration: none;
}

.work-page__service-main {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.work-page__service-main > div { min-width: 0; }

.work-page__service-icon {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 5%, transparent);
}

.work-page__service-icon img {
  display: block;
  object-fit: contain;
  transition: transform 180ms ease;
}

.work-page__service-icon--claude { color: #d97757; }
.work-page__service-icon--claude img { width: 30px; height: 30px; }
.work-page__service-icon--rails { color: #d30001; }
.work-page__service-icon--rails img { width: 42px; height: auto; }

.work-page__service h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}

.work-page__service p {
  margin: 12px 0 0;
  color: var(--site-muted);
  font-size: .875rem;
}

.work-page__service-arrow { flex-shrink: 0; }
.work-page__service:hover { background: color-mix(in srgb, var(--site-yellow) 8%, transparent); }
.work-page__service:hover .work-page__service-icon img { transform: translateY(-1px) scale(1.035); }
.work-page__service:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 4px; }

@media (max-width: 767px) {
  .work-page__services { grid-template-columns: 1fr; gap: 16px; }
  .work-page__service { padding: 24px; }
  .work-page__service-main { gap: 16px; }
  .work-page__service-icon { flex-basis: 48px; width: 48px; height: 48px; }
}