/* A restrained finish for the portfolio, preserving its structure and identity. */
:root {
  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 14px;
  --line: rgba(10, 11, 10, .12);
  --shadow: 0 12px 32px -20px rgba(10, 11, 10, .24);
  --shadow-lg: 0 24px 48px -30px rgba(10, 11, 10, .32);
  --panel-bg: #f7f8f3;
  --panel-line: rgba(53, 59, 47, .1);
}

:focus-visible {
  outline: 2px solid #71871c;
  outline-offset: 5px;
}
.on-dark :focus-visible, #nav :focus-visible {
  outline-color: var(--accent);
}
#nav.scrolled :focus-visible {
  outline-color: #71871c;
}

/* Keep lime as a deliberate accent, with less surrounding decoration. */
.eyebrow::before {
  width: 17px;
  height: 2px;
  border-radius: 0;
  box-shadow: none;
}
.section-head h2, .about-left h2 {
  line-height: 1.08;
}
.section-head p {
  line-height: 1.7;
}
.hero::before {
  opacity: .3;
}
.hero::after {
  display: none;
}
.hero h1 {
  line-height: 1.04;
}
.hero .lead {
  color: #c2c5bb;
  line-height: 1.65;
}
.portrait-frame {
  border-radius: 24px;
  border-color: rgba(255, 255, 255, .24);
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .7);
}
.portrait-frame::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 38%, rgba(0, 0, 0, .12));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .12);
  border-radius: inherit;
}
.portrait-cap {
  font-size: .875rem;
  margin-top: 15px;
}

/* Buttons stay recognizably on-brand, without glow or capsule silhouettes. */
.btn {
  border-radius: 10px;
  transition: background .22s, color .22s, border-color .22s, transform .22s;
}
.btn-accent, .btn-accent:hover {
  box-shadow: none;
}
.btn-accent:hover {
  background: #d3fa43;
  transform: translateY(-2px);
}
.btn-dark:hover, .btn-ghost:hover,
#nav .nav-cta .btn-ghost:hover,
#nav.scrolled .nav-cta .btn-ghost:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

/* A fine rule replaces the navigation's pill highlights. */
.nav-links {
  gap: 24px;
}
.nav-links a {
  position: relative;
  padding: 8px 0;
  border-radius: 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  height: 2px;
  bottom: 1px;
  left: 0;
  right: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
#nav .nav-links a:hover, #nav .nav-links a.active,
#nav.scrolled .nav-links a:hover, #nav.scrolled .nav-links a.active {
  background: transparent;
}
.nav-links a:hover::after, .nav-links a.active::after {
  transform: scaleX(1);
}
#nav.scrolled {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#nav .nav-cta .btn-ghost {
  background: transparent;
}

/* The same four metrics, with cleaner shared alignment. */
.stats-grid {
  gap: 30px;
}
.stat, .stat:hover {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  padding: 23px 0 4px;
  transform: none;
}
.stat .num {
  font-variant-numeric: tabular-nums;
}
.stat .lbl {
  color: #adb0a6;
}

/* A typographic index: category names cut into fine rules, specialties flow as prose. */
.about-summary, .about-domains {
  scroll-margin-top: 100px;
  padding: 30px 32px 32px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
}
.about-domains {
  margin-top: 56px;
}
.about-summary p:last-child {
  margin-bottom: 0;
}
.about-summary .lbl, .about-domains .lbl {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #353b2f;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
  margin-bottom: 23px;
}
.about-summary .lbl::before, .about-domains .lbl::before {
  content: '';
  width: 26px;
  flex: 0 0 26px;
  height: 3px;
  background: var(--accent);
}
.domain-groups {
  display: grid;
  gap: 23px;
}
.domain-group {
  min-width: 0;
}
.domain-group h3 {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.domain-group h3::after {
  content: '';
  flex: 1;
  height: 1px;
  min-width: 24px;
  background: var(--line);
}
.domain-list {
  margin-top: 10px;
  list-style: none;
  text-wrap: pretty;
}
.domain-list li {
  display: inline;
  white-space: nowrap;
  font-size: .875rem;
  line-height: 1.9;
  color: var(--muted);
}
.domain-list li:not(:last-child)::after {
  content: ', ';
}

/* Technologies read as a single quiet line, without marks or boxes. */
.project-stack {
  margin: 2px 0 23px;
  padding: 0;
  border: 0;
}
.stack-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted-2);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.5;
}
.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 0;
  list-style: none;
}
.tech-list li {
  display: flex;
  align-items: center;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--muted);
}
.tech-list li:not(:last-child)::after {
  content: '·';
  margin: 0 10px;
  color: #a1a699;
}

/* Refine the existing cards; preserve the original grids and product artwork. */
.svc, .job, .proj, .edu-card {
  border-color: var(--line);
}
.services {
  background: var(--bg);
}
.svc-grid {
  gap: 22px;
}
.svc, .job {
  background: var(--panel-bg);
  border-color: var(--panel-line);
  border-radius: var(--r-md);
  box-shadow: none;
}
.svc {
  padding: 36px 32px;
}
.job {
  --job-pad: clamp(26px, 3vw, 40px);
  padding: var(--job-pad);
  background: var(--bg);
  border-color: var(--line);
}
.job-top {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  margin: calc(-1 * var(--job-pad)) calc(-1 * var(--job-pad)) 0;
  padding: 24px var(--job-pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;
}
.job-id {
  min-width: 0;
}
.svc:hover, .job:hover {
  transform: none;
  box-shadow: none;
}
.svc .no {
  color: #767b6e;
  font-size: .875rem;
  font-weight: 600;
}
.svc-ic {
  border-radius: 12px;
  width: 48px;
  height: 48px;
}
.svc p {
  margin-bottom: 0;
  line-height: 1.75;
}
/* Original mark geometry and spacing, recolored with Machinify's brand green. */
.machinify-logo {
  padding: 0;
  object-fit: contain;
  background: #040404;
}
.job-dur, .edu-card .yr {
  padding: 0 0 0 12px;
  background: transparent;
  border-radius: 0;
  border-left: 2px solid #8da824;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 500;
}
.job ul li::before {
  width: 5px;
  height: 5px;
  border-radius: 0;
  transform: none;
  background: #8da824;
  top: 11px;
}
.job ul li {
  padding-left: 20px;
}
.promo {
  border-top-style: solid;
  margin-top: 25px;
}
.promo-path {
  gap: 14px;
}
.promo-step, .promo-step.current {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 0;
}
.promo-step.current {
  padding-left: 14px;
  border-left: 2px solid #8da824;
}
.promo-step span {
  color: var(--muted);
}
.promo-sep {
  color: #959b8c;
}
.proj {
  border-radius: 18px;
}
.proj:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.proj:hover .proj-media img.logo,
.proj:hover .proj-media.cover img,
.proj:hover .proj-media.vh img,
.proj:hover .proj-media.gh img {
  transform: scale(1.02);
}
.m-harvestr {
  background: #e3eee4;
}
.m-agents {
  background: #f0e9dd;
}
.proj-body {
  padding: 26px 28px 28px;
}
.proj-body .project-category {
  color: #676d5e;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: 12px;
  flex: 0;
}
.proj-body h3 {
  line-height: 1.15;
}
.proj-body > p:not(.project-category) {
  line-height: 1.75;
}
.edu-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 24px clamp(26px, 3vw, 40px);
  background: var(--bg);
  border-color: var(--line);
  border-radius: var(--r-md);
}
.edu-card .info {
  min-width: 0;
}
.edu-card .edu-ic {
  width: 58px;
  height: 58px;
  border-radius: 15px;
}
.edu-card .yr {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  white-space: nowrap;
}
.exp .sub-head::before {
  height: 2px;
  width: 17px;
  border-radius: 0;
  box-shadow: none;
}

/* Retain the five-step layout and its accent, with gentler motion. */
.process::before, .contact::before {
  opacity: .35;
}
.step:hover {
  transform: translateY(-2px);
}
.step-ic {
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 0;
  place-items: start;
}
.step p {
  line-height: 1.7;
  color: #b2b6a9;
}

/* Keep the stack animation, using type instead of floating chips. */
.marq-head {
  text-align: left;
  margin-bottom: 28px;
}
.marq-head .eyebrow {
  justify-content: flex-start;
}
.marq-track {
  gap: 0;
  padding-right: 0;
}
.m-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 7px 0;
  gap: 0;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.02em;
}
.m-item::after {
  content: '·';
  color: #a1a699;
  padding: 0 22px;
  font-weight: 400;
}
.marquee + .marquee {
  margin-top: 9px;
}
.marquee.rev .m-item {
  color: #75796f;
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  font-weight: 400;
}
@keyframes scrollx {
  to { transform: translateX(-100%); }
}
.contact h2 {
  color: #f2f4ed;
  font-size: clamp(2rem, 4vw, 3rem);
}
.footer-nav a {
  border-radius: 0;
  padding: 7px 8px;
}
.footer-nav a:hover {
  background: transparent;
  color: var(--accent);
}

/* An accessible close control for the existing mobile drawer. */
.menu-close {
  position: absolute;
  top: 18px;
  right: 23px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 27px;
  cursor: pointer;
}
.mobile-menu {
  overflow-y: auto;
  padding-top: 78px;
}
.mobile-menu a {
  font-size: 1.35rem;
  padding: 10px 0;
}
.mobile-menu .btn {
  font-family: Inter, sans-serif;
  font-size: .95rem;
  padding: 13px 18px;
}

@media (min-width: 861px) and (max-width: 1150px) {
  .nav-links { gap: 17px; }
  .nav-links a { font-size: .85rem; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding: 10px 14px; font-size: .82rem; }
  .brand { font-size: 1rem; }
}
@media (max-width: 1024px) {
  .stats-grid { gap: 22px; }
}
@media (max-width: 560px) {
  .job-top, .edu-card { grid-template-columns: 58px minmax(0, 1fr); gap: 12px 14px; }
  .job-dur, .edu-card .yr { grid-column: 2; justify-self: start; }
  .about-summary, .about-domains { padding: 24px 20px; }
  .about-domains { margin-top: 44px; }
  .domain-group h3 { font-size: 1.3125rem; gap: 14px; }
  .domain-list { margin-top: 9px; }
  .tech-list li { font-size: .8125rem; }
  .stats-grid { gap: 23px 24px; }
  .stat .lbl { font-size: .875rem; }
  .svc { padding: 28px 24px; }
  .svc .no { right: 24px; }
  .proj-body { padding: 23px 24px 26px; }
  .promo-path { flex-direction: column; gap: 9px; }
  .promo-sep { display: none; }
  .promo-step { padding-left: 14px; border-left: 1px solid var(--line); }
  .m-item::after { padding: 0 17px; }
}
@media (max-width: 350px) {
  .brand { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
  .marq-track { animation: none; flex-wrap: wrap; flex-shrink: 1; }
  .marq-track[aria-hidden="true"] { display: none; }
  .m-item { font-size: 1rem; }
}

/* Current xyz products: brand marks, live interface captures, and focused copy. */
.work-head .section-head { max-width: 720px; }
.work-footer { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.suite-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 100%; padding: 17px 18px 17px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px -22px rgba(10,11,10,.28); font-size: .95rem; line-height: 1.35; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.suite-link-copy { min-width: 0; }
.suite-link strong { font-weight: 750; font-size: inherit; letter-spacing: 0; }
.suite-link-arrow { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--accent); transition: transform .25s var(--ease); }
.suite-link svg { width: 18px; height: 18px; }
.suite-link:hover { transform: translateY(-3px); border-color: rgba(10,11,10,.2); box-shadow: 0 18px 34px -22px rgba(10,11,10,.38); }
.suite-link:hover .suite-link-arrow { transform: translate(2px,-2px); }
.suite-link:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }
.product-grid { gap: 28px; }
.product-card { --product-color: #de6d21; --product-wash: #fbefe7; position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--product-wash); box-shadow: 0 12px 34px -30px rgba(10,11,10,.34); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s var(--ease); }
.product-card::before { content: ''; position: absolute; z-index: 1; inset: 0 0 auto; height: 3px; background: var(--product-color); }
.product-card:hover { transform: translateY(-3px); border-color: rgba(10,11,10,.22); box-shadow: 0 24px 44px -30px rgba(10,11,10,.36); }
.product-huntr { --product-color: #a17edd; --product-wash: #f1edf8; }
.product-kickstart { --product-color: #3a89e4; --product-wash: #eaf1fb; }
.product-anyreport { --product-color: #e774aa; --product-wash: #fbedf3; }
.product-visual { display: flex; flex-direction: column; flex: 1; padding: 30px; background: linear-gradient(160deg, var(--product-wash), #fff); }
.product-brand { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(10,11,10,.1); }
.product-wordmark { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Match the apps' loader loop: the tile hops, squashes on landing, and rests between hops. */
.product-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  filter: drop-shadow(0 5px 7px rgba(10,11,10,.12));
  --product-loader-hop: 11px;
  --product-loader-sqx: .075;
  --product-loader-sqy: .11;
  --product-loader-e-y:linear(0, 0 15.63%, 0.0646 16.06%, 0.1289 16.52%, 0.1905 16.97%, 0.2496 17.42%, 0.306 17.88%, 0.3599 18.33%, 0.4112 18.78%, 0.4617 19.25%, 0.5096 19.72%, 0.5549 20.19%, 0.5976 20.66%, 0.6379 21.13%, 0.6757 21.59%, 0.7123 22.08%, 0.7452 22.55%, 0.7768 23.03%, 0.8051 23.5%, 0.8321 23.98%, 0.8567 24.47%, 0.8797 24.97%, 0.919 25.97%, 0.9503 27%, 0.9734 28.05%, 0.989 29.13%, 0.9976 30.27%, 1 31.56%, 0.9976 32.86%, 0.989 34%, 0.9734 35.08%, 0.9503 36.13%, 0.919 37.16%, 0.8797 38.16%, 0.8567 38.66%, 0.8321 39.14%, 0.8051 39.63%, 0.7768 40.09%, 0.7452 40.58%, 0.7123 41.05%, 0.6757 41.53%, 0.6379 42%, 0.5976 42.47%, 0.5549 42.94%, 0.5096 43.41%, 0.4617 43.88%, 0.4112 44.34%, 0.3599 44.8%, 0.306 45.25%, 0.2496 45.7%, 0.1905 46.16%, 0.1289 46.61%, 0.0646 47.06%, 0 47.5%, 0);
  --product-loader-e-sq:linear(0, 0.0002 4.5%, 0.0192 5.53%, 0.0956 7.05%, 0.2932 9.69%, 0.3594 10.72%, 0.4052 11.8%, 0.4199 12.83%, 0.3899 13.11%, 0.3031 13.42%, 0.154 13.78%, -0.2393 14.56%, -0.3923 14.91%, -0.4592 15.09%, -0.5065 15.27%, -0.5376 15.44%, -0.5496 15.59%, -0.3358 20.05%, -0.1738 24.17%, -0.0559 28.19%, -0.0002 31.5%, -0.0302 33.83%, -0.1063 37.27%, -0.2201 41.47%, -0.4 47.5%, -0.0589 47.94%, 0.2269 48.36%, 0.4675 48.78%, 0.6615 49.2%, 0.8095 49.63%, 0.9161 50.06%, 0.9782 50.5%, 1 50.97%, 0.9909 51.3%, 0.9611 51.66%, 0.9109 52.03%, 0.8417 52.42%, 0.6788 53.16%, 0.1868 55.13%, 0.0594 55.72%, -0.0429 56.28%, -0.1251 56.84%, -0.1863 57.41%, -0.2279 57.98%, -0.2497 58.58%, -0.2521 59.27%, -0.2317 60.03%, -0.1908 60.86%, -0.0565 62.98%, 0.0008 64.06%, 0.044 65.28%, 0.0631 66.53%, 0.0585 68.08%, 0.0059 71.52%, -0.0071 73.38%, 0);
}
.product-icon::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 16%; right: 16%; bottom: -3px;
  height: 5px;
  border-radius: 50%;
  background: rgba(10,11,10,.16);
  filter: blur(2px);
}
.product-icon img { display: block; transform-origin: 50% 100%; }
.product-wordmark img { width: 44px; height: 44px; flex-shrink: 0; }
.product-wordmark h3 { font-family: 'Inter', sans-serif; font-size: 1.65rem; font-weight: 700; letter-spacing: -.065em; line-height: 1; }
.product-screenshot { flex-shrink: 0; position: relative; display: block; aspect-ratio: 1.9; overflow: hidden; background: #fff; border: 1px solid rgba(10, 11, 10, .16); border-radius: 10px; box-shadow: 0 16px 28px -22px rgba(10,11,10,.4); }
.product-screenshot > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
@keyframes product-loader-hop {
  from { translate: 0 0; }
  to { translate: 0 calc(var(--product-loader-hop) * -1); }
}
@keyframes product-loader-squash {
  from { scale: 1 1; }
  to { scale: calc(1 + var(--product-loader-sqx)) calc(1 - var(--product-loader-sqy)); }
}
@keyframes product-loader-shadow {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(.5); opacity: .4; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product-card:hover .product-icon img {
    animation:
      product-loader-hop 1600ms var(--product-loader-e-y) -250ms infinite,
      product-loader-squash 1600ms var(--product-loader-e-sq) -250ms infinite;
  }
  .product-card:hover .product-icon::after {
    animation: product-loader-shadow 1600ms var(--product-loader-e-y) -250ms infinite;
  }
}
.screenshot-dialog { max-width: min(1320px, 94vw); width: 94vw; max-height: 90svh; margin: auto; padding: 0; background: #fff; color: #171717; border: 0; border-radius: 12px; overflow: auto; box-shadow: 0 20px 80px rgba(0,0,0,.35); }
.screenshot-dialog::backdrop { background: rgba(0,0,0,.78); }
.screenshot-dialog-bar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: #fff; padding: 16px 20px; border-bottom: 1px solid #ddd; z-index: 1; }
.screenshot-dialog-bar p { font-size: .9rem; font-weight: 600; }
.screenshot-dialog-bar button { display: flex; align-items: center; gap: 10px; border: 1px solid #ddd; background: #fff; color: #222; padding: 8px 12px; border-radius: 6px; cursor: pointer; font: inherit; font-size: .8rem; }
.screenshot-dialog-bar button span { font-size: 1.3rem; line-height: 1; }
.screenshot-dialog > img { display: block; width: 100%; height: auto; }
body.screenshot-open { overflow: hidden; }
@media (max-width: 760px) {
  .product-grid { gap: 24px; }
  .product-visual { padding: 22px 20px; }
  .product-brand { margin-bottom: 20px; padding-bottom: 18px; }
  .product-wordmark h3 { font-size: 1.5rem; }
  .screenshot-dialog-bar { padding: 12px; gap: 12px; }
  .screenshot-dialog-bar p { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .suite-link, .suite-link-arrow { transition: none; }
}

/* Keep product names and descriptions on a single line. */
.product-wordmark { width: 100%; gap: 10px; }
.product-wordmark h3 { flex-shrink: 0; font-size: 1.3rem; }
.product-wordmark img { width: 34px; height: 34px; }
.product-tagline { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: .75rem; font-weight: 400; line-height: 1.5; color: #626262; letter-spacing: 0; white-space: nowrap; }
.product-tagline > span { flex-shrink: 0; color: #929292; }
@media (min-width: 861px) and (max-width: 1150px) {
  .product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .product-wordmark { flex-wrap: wrap; }
  .product-tagline { flex-basis: 100%; font-size: clamp(.6rem, 2.5vw, .75rem); }
  .product-tagline > span { display: none; }
}