/* =========================================================================
   Home page - the pitch. Full width, no sidebar.

   Section order follows the attention funnel: who and what, proof that it
   is true, what it buys an employer, the evidence, the history, the ask.
   ========================================================================= */

.home { display: block; }

.section {
  width: 100%;
  padding: 72px 24px;
}
.section__inner {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}
.section--tinted { background: var(--surface-container-low); }
.section--tight { padding-top: 40px; padding-bottom: 40px; }

.section__head { margin-bottom: 40px; max-width: 62ch; }
.section__eyebrow { color: var(--tertiary); margin-bottom: 12px; }
.section__lead { margin-top: 16px; color: var(--on-surface-variant); }

@media (max-width: 700px) {
  .section { padding: 52px 20px; }
}

/* ---- Hero -------------------------------------------------------------- */
.hero {
  padding: 88px 24px 64px;
  background:
    radial-gradient(120% 90% at 12% 0%, var(--primary-container) 0%, transparent 58%),
    var(--surface);
}
.hero__inner {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--shape-full);
  background: var(--surface-container-highest);
  color: var(--on-surface-variant);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.hero__title { max-width: 18ch; }
.hero__title em {
  font-style: normal;
  color: var(--primary);
}
.hero__body {
  margin-top: 24px;
  max-width: 58ch;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--on-surface-variant);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

@media (max-width: 700px) {
  .hero { padding: 56px 20px 44px; }
  .hero__title { max-width: none; }
  .hero__body { font-size: 1.05rem; }
}

/* ---- Platform logo wall ------------------------------------------------ */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(64px, 100%), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo-wall__item {
  aspect-ratio: 1;
  border-radius: var(--shape-l);
  /* Background fades out with the mark, so the tile eases off the grey
     placeholder rather than snapping. The white comes from the image, which
     is flattened onto white, so no tile background is needed once loaded. */
  transition: transform var(--motion-spring),
              background-color var(--motion-emphasized);
}
.logo-wall__item:hover { transform: translateY(-3px); }
/* Stagger the sheen across the grid so it reads as one wave rather than 33
   tiles blinking in unison. */
.logo-wall__item:nth-child(6n + 2)::after { animation-delay: 0.12s; }
.logo-wall__item:nth-child(6n + 3)::after { animation-delay: 0.24s; }
.logo-wall__item:nth-child(6n + 4)::after { animation-delay: 0.36s; }
.logo-wall__item:nth-child(6n + 5)::after { animation-delay: 0.48s; }
.logo-wall__item:nth-child(6n)::after     { animation-delay: 0.60s; }
.logo-wall__caption {
  margin-top: 20px;
  color: var(--on-surface-variant);
  font-size: 0.9rem;
}

/* On phones the 64px tiles cost nine rows of vertical space and push the
   proof numbers below the fold. Smaller tiles fit six per row instead. */
@media (max-width: 560px) {
  .logo-wall { grid-template-columns: repeat(auto-fill, minmax(min(46px, 100%), 1fr)); gap: 8px; }
  .logo-wall__item { border-radius: var(--shape-m); }
}

/* ---- Stat tiles -------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stat {
  background: var(--surface-container);
  border-radius: var(--shape-xl);
  padding: 28px 24px;
}
.stat__value {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--tertiary);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--on-surface-variant);
}

/* ---- Services ---------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service {
  background: var(--surface-container-high);
  border-radius: var(--shape-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--shape-m);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.service__body { color: var(--on-surface-variant); }

/* ---- Work cards -------------------------------------------------------- */
.work {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A card is always one surface step above the section it sits in, which is
   how a filled card separates itself in Material 3: tonal elevation, not an
   outline. Without the tinted rule, a card in a tinted section is exactly
   the colour of that section and only appears on hover. */
.work-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-container);
  border-radius: var(--shape-2xl);
  overflow: hidden;
  transition: transform var(--motion-spring), background-color var(--motion-standard);
}
.work-card:hover { transform: translateY(-4px); background: var(--surface-container-high); }
.section--tinted .work-card { background: var(--surface-container-high); }
.section--tinted .work-card:hover { background: var(--surface-container-highest); }

.work-card__media { aspect-ratio: 16 / 9; }

.work-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  flex: 1;
}
.work-card__title { margin: 0; }
.work-card__kind {
  color: var(--tertiary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Project metadata, the context a reviewer needs before the story. */
.work-card__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: 0.85rem;
}
.work-card__meta dt { color: var(--on-surface-variant); }
.work-card__meta dd { margin: 0; }

.work-card__block { margin: 0; }
.work-card__block-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 6px;
}
.work-card__block p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

.work-card__outcome {
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  border-radius: var(--shape-l);
  padding: 16px 18px;
}
.work-card__outcome .work-card__block-label { color: inherit; opacity: 0.75; }

.work-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

/* The two index pages hang off the end of the work grid. */
.work-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ---- MirraSDK feature block -------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--surface-container-high);
  border-radius: var(--shape-2xl);
  padding: 48px;
}
.feature__body { display: flex; flex-direction: column; gap: 20px; }
/* The MirraSDK screenshot is 1202x623, so the box reserves that exact ratio
   and the placeholder occupies the right space before the image lands. */
.feature__media {
  aspect-ratio: 1202 / 623;
  border-radius: var(--shape-xl);
}
.feature__list {
  margin: 0;
  padding-left: 20px;
  color: var(--on-surface-variant);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
}
@media (max-width: 700px) {
  .feature { padding: 24px; border-radius: var(--shape-xl); }
}

/* ---- Experience timeline ----------------------------------------------- */
.timeline { margin: 0; padding: 0; list-style: none; }
.role {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--outline-variant);
}
.role:last-child { border-bottom: 1px solid var(--outline-variant); }
.role__when { color: var(--on-surface-variant); font-size: 0.92rem; }
.role__where { margin-top: 4px; color: var(--on-surface-variant); font-size: 0.92rem; }
.role__body { display: flex; flex-direction: column; gap: 12px; }
.role__title { margin: 0; }
.role__desc { margin: 0; color: var(--on-surface-variant); }

/* Measurable bullets under the context line. The marker is outside the text
   block so a wrapped second line stays aligned with the first. */
.role__points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  padding-left: 20px;
  color: var(--on-surface-variant);
}
.role__points li { padding-left: 4px; }

@media (max-width: 760px) {
  .role { grid-template-columns: 1fr; gap: 12px; }
}

/* ---- Contact ----------------------------------------------------------- */
.contact {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-radius: var(--shape-2xl);
  padding: 56px 48px;
}
.contact__title { margin: 0 0 16px; }
.contact__body { max-width: 56ch; font-size: 1.05rem; line-height: 1.65; }
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.contact .btn--filled {
  background: var(--on-primary-container);
  color: var(--primary-container);
}
.contact .btn--outlined {
  border-color: var(--on-primary-container);
  color: var(--on-primary-container);
  opacity: 0.92;
}

@media (max-width: 700px) {
  .contact { padding: 32px 24px; border-radius: var(--shape-xl); }
}

/* ---- Stack chip groups ------------------------------------------------- */
.stack-group { margin-bottom: 28px; }
.stack-group:last-child { margin-bottom: 0; }
.stack-group__name { margin-bottom: 12px; }

/* ---- 404 --------------------------------------------------------------- */
.notfound { display: grid; place-items: center; min-height: 60vh; }
.notfound__inner { max-width: 56ch; text-align: center; }
.notfound .section__lead { margin-left: auto; margin-right: auto; }
.notfound .hero__actions { justify-content: center; }