/* Public-page reading baseline: match the Jiumi practice-case statement.
   Loaded after page styles; admin typography remains independent. */
:root {
  --portal-copy-size: 18px;
}

[data-page] {
  --body: var(--portal-copy-size);
  --card-copy-size: var(--portal-copy-size);

  /* Reading rhythm is independent of the legacy --space-* scale. */
  --leading-page-title: 1.3;
  --leading-heading: 1.4;
  --leading-copy: 1.8;
  --leading-meta: 1.6;
  --gap-heading-subtitle: 12px;
  --gap-heading-content: 24px;
  --gap-title-copy: 8px;
  --gap-paragraph: 16px;
  --gap-list-item-y: 16px;
  --gap-copy-actions: 24px;
  --card-padding: 24px;
  --gap-submodule: 32px;
  --section-padding-y: 40px;
}

/* The homepage is the source of truth. These aliases apply only to the five
   public secondary pages and leave both home and admin untouched. */
:is(
  [data-page="services"],
  [data-page="overseas"],
  [data-page="park"],
  [data-page="contact"],
  [data-page="jiumi"]
) {
  --portal-page-title-size: clamp(36px, 3.4vw, 50px);
  --portal-section-title-size: 32px;
  --portal-card-title-size: 19px;
  --portal-lead-size: var(--portal-copy-size);
  --portal-meta-size: 15px;
  --portal-button-size: 16px;
  --portal-button-height: 48px;
  --portal-button-padding-y: 10px;
  --portal-button-padding-x: 20px;
}

[data-page]
  #app
  :is(
    p:not(.eyebrow),
    dd,
    li,
    figcaption,
    .industry-group span,
    .industry-group strong,
    .jiumi-highlight-text,
    .activity-title > span,
    .activity-detail,
    .park-prose
  ),
[data-page] .site-footer :is(p, a, button, .footer-bottom > span) {
  font-size: var(--portal-copy-size);
  line-height: var(--leading-copy);
}

/* Brand compositions, forms and special panels keep their own rhythm.
   :where() keeps these exclusions from increasing selector specificity. */
[data-page] #app .page-head h1,
[data-page]:not([data-page="home"]) #app .hero-copy h1 {
  line-height: var(--leading-page-title);
}

[data-page]
  #app
  :is(h2, h3, dt):not(
    :where(
      .hero *,
      .home-jiumi *,
      .note-box *,
      .form-card *,
      .contact-aside *,
      .company-facts *,
      .service-diagram *,
      .flow-diagram *,
      .showcase-panel *
    )
  ) {
  line-height: var(--leading-heading);
}

[data-page]
  #app
  :is(figcaption, time, p.note, .note, .figure-note):not(
    :where(
      .hero *,
      .home-jiumi *,
      .note-box *,
      .form-card *,
      .contact-aside *,
      .company-facts *,
      .service-diagram *,
      .flow-diagram *,
      .showcase-panel *
    )
  ) {
  line-height: var(--leading-meta);
}

[data-page]
  #app
  p
  + p:not(
    :where(
      .hero *,
      .home-jiumi *,
      .note-box *,
      .form-card *,
      .contact-aside *,
      .company-facts *,
      .service-diagram *,
      .flow-diagram *,
      .showcase-panel *,
      .industry-breakdown > p
    )
  ) {
  margin-top: var(--gap-paragraph);
}

[data-page]
  #app
  :is(.sec-head, .section-heading-row):not(:where(.home-jiumi *)) {
  margin-bottom: var(--gap-heading-content);
}
[data-page] #app .section-heading-row > .sec-head {
  margin-bottom: 0;
}
[data-page]
  #app
  .sec-head
  > :is(p, .lead):not(:where(.eyebrow, .home-jiumi *)) {
  margin-top: var(--gap-heading-subtitle);
}

/* True content cards only; never use .section article as a catch-all. */
[data-page]
  #app
  :is(
    .marketing-card,
    .info-grid > article,
    .local-card-body,
    .localization-card
  ) {
  padding: var(--card-padding);
}
[data-page]
  #app
  :is(
    .marketing-card,
    .info-grid > article,
    .local-card-body,
    .localization-card,
    .service-entry,
    .service-entry-body
  )
  > :is(h2, h3, dt) {
  margin-bottom: 0;
  padding-bottom: 0;
}
[data-page]
  #app
  :is(
    .marketing-card,
    .info-grid > article,
    .local-card-body,
    .localization-card,
    .service-entry,
    .service-entry-body
  )
  > :is(h2, h3, dt)
  + :is(p, dd, .industry-breakdown) {
  margin-top: var(--gap-title-copy);
}

/* A directory row owns its vertical padding; its wrapper adds no item padding.
   Existing horizontal padding and all grid/flex gaps remain independent. */
[data-page] #app :is(.home-service-grid .service-entry, .regional-list > div) {
  padding-block: var(--gap-list-item-y);
}
/* Legacy grouped service modules use the larger role, not item + module space. */
[data-page] #app :is(.service-index-group, .cooperation-list > div) {
  padding-block: var(--gap-submodule);
}
[data-page]
  #app
  .section
  .actions:not(
    :where(
      .hero *,
      .home-jiumi *,
      .note-box *,
      .form-card *,
      .contact-aside *,
      .company-facts *,
      .service-diagram *,
      .flow-diagram *,
      .showcase-panel *
    )
  ) {
  margin-top: var(--gap-copy-actions);
}

/* Navigable viewing entries share one treatment across public pages. */
[data-page] .portal-view-link {
  color: var(--gov-green, var(--primary));
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
[data-page] .portal-view-link:hover {
  color: var(--g900);
}
[data-page="home"] .park-service-links a:hover {
  text-decoration: none;
}

/* Secondary-page service guide uses the same card-title and helper levels as home. */
:is([data-page="services"], [data-page="overseas"], [data-page="park"])
  #app
  .service-guide
  .guide-label {
  gap: var(--gap-paragraph);
  margin-bottom: var(--gap-heading-content);
}
:is([data-page="services"], [data-page="overseas"], [data-page="park"])
  #app
  .service-guide
  .guide-label
  > span {
  font-size: var(--portal-card-title-size);
  font-weight: 700;
  line-height: var(--leading-heading);
}
:is([data-page="services"], [data-page="overseas"], [data-page="park"])
  #app
  .service-guide
  .guide-label
  > p {
  font-size: var(--portal-meta-size);
  line-height: var(--leading-meta);
}

/* Canonical secondary-page hierarchy mirrors the current homepage. */
:is(
    [data-page="services"],
    [data-page="overseas"],
    [data-page="park"],
    [data-page="contact"],
    [data-page="jiumi"]
  )
  #app
  .page-head {
  padding-block: var(--section-padding-y);
}
:is(
    [data-page="services"],
    [data-page="overseas"],
    [data-page="park"],
    [data-page="contact"],
    [data-page="jiumi"]
  )
  #app
  .page-head
  h1 {
  margin: 0;
  font-size: var(--portal-page-title-size);
  font-weight: 650;
  line-height: 1.4;
}
:is(
    [data-page="services"],
    [data-page="overseas"],
    [data-page="park"],
    [data-page="contact"],
    [data-page="jiumi"]
  )
  #app
  .page-head
  p {
  margin-top: var(--gap-heading-subtitle);
  font-size: var(--portal-copy-size);
  line-height: var(--leading-copy);
}
:is(
    [data-page="services"],
    [data-page="overseas"],
    [data-page="park"],
    [data-page="contact"],
    [data-page="jiumi"]
  )
  #app
  h2 {
  margin-block: 0;
  font-size: var(--portal-section-title-size);
  font-weight: 650;
  line-height: var(--leading-heading);
}
:is(
    [data-page="services"],
    [data-page="overseas"],
    [data-page="park"],
    [data-page="contact"],
    [data-page="jiumi"]
  )
  #app
  :is(h3, h4) {
  margin-block: 0;
  font-size: var(--portal-card-title-size);
  font-weight: 700;
  line-height: var(--leading-heading);
}
:is(
    [data-page="services"],
    [data-page="overseas"],
    [data-page="park"],
    [data-page="contact"],
    [data-page="jiumi"]
  )
  #app
  :is(h2, h3, h4)
  + :is(p, .lead) {
  margin-top: var(--gap-title-copy);
}
:is(
    [data-page="services"],
    [data-page="overseas"],
    [data-page="park"],
    [data-page="contact"],
    [data-page="jiumi"]
  )
  #app
  :is(
    .service-list dt,
    .capability-grid dt,
    .cooperation-list dt,
    .destination-grid dt,
    .regional-list dt,
    .asym-services dt,
    .partner-ecosystem dt,
    .guide-grid strong,
    .activity-title strong
  ) {
  font-size: var(--portal-card-title-size);
  font-weight: 700;
  line-height: var(--leading-heading);
}
:is(
    [data-page="services"],
    [data-page="overseas"],
    [data-page="park"],
    [data-page="contact"],
    [data-page="jiumi"]
  )
  :is(.site-header, #app)
  .btn {
  min-height: var(--portal-button-height);
  padding: var(--portal-button-padding-y) var(--portal-button-padding-x);
  font-size: var(--portal-button-size);
  line-height: 1.5;
}

/* /contact only: a compact selection-to-form task flow. */
[data-page="contact"] {
  --contact-choice-title-size: 28px;
  --contact-tab-title-size: 20px;
  --contact-form-title-size: 30px;
}
[data-page="contact"] #app .form-choice {
  margin-bottom: var(--gap-heading-content);
}
[data-page="contact"] #app .form-choice h2 {
  margin: 0;
  font-size: var(--contact-choice-title-size);
  font-weight: 700;
  line-height: var(--leading-heading);
}
[data-page="contact"] #app .form-choice p {
  max-width: 42em;
  margin-top: var(--gap-heading-subtitle);
  font-size: var(--portal-copy-size);
  line-height: var(--leading-copy);
  color: var(--muted);
}
[data-page="contact"] #app .tabs#form-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-heading-subtitle);
  margin: 0 0 var(--gap-heading-content);
}
[data-page="contact"] #app .tabs#form-tabs button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--gap-heading-subtitle);
  row-gap: 4px;
  align-content: center;
  min-height: 96px;
  padding: var(--gap-paragraph) var(--gap-copy-actions);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
  color: var(--ink);
  text-align: left;
  transform: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}
[data-page="contact"] #app .tabs#form-tabs .line-icon {
  grid-row: 1 / span 2;
  align-self: start;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  color: var(--muted);
}
[data-page="contact"] #app .tabs#form-tabs strong {
  font-size: var(--contact-tab-title-size);
  font-weight: 700;
  line-height: var(--leading-heading);
  color: var(--ink);
}
[data-page="contact"] #app .tabs#form-tabs span {
  max-width: 34em;
  font-size: 16px;
  font-weight: 400;
  line-height: var(--leading-meta);
  color: var(--muted);
}
[data-page="contact"] #app .tabs#form-tabs button:hover {
  border-color: var(--primary);
  background: var(--soft);
  box-shadow: none;
  transform: none;
}
[data-page="contact"] #app .tabs#form-tabs button[aria-selected="true"] {
  border-color: var(--primary);
  background: var(--soft);
  box-shadow: none;
}
[data-page="contact"]
  #app
  .tabs#form-tabs
  button[aria-selected="true"]
  :is(.line-icon, strong) {
  color: var(--primary);
}
[data-page="contact"] #app .tabs#form-tabs button[aria-selected="true"] span {
  color: var(--ink);
}
[data-page="contact"] #app .form-card {
  padding: var(--card-padding);
  border-color: var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  scroll-margin-top: calc(100px + var(--gap-heading-content));
}
[data-page="contact"] #app .form-card > h3 {
  margin: 0;
  font-size: var(--contact-form-title-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
[data-page="contact"] #app .form-card > .note {
  margin: var(--gap-title-copy) 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}
[data-page="contact"] #app .form-card > form {
  margin-top: var(--space-3);
}
[data-page="contact"] #app .form-card > form > .frow {
  row-gap: var(--gap-paragraph);
  column-gap: var(--gap-copy-actions);
  margin-top: 0;
}
[data-page="contact"] #app .form-card .fitem label {
  margin-bottom: var(--gap-title-copy);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
[data-page="contact"] #app .form-card .fitem label i {
  margin-left: 4px;
}
[data-page="contact"] #app .form-card :is(input, select, textarea) {
  min-height: 48px;
  padding: 10px var(--gap-heading-subtitle);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1.5;
}
[data-page="contact"] #app .form-card textarea {
  min-height: 112px;
}
[data-page="contact"] #app .form-card .submit-row {
  gap: 0;
  margin-top: var(--gap-copy-actions);
}

/* Home-only card heading; the catalogue and carousel behavior stay independent. */
[data-page="home"] #app .home-product-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-title-copy);
  margin-bottom: var(--gap-title-copy);
}
[data-page="home"] #app .home-product-heading h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
}
[data-page="home"] #app .home-product-tag {
  flex: 0 0 auto;
  max-width: 48%;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  line-height: var(--leading-meta);
  overflow-wrap: anywhere;
}

/* /services only: customs capability hierarchy and readable AI service blocks. */
[data-page="services"] #customs .customs-heading {
  max-width: 68em;
}
[data-page="services"] #customs .customs-heading .lead {
  max-width: 62em;
}
[data-page="services"] #customs .customs-capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--gap-submodule) + var(--gap-paragraph));
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-page="services"] #customs .customs-capabilities li {
  display: grid;
  grid-template-columns: var(--card-padding) minmax(0, 1fr);
  column-gap: var(--gap-title-copy);
  align-content: start;
  padding-block: var(--card-padding);
  border-top: 1px solid var(--line);
}
[data-page="services"] #customs .customs-capability-number {
  color: var(--gold);
  font-size: var(--portal-meta-size);
  font-weight: 700;
  line-height: var(--leading-heading);
}
[data-page="services"] #customs .customs-capabilities h3 {
  font-size: var(--portal-card-title-size);
  font-weight: 700;
}
[data-page="services"] #customs .customs-capabilities p {
  grid-column: 2;
  margin-top: var(--gap-title-copy);
}
[data-page="services"] #customs .customs-service-chain {
  margin-top: var(--gap-title-copy);
  padding-block: var(--card-padding);
  border-block: 1px solid var(--line);
}
[data-page="services"] #customs .customs-service-chain h3 {
  font-size: var(--portal-card-title-size);
  font-weight: 700;
}
[data-page="services"] #customs .customs-chain-steps {
  display: flex;
  align-items: stretch;
  margin: var(--gap-heading-subtitle) 0 0;
  padding: 0;
  list-style: none;
}
[data-page="services"] #customs .customs-chain-steps li {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
}
[data-page="services"] #customs .customs-chain-node {
  display: grid;
  min-width: 0;
  min-height: calc(var(--card-padding) * 3);
  flex: 1 1 auto;
  place-content: center;
  padding: var(--gap-paragraph);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: center;
}
[data-page="services"] #customs .customs-chain-node > strong {
  color: var(--g900);
  font-size: var(--portal-card-title-size);
  font-weight: 700;
  line-height: var(--leading-heading);
  text-wrap: pretty;
}
[data-page="services"] #customs .customs-chain-arrow {
  position: relative;
  width: var(--gap-heading-content);
  height: 1px;
  flex: 0 0 var(--gap-heading-content);
  margin-inline: var(--gap-title-copy);
  background: var(--primary);
}
[data-page="services"] #customs .customs-chain-arrow::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--gap-title-copy);
  height: var(--gap-title-copy);
  border-top: 1px solid var(--primary);
  border-right: 1px solid var(--primary);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}
[data-page="services"] #customs .customs-chain-note {
  max-width: 76em;
  margin-top: var(--gap-paragraph);
  font-size: var(--portal-meta-size);
  line-height: var(--leading-meta);
}
[data-page="services"] #customs .customs-detail-link {
  margin-top: var(--gap-heading-content);
}
[data-page="services"] #ai-services .ai-service-intro {
  display: grid;
  max-width: 44em;
}
[data-page="services"] #ai-services .ai-service-intro > * {
  margin: 0;
}
[data-page="services"] #ai-services .ai-service-intro > p + p {
  margin-top: var(--gap-paragraph);
}
[data-page="services"] #ai-services .scene-captions {
  margin-top: var(--gap-heading-content);
  gap: var(--gap-submodule);
}
[data-page="services"] #ai-services .scene-captions > div {
  padding: var(--gap-heading-content) 0 0;
}
[data-page="services"] #ai-services .scene-captions h3 {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-title-copy);
  margin-bottom: var(--gap-title-copy);
}
[data-page="services"] #ai-services .scene-captions p {
  line-height: var(--leading-copy);
}
[data-page="services"] #ai-services .partner-ecosystem {
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.85fr);
  gap: calc(var(--gap-submodule) + var(--gap-paragraph));
  margin-top: calc(var(--gap-submodule) + var(--gap-paragraph));
  padding-block: var(--gap-submodule);
  align-items: start;
}
[data-page="services"] #ai-services .partner-ecosystem h3 {
  font-size: clamp(30px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: var(--gap-heading-subtitle);
}
[data-page="services"] #ai-services .partner-ecosystem > div > p:last-child {
  max-width: 24em;
  color: var(--muted);
  font-size: var(--portal-copy-size);
  line-height: 1.9;
}
[data-page="services"] #ai-services .partner-ecosystem dl > div {
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr);
  gap: var(--gap-heading-content);
  padding-block: var(--gap-list-item-y);
  align-items: baseline;
}
[data-page="services"] #ai-services .partner-ecosystem dt {
  display: grid;
  grid-template-columns: var(--card-padding) minmax(0, 1fr);
  gap: var(--gap-title-copy);
  font-size: var(--portal-card-title-size);
  font-weight: 600;
}
[data-page="services"] #ai-services .partner-ecosystem dt span {
  min-width: 0;
  font-weight: 400;
  color: var(--muted);
}
[data-page="services"] #ai-services .partner-ecosystem dd {
  font-size: var(--portal-copy-size);
  margin: 0;
}
@media (max-width: 1100px) {
  [data-page="services"] #customs .customs-chain-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap-heading-content);
    row-gap: calc(var(--gap-submodule) + var(--gap-paragraph));
  }
  [data-page="services"] #customs .customs-chain-steps li {
    position: relative;
  }
  [data-page="services"]
    #customs
    .customs-chain-steps
    li:nth-child(3)
    .customs-chain-arrow {
    position: absolute;
    top: calc(100% + var(--gap-title-copy));
    left: 50%;
    width: 1px;
    height: var(--gap-submodule);
    margin: 0;
  }
  [data-page="services"]
    #customs
    .customs-chain-steps
    li:nth-child(3)
    .customs-chain-arrow::after {
    top: auto;
    right: 50%;
    bottom: 0;
    transform: translateX(50%) rotate(135deg);
  }
  [data-page="services"] #customs .customs-chain-steps li:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
    flex-direction: row-reverse;
  }
  [data-page="services"]
    #customs
    .customs-chain-steps
    li:nth-child(4)
    .customs-chain-arrow {
    transform: rotate(180deg);
  }
  [data-page="services"] #customs .customs-chain-steps li:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
  }
  [data-page="services"] #ai-services .partner-ecosystem {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-heading-content);
  }
  [data-page="services"] #ai-services .partner-ecosystem h3 {
    font-size: clamp(28px, 4vw, 32px);
  }
}
@media (max-width: 1023px) {
  :is(
    [data-page="services"],
    [data-page="overseas"],
    [data-page="park"],
    [data-page="contact"],
    [data-page="jiumi"]
  ) {
    --portal-page-title-size: 42px;
  }
}
@media (max-width: 767px) {
  [data-page="services"] #customs .customs-capabilities {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-page="services"] #customs .customs-capabilities li {
    grid-template-columns: var(--card-padding) minmax(0, 1fr);
  }
  [data-page="services"] #customs .customs-service-chain {
    margin-top: 0;
  }
  [data-page="services"] #customs .customs-chain-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  [data-page="services"] #customs .customs-chain-steps li,
  [data-page="services"] #customs .customs-chain-steps li:nth-child(4),
  [data-page="services"] #customs .customs-chain-steps li:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
    flex-direction: column;
  }
  [data-page="services"] #customs .customs-chain-node {
    width: 100%;
    min-height: 0;
  }
  [data-page="services"] #customs .customs-chain-arrow,
  [data-page="services"]
    #customs
    .customs-chain-steps
    li:nth-child(3)
    .customs-chain-arrow,
  [data-page="services"]
    #customs
    .customs-chain-steps
    li:nth-child(4)
    .customs-chain-arrow {
    position: relative;
    top: auto;
    left: auto;
    width: 1px;
    height: var(--gap-submodule);
    flex-basis: var(--gap-submodule);
    margin: var(--gap-title-copy) 0;
    transform: none;
  }
  [data-page="services"] #customs .customs-chain-arrow::after,
  [data-page="services"]
    #customs
    .customs-chain-steps
    li:nth-child(3)
    .customs-chain-arrow::after {
    top: auto;
    right: 50%;
    bottom: 0;
    transform: translateX(50%) rotate(135deg);
  }
  [data-page="services"] #ai-services .scene-captions {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-page="services"] #ai-services .partner-ecosystem dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-title-copy);
  }
  [data-page="services"] #ai-services .partner-ecosystem dd {
    padding-left: calc(var(--card-padding) + var(--gap-title-copy));
  }
}

/* Keep the accessibility control effective despite page-level overrides. */
body.reading-mode {
  --portal-copy-size: 20px;
}

/* Use the available screen width, with a reading margin at either edge. */
[data-page] .wrap {
  max-width: 2160px;
  padding-inline: clamp(24px, 4vw, 96px);
}

[data-page="home"] {
  --section-gap: var(--section-padding-y);
}
[data-page] .section {
  padding-block: var(--section-padding-y);
}
[data-page="home"] .hero-grid {
  padding-block: 40px;
  min-height: 440px;
}

/* The test environment footer uses two readable text rows. */
[data-page] .site-footer {
  padding: 24px 0 12px;
}
[data-page] .site-footer .footer-grid {
  padding-block: 0;
}
[data-page] .site-footer :is(p, a, button) {
  line-height: 1.6;
}
[data-page] .footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-top: 12px;
}
[data-page] .site-footer .footer-bottom > span {
  grid-column: 1;
  justify-self: start;
  font-size: var(--portal-meta-size, 15px);
  line-height: 1.45;
}
@media (min-width: 1280px) {
  [data-page] .site-footer .footer-bottom > span:first-child {
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  [data-page] {
    --gap-heading-subtitle: 8px;
    --gap-heading-content: 20px;
    --gap-title-copy: 8px;
    --gap-paragraph: 12px;
    --gap-list-item-y: 12px;
    --gap-copy-actions: 20px;
    --card-padding: 20px;
    --gap-submodule: 24px;
    --section-padding-y: 32px;
  }
  :is(
    [data-page="services"],
    [data-page="overseas"],
    [data-page="park"],
    [data-page="contact"],
    [data-page="jiumi"]
  ) {
    --portal-page-title-size: clamp(28px, 7.5vw, 38px);
    --portal-section-title-size: 28px;
    --portal-card-title-size: 19px;
    --portal-meta-size: 14px;
  }
  [data-page="contact"] {
    --contact-choice-title-size: 24px;
    --contact-tab-title-size: 19px;
    --contact-form-title-size: 26px;
  }
  [data-page="contact"] #app .tabs#form-tabs {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-paragraph);
    margin-bottom: var(--gap-heading-content);
  }
  [data-page="contact"] #app .tabs#form-tabs button {
    min-height: 88px;
    padding: var(--gap-paragraph) var(--gap-paragraph);
  }
  [data-page="contact"] #app .tabs#form-tabs .line-icon {
    width: 26px;
    height: 26px;
  }
  [data-page="contact"] #app .form-card > form > .frow {
    column-gap: 0;
  }
  [data-page] .footer-bottom {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    gap: 4px;
  }
  [data-page] .footer-bottom > :is(span, a) {
    grid-column: 1;
    justify-self: center;
  }
  [data-page] .site-footer .footer-bottom > span {
    font-size: 14px;
  }
  :root {
    --portal-copy-size: 17px;
  }
  [data-page] .wrap {
    padding-inline: 20px;
  }
  [data-page="home"] .hero-grid {
    padding-block: 32px;
    min-height: 0;
  }
}

/* Services marketing: four overview cards with native hash destinations. */
[data-page="services"] #marketing .marketing-services-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--gap-submodule);
}
[data-page="services"] #marketing .marketing-services-list > article {
  min-width: 0;
  padding: var(--gap-submodule) var(--card-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  scroll-margin-top: var(--gap-heading-content);
}
[data-page="services"] #marketing .marketing-services-list h3 {
  display: flex;
  align-items: baseline;
  gap: var(--gap-paragraph);
  color: var(--ink);
  font-size: clamp(24px, 2vw, 28px);
  font-weight: 700;
}
[data-page="services"] #app #marketing .marketing-service-intro {
  margin-top: var(--gap-paragraph);
  max-width: 34em;
  font-size: var(--portal-copy-size);
  color: var(--muted);
}
[data-page="services"] #marketing .marketing-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-title-copy);
  margin: var(--gap-heading-subtitle) 0 0;
  padding: 0;
}
[data-page="services"] #app #marketing .marketing-service-tags > span {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--portal-meta-size);
  line-height: var(--leading-meta);
  color: var(--muted);
}
@media (max-width: 1279px) {
  [data-page="services"] #marketing .marketing-services-list {
    gap: var(--gap-heading-content);
  }
}
@media (max-width: 767px) {
  [data-page="services"] #marketing .marketing-services-list {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  [data-page="services"] #marketing .marketing-services-list > article {
    scroll-margin-top: calc(var(--section-padding-y) * 2);
  }
}

/* Jiumi's capabilities are an overview, independent of marketing tabs. */
[data-page="jiumi"] .jiumi-capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  list-style: none;
}
[data-page="jiumi"] .jiumi-capabilities > li {
  display: grid;
  min-height: 100%;
  min-width: 0;
  align-content: start;
  padding: var(--card-padding);
}
[data-page="jiumi"] .jiumi-capabilities > li:not(:nth-child(3n)) {
  border-right: 1px solid var(--line);
}
[data-page="jiumi"] .jiumi-capabilities > li:nth-child(n + 4) {
  border-top: 1px solid var(--line);
}
[data-page="jiumi"] .capability-number {
  display: block;
  margin-bottom: var(--gap-title-copy);
  color: var(--gold);
  font-size: var(--portal-meta-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
[data-page="jiumi"] #app .jiumi-capabilities h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--portal-card-title-size);
  line-height: var(--leading-heading);
}
[data-page="jiumi"] #app .jiumi-capabilities .capability-value {
  margin-top: var(--gap-title-copy);
  font-weight: 500;
}
[data-page="jiumi"] #app .jiumi-capabilities .capability-detail {
  margin-top: var(--gap-title-copy);
  color: var(--muted);
}
@media (max-width: 1279px) {
  [data-page="jiumi"] .jiumi-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-page="jiumi"] .jiumi-capabilities > li:not(:nth-child(3n)) {
    border-right: 0;
  }
  [data-page="jiumi"] .jiumi-capabilities > li:nth-child(n + 4) {
    border-top: 0;
  }
  [data-page="jiumi"] .jiumi-capabilities > li:nth-child(odd) {
    border-right: 1px solid var(--line);
  }
  [data-page="jiumi"] .jiumi-capabilities > li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 767px) {
  [data-page="jiumi"] .jiumi-capabilities {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  [data-page="jiumi"] .jiumi-capabilities > li:nth-child(odd) {
    border-right: 0;
  }
  [data-page="jiumi"] .jiumi-capabilities > li:nth-child(n + 2) {
    border-top: 1px solid var(--line);
  }
}