:root {
  --ds-font-body: "DM Sans", Arial, sans-serif;
  --ds-font-heading: "Manrope", "DM Sans", Arial, sans-serif;
  --ds-size-body: 1rem;
  --ds-size-lead: clamp(1rem, 1.5vw, 1.1875rem);
  --ds-size-label: .8125rem;
  --ds-size-menu: .90625rem;
  --ds-size-h1: clamp(2rem, 4.15vw, 3.625rem);
  --ds-size-h2: clamp(1.625rem, 2.7vw, 2.5rem);
  --ds-size-h3: clamp(1.125rem, 1.65vw, 1.5rem);
  --ds-line-body: 1.65;
  --ds-line-heading: 1.15;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-section-space: clamp(34px, 5vw, 72px);
  --ds-section-compact: clamp(28px, 4vw, 50px);
  --ds-content: 1200px;
  --ds-menu-width: 1040px;
  --ds-gutter: clamp(16px, 3vw, 36px);
  --ds-measure: 72ch;
  --ds-radius-card: 16px;
  --ds-radius-compact: 12px;
  --ds-radius-button: 999px;
  --ds-touch: 44px;
  --ds-button-height: 48px;
  --ds-action: #006eaa;
  --ds-action-hover: #005782;
  --ds-focus: #0077ac;
  --ds-border: #d8eaf6;
  --ds-surface: #f2f8fd;
  --ds-motion-quick: 180ms;
  --ds-motion-reveal: 380ms;
  --ds-motion-ease: cubic-bezier(.2, .7, .2, 1);
  --content: var(--ds-content);
}

html[lang^="zh"] {
  --ds-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ds-font-heading: var(--ds-font-body);
  --ds-line-heading: 1.24;
}

html body {
  font-family: var(--ds-font-body);
  font-size: var(--ds-size-body);
  line-height: var(--ds-line-body);
}

main#main :is(h1,h2,h3) {
  font-family: var(--ds-font-heading);
  line-height: var(--ds-line-heading);
  overflow-wrap: anywhere;
}

main#main h1 { font-size: var(--ds-size-h1); }
main#main h2 { font-size: var(--ds-size-h2); }
main#main h3,
main#main :is(.work-project,.work-detail-info,.related-inner) h2 {
  font-size: var(--ds-size-h3);
}

main#main :is(.hero-intro,.service-hero-intro,.work-lead,.work-detail-lead,.legal-lead) {
  font-size: var(--ds-size-lead);
  line-height: var(--ds-line-body);
  max-width: var(--ds-measure);
}

main#main :is(.section-heading,.service-hero-copy,.contact-form-copy) > p:not(.eyebrow,.service-hero-intro),
main#main .ds-service-section .section-wrap > p {
  font-size: var(--ds-size-body);
  line-height: var(--ds-line-body);
  max-width: var(--ds-measure);
}

body .nav-shell,
main#main :is(.section-wrap,.work-wrap,.work-detail),
.site-footer .section-wrap {
  width: min(calc(100% - 2 * var(--ds-gutter)), var(--ds-content));
  margin-inline: auto;
}

main#main :is(.work-wrap,.work-detail) {
  max-width: none;
  padding-inline: 0;
}

main#main :is(.section-pad,.about-section,.about-faq-section,.about-growth-section) {
  padding-block: var(--ds-section-space);
}

main#main :is(.service-related,.ds-service-section) {
  padding-block: var(--ds-section-compact);
}

main#main :is(.outcome-card,.solution-card,.includes-panel,.local-service-card,.process-card,.service-seo-panel,.related-service-card,.related-inner,.about-value-card,.about-standard,.about-growth-card,.contact-office-card,.contact-direct-card,.contact-enquiry-form,.work-project,.work-detail-info section,.v48-case-card,.ds-card) {
  border-radius: var(--ds-radius-card);
}

main#main :is(.growth-card,.work-cta,.about-stats) {
  border-radius: var(--ds-radius-card);
}

main#main :is(.outcomes-grid,.solutions-grid,.related-service-grid,.contact-office-grid,.contact-direct-grid,.work-grid,.v48-case-grid,.ds-service-card-grid) {
  gap: var(--ds-space-4);
}

main#main .button,
main#main .work-cta a,
.site-header .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-button-height);
  padding: var(--ds-space-2) var(--ds-space-5);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-button);
  background: var(--ds-action);
  color: #fff;
  font-family: var(--ds-font-body);
  font-size: var(--ds-size-body);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: background var(--ds-motion-quick), box-shadow var(--ds-motion-quick);
}

main#main .button:hover,
main#main .work-cta a:hover,
.site-header .nav-cta:hover {
  background: var(--ds-action-hover);
  transform: none;
}

main#main .button.button-outline {
  border-color: var(--ds-border);
  background: #fff;
  color: var(--ds-action-hover);
  box-shadow: none;
}

main#main .button.button-outline:hover { background: var(--ds-surface); }

.site-header .nav-cta {
  min-height: var(--ds-touch);
  padding-inline: var(--ds-space-4);
}

:where(main, .site-header, .site-footer) :is(a,button,summary,input,select,textarea):focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 3px;
}

/* Shared hero and body for all service routes. */
main#main .ds-service-hero {
  padding-block: var(--ds-section-compact);
}

main#main .ds-service-hero-text {
  min-height: 0;
}

main#main .ds-service-hero-text {
  grid-template-columns: minmax(0, 1fr);
}

main#main .ds-service-hero-text .service-hero-copy {
  max-width: min(100%, 830px);
  padding-block: 0;
}

main#main .ds-service-subtitle {
  margin: var(--ds-space-4) 0 0;
  color: #173e68;
  font-size: var(--ds-size-h3);
  font-weight: 750;
  line-height: 1.35;
}

main#main .ds-service-section + .ds-service-section {
  border-top: 1px solid var(--ds-border);
}

main#main .ds-service-section h2 {
  margin: 0 0 var(--ds-space-4);
}

main#main .ds-service-section .section-wrap > p {
  margin: 0;
}

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

.ds-card {
  padding: var(--ds-space-5);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
}

.ds-service-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

.ds-service-related-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
  padding: var(--ds-space-2) var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-compact);
  color: var(--ds-action-hover);
}

.ds-service-related-links a:hover { background: var(--ds-surface); }

@media (max-width: 620px) {
  .ds-service-card-grid { grid-template-columns: minmax(0,1fr); }
  .ds-card { padding: var(--ds-space-4); }
  main#main :is(.button,.work-cta a) { padding-inline: var(--ds-space-4); }
}

@media (prefers-reduced-motion: no-preference) {
  .ds-revealed {
    animation: ds-enter var(--ds-motion-reveal) var(--ds-motion-ease) both;
  }

  @keyframes ds-enter {
    from { opacity: .78; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ds-revealed { animation: none; }
}

/* The support form uses the same container and card geometry. */
main#main .ebox-assessment {
  width: min(calc(100% - 2 * var(--ds-gutter)), var(--ds-content));
  max-width: none;
  margin: var(--ds-section-compact) auto var(--ds-section-space);
  padding: clamp(16px, 3vw, 36px);
  border-radius: var(--ds-radius-card);
}

main#main :is(.contact-enquiry-form,.ebox-assessment) :is(input:not([type="checkbox"]),select,textarea) {
  border-radius: var(--ds-radius-compact);
  font-family: var(--ds-font-body);
  font-size: var(--ds-size-body);
}

main#main .ds-service-faq {
  max-width: 830px;
  border-top: 1px solid var(--ds-border);
}

main#main .ds-service-faq .faq-answer p {
  font-size: var(--ds-size-body);
  line-height: var(--ds-line-body);
}

@media (prefers-reduced-motion: no-preference) {
  .ds-revealed:focus-within { animation: none; }
}

/* Service-specific cutouts share the same responsive hero frame. */
main#main .service-hero-grid:has(> .ds-hero-mascot) {
  min-height: 0;
}

main#main .ds-hero-mascot {
  display: grid;
  place-items: center;
}

main#main .ds-hero-mascot img {
  display: block;
  width: min(100%, 390px);
  height: auto;
}

@media (max-width: 820px) {
  main#main .ds-hero-mascot img {
    width: min(72vw, 270px);
  }
}