/* The closing is a readable, ordinary-flow surface after the animated scenes. */
.closing-light {
  --bg: #d8d9d2;
  --canvas-ink: #141513;
  --ink: #141513;
  --muted: #42443e;
  --quiet: #42443e;
  --accent: #141513;
  position: relative;
  background: var(--bg);
  color: var(--ink);
  color-scheme: light;
  scroll-margin-top: 0;
}
.closing-light .scene-stage { padding-top: 96px; padding-bottom: 80px; }
.closing-light .section-rail { margin-bottom: 48px; }
.closing-light .contact-title {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  font-synthesis: none;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-size: clamp(56px, 5.5vw, 80px);
  letter-spacing: -.035em;
  line-height: 1.04;
}
.closing-light .contact-detail > p { color: var(--ink); }
.closing-light .text-link {
  width: fit-content;
  min-height: 44px;
  height: auto;
  margin-top: 24px;
}
.closing-light .text-link .neon-ink::after { opacity: 1; background: currentColor; }
.closing-light .text-link:hover .neon-ink::after,
.closing-light .text-link:focus-visible .neon-ink::after { background: var(--link-paint, currentColor); }
.closing-light .study-link { margin-top: 24px; }

/* Keep fixed navigation and field controls legible as the light surface passes. */
.top.over-light, .field-readout.over-light, .field-panel.over-light {
  --canvas-ink: #141513;
  --ink: #141513;
  --muted: #42443e;
  --quiet: #42443e;
  --accent: #141513;
  --bg: #d8d9d2;
  color: var(--ink);
  color-scheme: light;
}
.field-panel.over-light .field-tools { background: #c9cbc2; }
.field-panel.over-light .field-tools button:hover { color: #141513; }

@media (min-width: 768px) and (max-width: 1023px) {
  .closing-light .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .closing-light .contact-detail { max-width: 40ch; }
}

/* Mobile body text is deliberately larger than the 16px desktop reading size.
   These rules are CSS-first: readable before JS, with motion off, or on failure. */
@media (max-width: 767px), (pointer: coarse) and (max-width: 1023px) {
  body { --edge: 24px; }
  .hero .hero-description,
  .approach .statement-copy,
  .work .service p,
  .contact .contact-detail > p,
  .services-page .service-copy p,
  .services-page .service-note {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 300;
  }
  .hero .hero-description { max-width: 34ch; }
  .hero .hero-bottom { margin-top: 32px; }
  .hero .eyebrow { font-size: 12px; line-height: 20px; margin-bottom: 24px; }
  .top nav, .native-text .top nav { font-size: 14px; line-height: 24px; gap: 24px; }
  .top nav a { min-height: 44px; align-content: center; }
  .top .wordmark { font-size: 24px; line-height: 32px; min-height: 44px; }
  .section-rail .section-label { font-size: 14px; line-height: 20px; }
  .hero .scroll-cue { width: fit-content; height: auto; min-height: 44px; margin-top: 24px; }
  .hero .scroll-cue .mono,
  .approach .text-link,
  .contact .text-link,
  .contact .study-link { font-size: 16px; line-height: 24px; }
  .text-link .neon-ink,
  .scroll-cue .neon-ink,
  .study-link .neon-ink { line-height: 24px; }
  .approach .text-link { height: auto; min-height: 44px; }
  .work .service { padding: 24px 0; }
  .work .service h3 { font-size: 32px; line-height: 40px; }
  .closing-light .scene-stage { padding-top: 64px; padding-bottom: 64px; }
  .closing-light .section-rail { margin-bottom: 32px; }
  .closing-light .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .closing-light .contact-title {
    font-size: clamp(52px, 16.4vw, 72px);
    letter-spacing: -.028em;
    line-height: 1.04;
  }
  .closing-light .study-link { min-height: 44px; align-content: center; }
  .foot .mono { font-size: 14px; line-height: 24px; }
  .foot a.mono { min-height: 44px; align-content: center; }
  .foot { grid-template-columns: 1fr; gap: 16px; padding-top: 48px; }
  .foot .footer-tagline { font-size: 40px; margin-bottom: 16px; }
  .field-readout { left: 24px; }
  .field-panel { right: 24px; }

  .services-page .service-intro { font-size: 26px; line-height: 34px; }
  .services-page .service-kicker { font-size: 14px; line-height: 20px; }
  .services-page .top nav a[aria-current] { font-size: 14px; }
  .services-page .service-entry { grid-template-columns: minmax(0, 1fr) 48px; gap: 16px; }
  .services-page .service-copy h2 { font-size: 32px; line-height: 40px; }
  .services-page .service-contact { font-size: 16px; line-height: 24px; min-height: 44px; align-content: center; }
  .services-page .service-motion { font-size: 14px; line-height: 24px; }
  .services-page .service-closing { flex-wrap: wrap; align-items: flex-start; }
  .services-page .service-footer { font-size: 14px; line-height: 24px; }
  .services-page .service-footer .neon-ink { line-height: 24px; }
}
@media (max-width: 359px) {
  .hero .eyebrow { font-size: 11px; }
  .services-page .service-entry { grid-template-columns: 1fr; }
  .services-page .service-study { width: 96px; height: 64px; }
}
@media (forced-colors: active) {
  .closing-light { background: Canvas; color: CanvasText; }
  .closing-light .contact-title, .closing-light .contact-detail > p { color: CanvasText; }
  .closing-light .text-link .neon-ink::after { background: LinkText; }
}