/* MakeMoro: a light editorial finishing pass, keeping the existing identity.
   Guided by unslop by Damir Sokolovsky (@heydamir), CC BY 4.0.
   Film scenes, material treatments and their clocks remain in their owners. */

/* 1. Rhythm: repeat the same small intervals without moving the composition. */
/* Hide the gap cards immediately; stagger only their entrance. Otherwise a
   fast scroll can catch later cards before their delayed fade-out completes. */
@media (prefers-reduced-motion: no-preference) {
  .mm-motion .gap-grid > .mm-reveal:not(.is-in) { transition: none; }
}
.home-hero { gap: 72px; padding-block: 72px 64px; }
.hero-description { margin-top: 28px; }
.hero-buttons { gap: 24px; margin-top: 32px; }
.section-head { gap: 64px; margin-bottom: 40px; }
.section-number { margin-bottom: 24px; }
.project-caption { gap: 24px; padding-top: 20px; align-items: start; }
.offer-grid { gap: 24px; }
.offer-card { padding: 32px 28px; }
.footer-main { padding-block: 48px 56px; }

/* 2. Quiet chrome: keep the paper, ink and terracotta palette. */
.site-header.is-scrolled {
  background: rgba(245, 242, 234, .96);
  box-shadow: 0 1px 0 rgba(41, 45, 40, .04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.offer-card:not(.is-primary) { background: rgba(252, 250, 245, .55); }
.founder-name .mm-monogram { box-shadow: none; }
.cta-section::before { content: none; }
.cta-section::after { background: rgba(245, 242, 234, .16); }

/* 3–5. Existing marks and copy stay; make the reading hierarchy legible. */
.main-nav { font-size: 13px; gap: 32px; }
.language-menu { font-size: 12px; }
.eyebrow { font-size: 12px; letter-spacing: .01em; margin-bottom: 24px; }
.hero-description { max-width: 448px; font-size: 15px; line-height: 1.8; }
.hero-image figcaption { font-size: 12px; padding-top: 16px; }
.image-type { font-size: 10px; margin-top: 8px; }
.section-head p:not(.section-number) { font-size: 14px; line-height: 1.8; }
.project-caption h3 { letter-spacing: 0; line-height: 1.35; }
.project-caption > span { font-size: 11px; line-height: 1.6; padding-top: 3px; }
.project-hook { font-size: 13px; line-height: 1.8; }
.project-capabilities { gap: 8px 16px; margin-top: 16px; padding-top: 12px; }
.project-capabilities li { font-size: 11px; line-height: 1.7; }
.offer-meta { font-size: 12px !important; letter-spacing: 0; }
.offer-card.is-primary .offer-meta { color: #e1af94 !important; }
.founder-name span:not(.mm-monogram) {
  padding: 0; border: 0; border-radius: 0;
  font-size: 12px; letter-spacing: 0; text-transform: none;
}
.footer-links > div { font-size: 12px; gap: 8px; }
.footer-links > div > span { font-size: 11px; margin-bottom: 12px; }
.footer-bottom { font-size: 11px; padding-block: 20px; }
.section-number, .row-number, .directory-number, .offer-step,
.metric-strip dt { font-variant-numeric: tabular-nums; }
:lang(zh) .eyebrow { letter-spacing: .02em; }
:lang(zh) .project-caption h3 { line-height: 1.6; }

/* 6–7. Align related controls and give their states a consistent finish.
   The studio's square-cut shapes are intentional; do not turn them to pills. */
.button { min-height: 48px; padding: 12px 20px; gap: 28px; font-size: 12px; }
.button span { font-size: 18px; line-height: 1; }
.text-link { gap: 20px; padding-block: 8px; text-underline-offset: 4px; }
.button::after, .project-visual::before, .project-visual::after { content: none; }
.button, .text-link, .main-nav > a, .footer-links a {
  transition: color 160ms ease-out, background-color 160ms ease-out,
    border-color 160ms ease-out;
}
.offer-card { transition: border-color 180ms ease-out; }
.offer-card:hover { translate: none; box-shadow: none; border-color: #a9ac9e; }
.offer-card.is-primary:hover { border-color: var(--ink); }
.project-card a:hover .project-open { translate: 0 0; }
.project-open { transition: color 160ms ease-out, background-color 160ms ease-out; }
.insight-row { transition: color 180ms ease-out; }
a.insight-row:hover { padding-left: 0; }
.service-row { transition: background-color 180ms ease-out; }
.service-row:hover { padding-left: 0; }
.field input, .field select, .field textarea {
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #a9ac9e; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); background-color: var(--white);
}
.mm-film-controls { gap: 12px; font-size: 12px; }
.mm-film-toggle { width: 44px; height: 44px; }

/* 8–9. Richness stays inside the existing films; remove incidental UI loops. */
@media (prefers-reduced-motion: no-preference) {
  .mm-dawn-halo { animation: mm-sunrise 2.2s var(--mm-ease-out) 1.25s forwards; }
}
@media (hover: hover) {
  .project-card a:focus-visible .project-open { background: var(--accent); color: var(--paper); }
}

@media (min-width: 1600px) {
  .home-hero { padding-block: 88px 72px; }
}
@media (max-width: 1150px) {
  .home-hero { gap: 40px; }
  .main-nav { gap: 24px; }
}
@media (max-width: 1000px) {
  .home-hero { gap: 32px; }
  .hero-description { font-size: 14px; margin-top: 24px; }
  .section-head { gap: 40px; }
  .project-caption { gap: 16px; }
}
@media (max-width: 720px) {
  .home-hero { gap: 32px; padding-block: 40px; }
  .hero-description { font-size: 14px; line-height: 1.85; }
  .hero-buttons { margin-top: 28px; gap: 20px; }
  .eyebrow { font-size: 11px; line-height: 1.8; }
  .hero-image figcaption { font-size: 11px; padding-top: 12px; }
  .section-head { gap: 24px; margin-bottom: 32px; }
  .section-head p:not(.section-number) { font-size: 13px; }
  .section-number { margin-bottom: 16px; }
  .project-caption { padding-top: 16px; gap: 8px; }
  .project-caption > span { font-size: 11px; padding-top: 0; }
  .project-hook { font-size: 13px; }
  .project-capabilities { gap: 8px 12px; }
  .offer-card { padding: 28px 24px; }
  .cta-section { padding: 40px 24px 48px; gap: 24px; }
  .cta-section::after { left: 24px; right: 24px; bottom: 24px; }
  .footer-main { padding-block: 32px 40px; }
  .footer-links { gap: 32px; }
  .footer-links > div { font-size: 12px; max-width: 58%; }
  .footer-bottom { font-size: 11px; line-height: 1.7; }
  .menu-toggle { min-height: 44px; font-size: 12px; }
  .language-menu summary { min-height: 44px; font-size: 12px; }
  .module-grid p, .process-grid p { font-size: 13px; }
  .image-caption, .concept-hero figcaption p { font-size: 11px; }
}
@media (max-width: 440px) {
  .project-caption { flex-direction: column; align-items: start; }
  .project-caption > span { max-width: 100%; text-align: left; }
  .button { padding: 12px 16px; gap: 24px; }
  .text-link { font-size: 12px; gap: 16px; }
  .header-actions { gap: 12px; }
}