/* Web typography informed by Apple HIG. Native macOS point sizes are not CSS pixels. */
:root {
  --font-system: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --type-body: 1rem;
  --type-small: .875rem;
  --type-caption: .8125rem;
  --type-card: 1.125rem;
}
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html body { font-family: var(--font-system); font-size: var(--type-body); line-height: 1.7; font-weight: 400; letter-spacing: normal; }
html body :is(button, input, textarea, select) { font-family: inherit; }
html body :is(h1, h2, h3, h4) { font-weight: 600; letter-spacing: normal; overflow-wrap: break-word; }
html body :is(p, dd, a, label) { overflow-wrap: break-word; }

/* Homepage: reading sizes stay consistent at every breakpoint. */
html body.home-design .xf-hero-copy { width: min(100%, 620px); }
html body.home-design .xf-hero-copy h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.2; font-weight: 600; }
html body.home-design .xf-hero-copy p { font-size: var(--type-body); line-height: 1.75; }
html body.home-design :is(.xf-section-title h2, .xf-dark-head h2, .xf-about-copy h2) { font-size: 2rem; line-height: 1.3; font-weight: 600; }
html body.home-design :is(.xf-section-title p, .xf-dark-head p, .xf-about-copy p) { font-size: var(--type-body); line-height: 1.75; }
html body.home-design :is(.xf-section-title > b, .xf-dark-head b, .xf-about-copy > b) { font-size: var(--type-caption); line-height: 1.5; letter-spacing: .06em; font-weight: 600; color: #a85a31; }
html body.home-design .xf-dark-head b { color: #ffc59d; }
html body.home-design :is(.xf-service-card h3, .xf-case-card h3, .xf-blog-card h3) { font-size: var(--type-card); line-height: 1.45; font-weight: 600; }
html body.home-design :is(.xf-service-card p, .xf-blog-card p) { font-size: var(--type-small); line-height: 1.75; }
html body.home-design .xf-case-card p { font-size: var(--type-caption); line-height: 1.65; color: #c1c3c7; }
html body.home-design .xf-case-card h3 { margin: 16px 16px 6px; }
html body.home-design .xf-case-card p { margin: 0 16px 18px; }
html body.home-design .xf-blog-card small { font-size: var(--type-caption); line-height: 1.6; color: #686b73; }
html body.home-design .xf-blog-card { display: grid; grid-template-rows: auto 1fr; }
html body.home-design .xf-blog-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
html body.home-design .xf-blog-card div { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 24px; }
html body.home-design .xf-blog-card h3 { min-height: 2.9em; margin: 0; }
html body.home-design .xf-blog-card p { min-height: 3.5em; margin: 0; }
html body.home-design .xf-stats strong { font-size: 2.25rem; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
html body.home-design .xf-stats span { font-size: var(--type-caption); line-height: 1.6; }
html body.home-design .xf-stats { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body.home-design .xf-stats > div { min-width: 0; padding: 0; text-align: center; }
html body.home-design :is(.xf-services, .xf-case, .xf-about, .xf-blog, .xf-footer) { height: auto; min-height: 0; padding-top: 48px; padding-bottom: 48px; }
html body.home-design .xf-service-card { padding-top: 30px; padding-bottom: 24px; }
html body.home-design .xf-about-copy p { max-width: 65ch; margin: 16px 0 28px; }
html body.home-design :is(.xf-section-title p, .xf-about-copy p, .xf-service-card p, .xf-blog-card p, .xf-stats span) { color: #63676f; }
html body.home-design .xf-about-grid { align-items: center; }

/* Navigation, buttons, brand signatures and footers. */
html body.home-design .xf-menu { font-size: var(--type-small); gap: 32px; font-weight: 500; }
html body.home-design .xf-nav { gap: 28px; }
html body.home-design :is(.xf-nav-cta, .xf-btn, .xf-dark-head a, .xf-blog-head > a) { font-size: var(--type-small); font-weight: 600; height: auto; min-height: 40px; padding: 9px 20px; line-height: 1.4; }
html body.home-design .xf-brand strong { font-size: 1.125rem; line-height: 1.2; }
html body.home-design .xf-brand small { font-size: .75rem; line-height: 1.3; letter-spacing: .035em; }
html body.home-design .xf-footer h3 { font-size: var(--type-small); line-height: 1.5; font-weight: 600; }
html body.home-design :is(.xf-footer-brand > p, .xf-contact-line, .xf-footer a:not(.xf-brand)) { font-size: var(--type-caption); line-height: 1.75; color: #c1c3c7; }
html body.home-design .xf-footer-bottom { font-size: var(--type-caption); line-height: 1.6; color: #c1c3c7; }
html body.home-design .xf-footer-grid { grid-template-columns: 1.3fr .8fr .8fr .8fr 1.5fr; gap: 24px; }
html body.home-design .xf-footer-grid > div { min-width: 0; }
html body.home-design .xf-footer-grid > div:not(:first-child) { padding-left: 18px; }
html body:not(.home-design) .desktop-nav { font-size: var(--type-small); gap: 32px; font-weight: 500; }
html body:not(.home-design) .nav-cta { font-size: var(--type-small); line-height: 1.4; padding: 10px 18px; }
html body:not(.home-design) :is(.site-header .brand::after, .footer-brand::after) { font-family: var(--font-system); font-size: 1rem; font-weight: 600; line-height: 1.3; }
html body .brand-en { font-size: .75rem; line-height: 1.4; letter-spacing: .06em; }
html body :is(.footer-links, .footer-top > p) { font-size: var(--type-small); line-height: 1.7; }
html body .footer-bottom { font-size: var(--type-caption); line-height: 1.7; }

/* Internal pages, including the case study and contact form. */
html body :is(.inner-hero h1, .detail-hero h1, .contact-page h1) { font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1.25; font-weight: 600; letter-spacing: normal; }
html body :is(.inner-hero p.lead, .detail-hero .lead, .contact-page .lead) { font-size: 1.125rem; line-height: 1.75; }
html body :is(.split h2, .page-section h2, .section-heading h2) { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.35; font-weight: 600; letter-spacing: normal; }
html body .article-card h2 { font-size: 1.5rem; line-height: 1.45; }
html body :is(.copy, .principle p, .service-item p, .process-row p, .article-card p, .faq p) { font-size: var(--type-body); line-height: 1.8; }
html body :is(.principle h3, .service-item h3, .process-row h3, .case-caption h3, .office h3, .faq h3) { font-size: 1.25rem; line-height: 1.45; font-weight: 600; }
html body :is(.eyebrow, .service-item .service-index, .number, .process-row > span, .insight-meta, .visual-tag, .detail-facts dt) { font-family: var(--font-system); font-size: var(--type-caption); line-height: 1.6; font-weight: 500; letter-spacing: .04em; }
html body :is(.stat span, .case-caption p, .office p, .detail-facts dd) { font-size: var(--type-small); line-height: 1.7; }
html body .stat strong { font-size: 2.5rem; line-height: 1.2; font-weight: 600; letter-spacing: normal; font-variant-numeric: tabular-nums; }
html body .service-item a { position: static; display: inline-flex; margin-top: 16px; font-size: var(--type-small); line-height: 1.6; }
html body .service-item h3 { margin-top: 28px; }
html body .contact-form label { font-size: var(--type-small); line-height: 1.5; font-weight: 600; }
html body :is(.contact-form input, .contact-form textarea) { font-size: var(--type-body); line-height: 1.6; }
html body .contact-form .form-note { font-size: var(--type-caption); line-height: 1.65; color: #686b73; }
html body :is(.button, .text-link, .contact-details a) { font-size: var(--type-small); line-height: 1.5; font-weight: 600; }
html body :is(.copy, .principle p, .service-item p, .process-row p, .article-card p, .faq p) { --page-muted: #63676f; --muted: #63676f; }
html body .service-item.featured p { color: #fff; }
html body .split > * { min-width: 0; }
html body .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body .stat { min-width: 0; }
html body:not(.home-design) .page-section :is(.eyebrow, .service-index, .number, .process-row > span) { color: #9a4f2c; }
html body:not(.home-design) .service-item.featured .service-index { color: #fff; }

@media (max-width: 1100px) and (min-width: 761px) {
  html body.home-design .xf-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body.home-design .xf-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body.home-design .xf-footer-grid > div { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  html body.home-design .xf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.home-design :is(.xf-section-title h2, .xf-dark-head h2, .xf-about-copy h2) { font-size: 1.75rem; }
  html body.home-design .xf-footer-grid { grid-template-columns: 1fr; }
  html body.home-design .xf-footer-grid > div:not(:first-child) { padding-left: 0; }
  html body.home-design :is(.xf-mobile-nav a, .xf-footer a:not(.xf-brand)) { font-size: var(--type-small); }
  html body .contact-page h1 { font-size: 2.25rem; }
  html body.home-design .xf-hero-copy h1 { font-size: 2.25rem; }
  html body.home-design .xf-hero-inner { padding-bottom: 48px; }
  html body .detail-facts { grid-template-columns: 1fr; }
  html body .stat { padding-right: 10px; }
  html body .stat:last-child { padding-left: 10px; padding-right: 0; }
  html body .stat strong { font-size: 1.75rem; }
}