.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  color: var(--color-white);
  transition: background-color var(--transition-base), box-shadow var(--transition-base), backdrop-filter var(--transition-base);
}

.site-header.is-scrolled,
body.menu-open .site-header {
  background: rgba(10, 22, 33, 0.94);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(1rem);
}

.site-header__inner {
  min-height: 6rem;
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-white);
  font-size: var(--font-size-14);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
}

.brand__mark {
  width: 2.75rem;
  height: 2.75rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-gold-500);
  letter-spacing: -0.06em;
}

.primary-nav {
  margin-left: auto;
}

.primary-nav__list {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-16), 2vw, var(--space-32));
  list-style: none;
}

.primary-nav a {
  padding-block: var(--space-12);
  color: #e6edf2;
  font-size: var(--font-size-16);
  font-weight: 700;
  text-decoration: none;
}

.primary-nav a:hover {
  color: var(--color-white);
}

.site-header__cta {
  min-height: 3rem;
  padding-inline: var(--space-20);
}

.menu-toggle {
  width: 3rem;
  height: 3rem;
  padding: 0.7rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: transparent;
  display: none;
}

.menu-toggle span {
  display: block;
  height: 0.125rem;
  margin-block: 0.25rem;
  background: var(--color-white);
}

.hero {
  position: relative;
  min-height: min(58rem, 100svh);
  padding: 10rem 0 7rem;
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 28%, rgba(23, 122, 120, 0.3), transparent 28rem),
    linear-gradient(125deg, var(--color-navy-950), var(--color-navy-900) 58%, #143649);
  color: var(--color-white);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: linear-gradient(to right, transparent, #000 55%);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(30rem, 1.1fr);
  gap: clamp(var(--space-48), 7vw, var(--space-96));
  align-items: center;
}

.hero .eyebrow {
  color: #70c6c1;
}

.hero h1 {
  margin-bottom: var(--space-24);
  color: var(--color-white);
  font-size: clamp(3.25rem, 5.4vw, 5rem);
  line-height: 1.08;
}

.hero h1 span {
  color: var(--color-gold-500);
}

.hero__lead {
  max-width: 39rem;
  margin-bottom: var(--space-32);
  color: #d7e0e7;
  font-size: clamp(var(--font-size-18), 1.7vw, var(--font-size-20));
}

.hero__actions {
  margin-bottom: var(--space-32);
}

.hero .button--secondary {
  border-color: rgba(255,255,255,.7);
  color: var(--color-white);
}

.hero .button--secondary:hover {
  background: var(--color-white);
  color: var(--color-navy-900);
}

.hero__proof {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-20);
  color: #bfcbd3;
  font-size: var(--font-size-14);
  list-style: none;
}

.hero__proof li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.hero__proof li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--color-gold-500);
}

.hero-visual {
  position: relative;
  min-height: 36rem;
}

.hero-visual__glow {
  position: absolute;
  inset: 10% 0 0 15%;
  border-radius: 50%;
  background: rgba(23, 122, 120, 0.28);
  filter: blur(4rem);
}

.browser-mock {
  position: absolute;
  overflow: hidden;
  border: 0.0625rem solid rgba(255,255,255,.2);
  border-radius: var(--radius-20);
  background: var(--color-white);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.3);
}

.browser-mock--main {
  inset: 2rem 0 auto 2rem;
  aspect-ratio: 16 / 10;
}

.browser-mock--admin {
  z-index: 2;
  width: 58%;
  right: -2rem;
  bottom: 1.5rem;
}

.browser-mock__bar {
  height: 2rem;
  padding-inline: var(--space-12);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: #e9edef;
}

.browser-mock__bar i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #a7b0b6;
}

.browser-mock__page {
  padding: var(--space-20);
}

.mock-nav {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  color: var(--color-navy-900);
  font-size: 0.65rem;
}

.mock-nav span {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-gray-200);
}

.mock-hero {
  min-height: 14rem;
  margin-top: var(--space-20);
  padding: var(--space-24);
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: var(--space-20);
  align-items: center;
  border-radius: var(--radius-12);
  background: var(--color-ivory);
}

.mock-hero div {
  display: grid;
  gap: var(--space-12);
}

.mock-hero i,
.mock-hero strong,
.mock-hero small {
  display: block;
  border-radius: var(--radius-pill);
  background: var(--color-gray-200);
}

.mock-hero i { width: 35%; height: 0.35rem; background: var(--color-green-600); }
.mock-hero strong { width: 85%; height: 0.8rem; background: var(--color-navy-900); }
.mock-hero strong:nth-child(3) { width: 65%; }
.mock-hero small { width: 45%; height: 1.6rem; background: var(--color-gold-500); }
.mock-hero__image { aspect-ratio: 1; border-radius: 50% 50% 1rem 50%; background: linear-gradient(145deg, var(--color-green-600), var(--color-navy-800)); }

.mock-cards {
  margin-top: var(--space-16);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
}

.mock-cards i {
  height: 4rem;
  border: 0.0625rem solid var(--color-gray-200);
  border-radius: var(--radius-8);
}

.admin-mock {
  min-height: 11rem;
  display: grid;
  grid-template-columns: 25% 1fr;
}

.admin-mock__side {
  background: var(--color-navy-900);
}

.admin-mock__body {
  padding: var(--space-20);
  display: grid;
  gap: var(--space-12);
}

.admin-mock__body strong,
.admin-mock__body i {
  display: block;
  border-radius: var(--radius-8);
  background: var(--color-gray-100);
}

.admin-mock__body strong { width: 45%; height: 1rem; background: var(--color-green-600); }
.admin-mock__body i { height: 1.5rem; }

.flow-chip {
  position: absolute;
  z-index: 3;
  padding: var(--space-12) var(--space-16);
  border: 0.0625rem solid rgba(255,255,255,.35);
  border-radius: var(--radius-pill);
  background: rgba(16, 32, 47, 0.85);
  color: var(--color-white);
  font-size: var(--font-size-14);
  font-weight: 800;
  backdrop-filter: blur(0.75rem);
}

.flow-chip span {
  margin-right: var(--space-8);
  color: var(--color-gold-500);
}

.flow-chip--inquiry { left: 0; bottom: 8rem; }
.flow-chip--manage { right: 1rem; top: 0; }

.hero__scroll {
  position: absolute;
  left: var(--page-gutter);
  bottom: var(--space-32);
  display: flex;
  gap: var(--space-8);
  color: #afbec8;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-decoration: none;
}

.section-heading--split {
  max-width: none;
  grid-template-columns: 1fr 0.8fr;
  gap: var(--space-64);
  align-items: end;
}

.section-heading--split .lead {
  margin-bottom: var(--space-8);
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 0.0625rem solid var(--color-gray-200);
}

.problem-card {
  min-height: 20rem;
  padding: var(--space-40) clamp(var(--space-20), 3vw, var(--space-32));
  border-right: 0.0625rem solid var(--color-gray-200);
  display: flex;
  flex-direction: column;
}

.problem-card:last-child {
  border-right: 0;
}

.problem-card__number {
  margin-bottom: auto;
  color: var(--color-green-700);
  font-weight: 900;
}

.problem-card h3 {
  margin-bottom: var(--space-12);
}

.problem-card p {
  margin-bottom: 0;
  color: var(--color-gray-700);
}

.services-home {
  background: var(--color-navy-900);
  color: var(--color-white);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading--center .lead {
  margin-inline: auto;
}

.services-home .eyebrow { color: #70c6c1; }
.services-home h2 { color: var(--color-white); }
.services-home .lead { color: #c6d1d9; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}

.service-card {
  min-height: 37rem;
  padding: clamp(var(--space-24), 3vw, var(--space-40));
  border: 0.0625rem solid rgba(255,255,255,.16);
  border-radius: var(--radius-20);
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.045);
}

.service-card--featured {
  border-color: rgba(201,164,93,.7);
  background: linear-gradient(160deg, rgba(201,164,93,.12), rgba(255,255,255,.04));
}

.service-card__top {
  margin-bottom: var(--space-64);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
}

.service-card__number {
  color: var(--color-gold-500);
  font-weight: 900;
}

.service-card__label {
  margin-bottom: var(--space-8);
  color: #70c6c1;
  font-size: var(--font-size-14);
  font-weight: 800;
}

.service-card h3 {
  margin-bottom: var(--space-16);
  color: var(--color-white);
  font-size: var(--font-size-30);
}

.service-card p {
  color: #c6d1d9;
}

.service-card__list {
  margin: var(--space-24) 0 var(--space-32);
  padding: var(--space-24) 0 0;
  border-top: 0.0625rem solid rgba(255,255,255,.14);
  list-style: none;
}

.service-card__list li {
  padding-block: var(--space-8);
  color: #dbe3e8;
}

.service-card__list li::before {
  content: "✓";
  margin-right: var(--space-8);
  color: var(--color-gold-500);
}

.service-card .button--text {
  margin-top: auto;
  align-self: flex-start;
  color: var(--color-white);
}

.services-home__action {
  margin-top: var(--space-48);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-24);
}

.services-home__action p {
  margin: 0;
  color: #c6d1d9;
}

@media (max-width: 74.9375rem) {
  .primary-nav,
  .site-header__cta {
    display: none;
  }

  .menu-toggle {
    margin-left: auto;
    display: block;
  }

  .hero {
    min-height: auto;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__content {
    max-width: 45rem;
  }

  .hero-visual {
    width: min(100%, 46rem);
    min-height: 32rem;
    margin-inline: auto;
  }

  .problem-grid,
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .problem-card:nth-child(2) {
    border-right: 0;
  }

  .problem-card:nth-child(-n+2) {
    border-bottom: 0.0625rem solid var(--color-gray-200);
  }
}

@media (max-width: 47.9375rem) {
  .site-header__inner {
    min-height: 5rem;
  }

  .brand__name {
    font-size: 0.75rem;
  }

  .hero {
    padding: 8rem 0 5rem;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 12vw, 3.25rem);
  }

  .hero__actions,
  .hero__proof {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-visual {
    min-height: 22rem;
  }

  .browser-mock--main {
    inset: 1rem 0 auto;
  }

  .browser-mock--admin {
    width: 62%;
    right: -0.5rem;
    bottom: 0.5rem;
  }

  .mock-hero {
    min-height: 8rem;
    padding: var(--space-12);
  }

  .mock-cards i {
    height: 2.5rem;
  }

  .flow-chip--inquiry { bottom: 4rem; }
  .flow-chip--manage { right: 0; }
  .hero__scroll { display: none; }

  .section-heading--split {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .problem-grid,
  .service-grid {
    grid-template-columns: 1fr;
  }

  .problem-card {
    min-height: 17rem;
    border-right: 0;
    border-bottom: 0.0625rem solid var(--color-gray-200);
  }

  .problem-card:last-child {
    border-bottom: 0;
  }

  .service-card {
    min-height: auto;
  }

  .service-card__top {
    margin-bottom: var(--space-40);
  }

  .services-home__action {
    align-items: stretch;
    flex-direction: column;
    text-align: center;
  }
}

/* Day 05: diagnosis, portfolio, education, final CTA and footer */
.diagnosis-home { background: var(--color-ivory); }

.split-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-48), 8vw, var(--space-120));
  align-items: center;
}

.split-layout h2 { margin-bottom: var(--space-24); }
.split-layout .lead { margin-bottom: var(--space-32); }

.diagnosis-visual {
  position: relative;
  min-height: 36rem;
  padding: var(--space-48);
  border-radius: var(--radius-20);
  display: grid;
  place-items: center;
  background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), var(--color-navy-900);
  background-size: 3rem 3rem;
}

.check-sheet {
  width: min(100%, 27rem);
  padding: var(--space-32);
  border-radius: var(--radius-20);
  background: var(--color-white);
  box-shadow: 0 2rem 4rem rgba(0,0,0,.28);
  transform: rotate(-2deg);
}

.check-sheet h3 { margin: var(--space-20) 0 var(--space-4); }
.check-sheet p { color: var(--color-gray-700); }
.check-sheet ul { margin: var(--space-20) 0 0; padding: 0; list-style: none; }
.check-sheet li { min-height: 3.25rem; border-top: 0.0625rem solid var(--color-gray-100); display: grid; grid-template-columns: 2rem 1fr 2rem; align-items: center; }
.check-sheet li span { color: var(--color-gray-600); font-size: var(--font-size-14); }
.check-sheet li b { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-green-100); color: var(--color-green-700); }

.check-count {
  position: absolute;
  right: var(--space-20);
  bottom: var(--space-24);
  width: 7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--color-green-600);
  color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.check-count b { font-size: var(--font-size-40); line-height: 1; }
.check-count span { font-size: var(--font-size-14); }

.diagnosis-types { margin-bottom: var(--space-32); }
.diagnosis-types p { margin: 0; padding: var(--space-20) 0; border-top: 0.0625rem solid var(--color-gray-200); display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-16); }
.diagnosis-types p:last-child { border-bottom: 0.0625rem solid var(--color-gray-200); }
.diagnosis-types span { color: var(--color-gray-700); }

.portfolio-heading { margin-bottom: var(--space-64); display: grid; grid-template-columns: 1fr .8fr; gap: var(--space-64); align-items: end; }
.portfolio-heading h2, .portfolio-heading .lead { margin-bottom: var(--space-16); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }

.project-card {
  overflow: hidden;
  border: 0.0625rem solid var(--color-gray-200);
  border-radius: var(--radius-20);
  background: var(--color-white);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.project-card:hover { transform: translateY(-.35rem); box-shadow: var(--shadow-card); }
.project-card > a { height: 100%; display: flex; flex-direction: column; text-decoration: none; }
.project-card__visual { min-height: 18rem; padding: var(--space-32); display: grid; place-items: center; overflow: hidden; }
.project-card__visual--biz { background: linear-gradient(145deg, #dfe8ec, #f7f8f5); }
.project-card__visual--health { background: var(--color-green-100); }
.project-card__visual--proposal { background: linear-gradient(#b9d0d3 0 42%, #5c846d 43% 68%, #315742 69%); }

.project-screen, .proposal-screen {
  width: 85%;
  aspect-ratio: 4 / 3;
  padding: var(--space-24);
  border: .5rem solid var(--color-navy-900);
  border-bottom-width: 1.1rem;
  border-radius: var(--radius-12);
  display: grid;
  align-content: center;
  gap: var(--space-12);
  background: var(--color-white);
  box-shadow: 1rem 1.5rem 2rem rgba(16,32,47,.2);
  transform: rotate(-3deg);
}

.project-screen i { width: 25%; height: .4rem; background: var(--color-green-600); }
.project-screen b { width: 80%; height: .75rem; background: var(--color-navy-900); }
.project-screen b:nth-child(3) { width: 55%; }
.project-screen span { width: 45%; height: 1.8rem; border-radius: var(--radius-pill); background: var(--color-gold-500); }

.project-gauge {
  width: 12rem;
  aspect-ratio: 1;
  border: 1.2rem solid rgba(255,255,255,.8);
  border-top-color: var(--color-green-600);
  border-right-color: var(--color-gold-500);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-navy-900);
  font-weight: 900;
  transform: rotate(-25deg);
}

.proposal-screen { border-color: rgba(255,255,255,.9); background: rgba(16,32,47,.22); transform: rotate(3deg); }
.proposal-screen i { width: 30%; height: .45rem; background: var(--color-gold-500); }
.proposal-screen b { width: 72%; height: .8rem; background: var(--color-white); }
.proposal-screen span { width: 48%; height: .35rem; background: rgba(255,255,255,.75); }

.project-card__body { padding: var(--space-32); display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.project-card__body h3 { margin: var(--space-20) 0 var(--space-12); }
.project-card__body p { margin-bottom: var(--space-32); color: var(--color-gray-700); }
.project-card__body strong { margin-top: auto; color: var(--color-green-700); }

.education-home { overflow: hidden; background: var(--color-green-700); color: var(--color-white); }
.education-home .eyebrow { color: #b8e2df; }
.education-home h2 { color: var(--color-white); }
.education-home .lead { color: #d9eeec; }
.education-home .button--text { color: var(--color-white); }
.education-steps { margin: 0 0 var(--space-32); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); list-style: none; }
.education-steps li { padding: var(--space-16); border-top: 0.0625rem solid rgba(255,255,255,.35); display: grid; gap: var(--space-8); font-weight: 800; }
.education-steps span { color: var(--color-gold-500); font-size: var(--font-size-14); }

.lesson-visual { position: relative; min-height: 32rem; display: grid; place-items: center; }
.lesson-visual::before { content: ""; position: absolute; width: 26rem; aspect-ratio: 1; border: 0.0625rem solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(255,255,255,.035); }
.lesson-window { position: relative; z-index: 1; width: min(100%, 35rem); overflow: hidden; border-radius: var(--radius-20); background: var(--color-white); box-shadow: 0 2rem 5rem rgba(0,0,0,.28); transform: rotate(2deg); }
.lesson-window__bar { height: 2.5rem; padding: 0 var(--space-20); display: flex; align-items: center; justify-content: flex-end; background: var(--color-navy-900); color: #bfcbd3; font-size: .65rem; letter-spacing: .1em; }
.lesson-window__body { min-height: 18rem; display: grid; grid-template-columns: 1fr 1.1fr; }
.lesson-code, .lesson-page { padding: var(--space-32); display: grid; align-content: center; gap: var(--space-16); }
.lesson-code { background: #172a38; }
.lesson-code i { width: 80%; height: .4rem; border-radius: var(--radius-pill); background: #6bb5b0; }
.lesson-code i:nth-child(2) { width: 55%; margin-left: 15%; background: var(--color-gold-500); }
.lesson-code i:nth-child(3) { width: 70%; margin-left: 15%; background: #b9c7cf; }
.lesson-page b { color: var(--color-green-700); font-size: var(--font-size-24); }
.lesson-page i { height: .65rem; background: var(--color-navy-900); }
.lesson-page i:nth-child(3) { width: 65%; }
.lesson-page span { width: 50%; height: 1.8rem; border-radius: var(--radius-pill); background: var(--color-gold-500); }
.lesson-chip { position: absolute; z-index: 2; right: 0; bottom: var(--space-24); padding: var(--space-16) var(--space-24); border-radius: var(--radius-12); display: grid; background: var(--color-gold-500); color: var(--color-navy-950); box-shadow: var(--shadow-card); }
.lesson-chip span { font-size: var(--font-size-14); }

.final-cta { padding-block: clamp(var(--space-96), 12vw, var(--space-160)); background: var(--color-ivory); text-align: center; }
.final-cta__inner { display: grid; justify-items: center; }
.final-cta h2 { margin-bottom: var(--space-24); font-size: clamp(var(--font-size-40), 5vw, var(--font-size-64)); }
.final-cta__inner > p:not(.eyebrow) { max-width: 42rem; color: var(--color-gray-700); }
.final-cta__inner .cluster { margin-block: var(--space-32) var(--space-20); justify-content: center; }
.final-cta__inner small a { color: var(--color-green-700); font-weight: 800; }

.site-footer { padding-block: var(--space-64) var(--space-32); background: var(--color-navy-950); color: #c6d1d9; }
.site-footer__grid { padding-bottom: var(--space-48); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-64); }
.site-footer .brand { margin-bottom: var(--space-20); }
.site-footer__contact { display: grid; gap: var(--space-12); }
.site-footer__contact p { margin: 0; display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-16); }
.site-footer__contact span { color: #82939e; font-size: var(--font-size-14); }
.site-footer__contact a, .site-footer__bottom a { color: var(--color-white); }
.site-footer__bottom { padding-top: var(--space-24); border-top: 0.0625rem solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: var(--space-20); font-size: var(--font-size-14); }

.process-home { background: var(--color-white); }
.process-home__heading { margin-bottom: var(--space-64); display: grid; grid-template-columns: 1fr .8fr; gap: var(--space-64); align-items: end; }
.process-home__heading h2, .process-home__heading .lead { margin-bottom: 0; }
.process-home__list { margin: 0 0 var(--space-40); padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 0.0625rem solid var(--color-gray-200); list-style: none; }
.process-home__list li { min-height: 17rem; padding: var(--space-24) var(--space-16); border-right: 0.0625rem solid var(--color-gray-200); display: flex; flex-direction: column; }
.process-home__list li:last-child { border-right: 0; }
.process-home__list span { margin-bottom: auto; color: var(--color-green-700); font-weight: 900; }
.process-home__list b { margin-bottom: var(--space-8); color: var(--color-navy-900); }
.process-home__list p { margin: 0; color: var(--color-gray-700); font-size: var(--font-size-16); }

.mobile-cta {
  display: none;
}

body.menu-open {
  overflow: hidden;
}

@media (max-width: 74.9375rem) {
  .site-header__inner,
  .brand,
  .menu-toggle {
    position: relative;
    z-index: 2;
  }

  .primary-nav {
    position: fixed;
    z-index: 1;
    inset: 0;
    margin: 0;
    padding: 7rem var(--page-gutter) 3rem;
    display: block;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 85% 20%, rgba(23, 122, 120, 0.3), transparent 22rem),
      var(--color-navy-950);
    transform: translateY(-1rem);
    transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
  }

  body.menu-open .primary-nav {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .primary-nav__list {
    width: min(100%, 42rem);
    margin-inline: auto;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .primary-nav__list li {
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.14);
  }

  .primary-nav__list a {
    min-height: 4.5rem;
    padding: var(--space-16) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-white);
    font-size: clamp(var(--font-size-20), 3vw, var(--font-size-30));
  }

  .primary-nav__list a::after {
    content: "→";
    color: var(--color-gold-500);
  }

  .menu-toggle span {
    transform-origin: center;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(0.375rem) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-0.375rem) rotate(-45deg);
  }

  .split-layout { grid-template-columns: 1fr; }
  .diagnosis-visual, .lesson-visual { width: min(100%, 44rem); margin-inline: auto; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-home__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .process-home__list li { border-bottom: 0.0625rem solid var(--color-gray-200); }
}

@media (max-width: 47.9375rem) {
  body {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }

  .mobile-cta {
    position: fixed;
    z-index: 15;
    right: var(--space-12);
    bottom: max(var(--space-12), env(safe-area-inset-bottom, 0px));
    left: var(--space-12);
    min-height: 3.5rem;
    padding: var(--space-12) var(--space-20);
    border: 0.0625rem solid rgba(255, 255, 255, 0.24);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-green-600);
    color: var(--color-white);
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 0.75rem 2rem rgba(10, 22, 33, 0.28);
  }

  body.menu-open .mobile-cta {
    visibility: hidden;
  }

  .hero__grid {
    gap: var(--space-40);
  }

  .hero__proof {
    gap: var(--space-8);
  }

  .hero__proof li {
    min-height: 2rem;
  }

  .diagnosis-visual { min-height: 30rem; padding: var(--space-20); }
  .check-count { right: var(--space-8); bottom: var(--space-12); width: 6rem; }
  .diagnosis-types p { grid-template-columns: 1fr; gap: var(--space-4); }
  .portfolio-heading, .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-heading { gap: var(--space-16); }
  .project-card__visual { min-height: 15rem; }
  .education-steps { grid-template-columns: 1fr; }
  .lesson-visual { min-height: 23rem; }
  .lesson-window__body { min-height: 13rem; }
  .lesson-code, .lesson-page { padding: var(--space-20); }
  .final-cta__inner .cluster { width: 100%; align-items: stretch; flex-direction: column; }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-40); }
  .site-footer__contact p { grid-template-columns: 1fr; gap: 0; }
  .site-footer__bottom { flex-direction: column; }
  .process-home__heading { grid-template-columns: 1fr; gap: var(--space-16); }
  .process-home__list { grid-template-columns: 1fr; }
  .process-home__list li { min-height: 11rem; border-right: 0; }
  .process-home__list span { margin-bottom: var(--space-24); }
}

@media (max-width: 26.875rem) {
  .hero h1 {
    font-size: clamp(2.35rem, 11.5vw, 3rem);
  }

  .hero-visual {
    min-height: 20rem;
  }

  .browser-mock--admin {
    width: 68%;
  }

  .flow-chip {
    padding: var(--space-8) var(--space-12);
    font-size: 0.75rem;
  }

  .check-sheet {
    padding: var(--space-24);
  }

  .check-count {
    width: 5.5rem;
  }

  .project-card__body {
    padding: var(--space-24);
  }

  .lesson-chip {
    right: var(--space-8);
    bottom: var(--space-8);
  }
}

@media (max-width: 23.4375rem) {
  .brand__name {
    display: none;
  }

  .hero-visual {
    min-height: 18rem;
  }

  .browser-mock--admin,
  .flow-chip--manage {
    display: none;
  }

  .flow-chip--inquiry {
    bottom: var(--space-20);
  }

  .lesson-window__body {
    grid-template-columns: 1fr;
  }

  .lesson-code {
    display: none;
  }
}