/* Open-font typography and project-authored motion. See assets/ASSET-LICENSES.md. */
.render-fallback .reveal, .render-fallback .anim-in { opacity: 1 !important; transform: none !important; animation: none !important; }
.render-fallback .title-unit > span { transform: none !important; transition: none !important; }
:root { --font-display: "Newsreader", Georgia, serif; }
.lang-zh-hans { --font-display: "Noto Serif SC", "Songti SC", serif; }
.lang-zh-hant { --font-display: "Noto Serif TC", "Songti TC", serif; }
.lang-ja, .lang-ko { --font-display: var(--font); }
body { font-kerning: normal; }
:is(.hero h1, .page-head h1, .section-head h2, .prose h2, .about-delivery-card > h2) { font-family: var(--font-display); font-weight: 500; font-optical-sizing: auto; text-wrap: balance; }
.hero h1 { font-size: clamp(2.65rem, 4.4vw, 3.9rem); line-height: 1.16; letter-spacing: -.035em; }
.page-head h1 { line-height: 1.2; letter-spacing: -.025em; }
.section-head h2 { line-height: 1.25; letter-spacing: -.025em; }
:is(.lang-zh-hans, .lang-zh-hant) :is(.hero h1, .page-head h1, .section-head h2, .prose h2, .about-delivery-card > h2) { font-weight: 600; letter-spacing: .015em; line-height: 1.4; }
:is(.lang-zh-hans, .lang-zh-hant) .hero h1 { font-size: clamp(2.35rem, 3.7vw, 3.3rem); line-height: 1.45; }
:is(.lang-ja, .lang-ko) .hero h1 { font-weight: 600; letter-spacing: -.015em; line-height: 1.4; }
.hero .lead { max-width: 35em; line-height: 1.9; }
.prose { line-height: 1.95; }
.prose h2 { font-size: 1.7rem; line-height: 1.45; margin-top: 2em; }
.prose p { margin-bottom: 1.25em; }
.prose li { margin-bottom: .5em; }
:is(.main-nav a, .btn, .eyebrow) { font-weight: 600; }
.eyebrow { letter-spacing: .13em; }
.service-card h3, .post-card h3, .about-audience-copy h3 { font-weight: 600; letter-spacing: -.015em; }
:is(.lang-zh-hans, .lang-zh-hant, .lang-ja, .lang-ko) :is(.service-card h3, .post-card h3, .about-audience-copy h3) { letter-spacing: .01em; }
.section-head h2::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 22px; background: linear-gradient(90deg, #ce8740 0 68%, #6c999b 100%); transform-origin: left; transition: transform .95s var(--ease); }
.js.motion-enabled .section-head.reveal:not(.in) h2::after { transform: scaleX(0); }
.hero-brand-symbol { animation: brandPoise 8s ease-in-out infinite alternate; }
.hero-brand-art::before { animation: paperBreath 16s ease-in-out infinite; }
[data-ambient].ambient-offscreen .hero-brand-symbol,
[data-ambient].ambient-offscreen.hero-brand-art::before { animation-play-state: paused; }
.scroll-photo { overflow: hidden; }
.motion-enabled .scroll-photo > img { transform: translate3d(0, var(--photo-shift, 0px), 0) scale(1.08); transition: transform .7s var(--ease); }
.about-work-steps li > span { transition: background .5s, border-color .5s, color .5s; }
.motion-enabled .about-work-steps li.is-active > span { background: #e9c58a; border-color: #c59043; color: #432d13; }
@media (hover: hover) and (pointer: fine) {
  .motion-enabled :is(.service-card:hover, .post-card:hover, .about-audience-card:hover, .why-item:hover) .scroll-photo > img,
  .motion-enabled .scroll-photo:hover > img { transform: translate3d(0, var(--photo-shift, 0px), 0) scale(1.13); }
}
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .motion-enabled .tilt-card.in { transform: perspective(1000px) translate3d(0, var(--card-lift, 0px), 0) rotateX(var(--card-tilt-x, 0deg)) rotateY(var(--card-tilt-y, 0deg)); transition: opacity .8s var(--ease), transform .5s var(--ease), box-shadow .5s; transition-delay: 0s; }
  .motion-enabled .tilt-card.in:hover { --card-lift: -5px; box-shadow: 0 24px 45px -34px rgba(107, 67, 26, .5); }
}
@keyframes brandPoise {
  from { transform: translate3d(0, 3px, 0) rotate(-1.4deg); }
  to { transform: translate3d(0, -6px, 0) rotate(1.1deg); }
}
@keyframes paperBreath {
  0%, 100% { transform: rotate(-6deg) scale(.98); border-radius: 51% 45% 56% 38% / 49% 41% 53% 47%; }
  50% { transform: rotate(-1deg) scale(1.02); border-radius: 45% 53% 47% 48% / 52% 48% 49% 43%; }
}
.motion-paused .hero-brand-symbol, .motion-paused .hero-brand-art::before { animation: none; }
.motion-paused .scroll-photo > img { transform: none; transition: none; }
.motion-paused .tilt-card { --card-tilt-x: 0deg; --card-tilt-y: 0deg; --card-lift: 0px; }
.motion-paused .section-head h2::after { transition: none; }
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(2.4rem, 9vw, 3rem); line-height: 1.13; }
  :is(.lang-zh-hans, .lang-zh-hant) .hero h1 { font-size: clamp(1.8rem, 8.2vw, 2.1rem); line-height: 1.5; letter-spacing: .01em; }
  :is(.lang-ja, .lang-ko) .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); line-height: 1.45; }
  .page-head h1 { font-size: 2rem; }
  .section-head h2 { font-size: 1.9rem; }
  .section-head h2::after { margin-top: 16px; width: 48px; }
  .prose { line-height: 1.9; }
  .prose h2 { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-enabled) .hero-brand-symbol,
  html:not(.motion-enabled) .hero-brand-art::before { animation: none; }
  html:not(.motion-enabled) .scroll-photo > img { transform: none; transition: none; }
  html:not(.motion-enabled) .section-head h2::after { transition: none; }
}