/* Owner 2026-10-10: update project Hero design on phones only.
   At 768px and above this stylesheet has no active rules. */
@media (max-width: 767px) {
  html .project-page :is(.project-hero, .project-feature--detail)[data-section="hero"] {
    display: grid;
    grid-template-columns: 24px minmax(0,1fr) 24px;
    grid-template-rows: 88px minmax(0,1fr) auto auto auto auto auto 16px auto 10px auto;
    height: auto;
    min-height: calc(100svh - 64px);
    max-height: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  html .project-page .project-hero[data-section="hero"] { grid-template-rows: 88px minmax(180px,1fr) auto auto auto auto auto 16px auto 10px auto; }
  html .project-page [data-section="hero"] :is(.project-hero__bg, .project-hero__overlay, .project-feature__image, .project-feature__shade) {
    grid-column: 1 / -1;
    grid-row: 1 / 11;
    position: static;
    width: 100%;
    height: 100%;
    min-height: 0;
    inset: auto;
    transform: none;
  }
  html .project-page .project-hero[data-section="hero"] .project-hero__bg picture { display: block; height: 100%; }
  html .project-page .project-hero[data-section="hero"] .project-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
  html .project-page .project-feature--detail[data-section="hero"] .project-feature__image { object-position: 60% center; }
  html .project-page [data-section="hero"] :is(.project-hero__overlay, .project-feature__shade) {
    background: linear-gradient(180deg, rgba(13,25,20,.52), rgba(13,25,20,.06) 24%, rgba(13,25,20,.1) 40%, rgba(13,25,20,.6) 60%, rgba(13,25,20,.9) 100%);
  }
  html .project-page [data-section="hero"] :is(.project-hero__content, .project-feature__inner, .project-feature__copy) { display: contents; }
  html .project-page [data-section="hero"] :is(.project-launch-banner, .scroll-indicator, .project-feature__secondary) { display: none !important; }
  html .project-page [data-section="hero"] .project-feature__launch-inline:not([hidden]) { display: inline; }
  html .project-page [data-section="hero"] :is(.project-hero__eyebrow, .project-hero__title, .project-hero__tagline, .project-feature__eyebrow, .project-feature__title, .project-feature__tagline, .project-feature__subtitle) {
    grid-column: 2;
    justify-self: center;
    width: 100%;
    max-width: 440px;
    margin: 0;
    text-align: center;
    color: #fff;
    letter-spacing: 0;
    text-transform: none;
    z-index: 1;
  }
  html .project-page [data-section="hero"] :is(.project-hero__eyebrow, .project-feature__eyebrow) { grid-row: 3; margin-bottom: 10px; font: 400 12px/1.5 var(--sans); }
  html .project-page [data-section="hero"] .project-launch-badge { max-width: 100%; white-space: normal; }
  html .project-page [data-section="hero"] :is(.project-hero__title, .project-feature__title) { grid-row: 4; margin-bottom: 12px; font-size: 42px; line-height: 1.08; overflow-wrap: anywhere; }
  html[lang="zh-TW"] .project-page [data-section="hero"] .project-hero__title { font-family: 'Songti TC', 'Noto Serif TC', 'PMingLiU', serif; }
  html .project-page [data-section="hero"] :is(.project-hero__tagline, .project-feature__tagline) { grid-row: 5; font: 400 23px/1.35 var(--sans); text-wrap: balance; }
  html .project-page [data-section="hero"] .project-feature__subtitle { grid-row: 6; margin-top: 8px; font-size: 15px; line-height: 1.5; }
  html .project-page [data-section="hero"] :is(.project-brochure__actions, .project-feature__actions, .project-hero__content > .hero-cta) {
    grid-column: 2;
    grid-row: 7;
    justify-self: center;
    align-self: auto;
    width: 100%;
    max-width: 320px;
    margin: 22px 0 0;
    z-index: 1;
  }
  html .project-page [data-section="hero"] :is(.project-brochure__actions, .project-feature__actions) { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  html .project-page [data-section="hero"] :is(.hero-cta, .project-feature__primary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 50px;
    padding: 12px 24px;
    border: 1px solid #fff;
    border-radius: 2px;
    background: #fff;
    color: #133b2d;
    font: 500 15px/1.4 var(--sans);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
  }
  html .project-page [data-section="hero"] .project-brochure__download-group { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0; width: auto; }
  html .project-page [data-section="hero"] .project-brochure__download { width: auto; min-height: 44px; padding: 0; border: 0; background: transparent; font: 400 14px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 6px; }
  html .project-page [data-section="hero"] .project-brochure__download svg { display: none; }
  html .project-page [data-section="hero"] .project-brochure__meta { font-size: 14px; line-height: 1.5; text-shadow: none; }
  html[lang="zh-TW"] .project-page [data-section="hero"] .project-brochure__meta::before { content: "（"; }
  html[lang="zh-TW"] .project-page [data-section="hero"] .project-brochure__meta::after { content: "）"; }
  html:not([lang="zh-TW"]) .project-page [data-section="hero"] .project-brochure__meta { margin-left: 6px; }
  html:not([lang="zh-TW"]) .project-page [data-section="hero"] .project-brochure__meta::before { content: "("; }
  html:not([lang="zh-TW"]) .project-page [data-section="hero"] .project-brochure__meta::after { content: ")"; }
  html .project-page [data-section="hero"] .project-feature__caption { grid-column: 2; grid-row: 9; position: static; justify-self: center; width: max-content; max-width: 100%; margin: 0; transform: none; text-align: center; }
  html .project-page [data-section="hero"] :is(.kpi-strip--hero, .project-feature__facts) {
    grid-column: 1 / -1;
    grid-row: 11;
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 16px;
    min-height: 56px;
    max-width: none;
    margin: 0;
    padding: 10px 20px;
    border-top: 1px solid rgba(255,255,255,.18);
    background: #1f2f27;
    text-align: center;
    z-index: 1;
  }
  html .project-page [data-section="hero"] .kpi-strip--hero .kpi-card { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
  html .project-page [data-section="hero"] .kpi-strip--hero .kpi-card__value { margin: 0; color: #fff; font: 500 14px/1.5 var(--sans); white-space: normal; }
  html .project-page [data-section="hero"] .kpi-strip--hero .kpi-card__label { margin-top: 1px; color: #f0f3ef; font: 400 11px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
  html .project-page [data-section="hero"] .project-feature__facts { row-gap: 2px; column-gap: 0; }
  html .project-page [data-section="hero"] .project-feature__facts > div:nth-child(n) { grid-column: auto; display: flex; align-items: baseline; }
  html .project-page [data-section="hero"] .project-feature__facts > div:nth-child(n) + div::before { content: "·"; margin: 0 10px; color: rgba(255,255,255,.6); }
  html .project-page [data-section="hero"] .project-feature__facts dt { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html .project-page [data-section="hero"] .project-feature__facts > div dd[data-feature-fact] { font: 500 15px/1.5 var(--sans); white-space: nowrap; }
  html .project-page [data-section="hero"] .project-feature__fact-unit { display: inline; }
  html:not([lang="zh-TW"]) .project-page [data-section="hero"] .project-feature__facts > div dd[data-feature-fact] { font-size: 14px; }
  html:not([lang="zh-TW"]) .project-page [data-section="hero"] .project-feature__facts > div:first-child { flex-basis: 100%; justify-content: center; }
  html:not([lang="zh-TW"]) .project-page [data-section="hero"] .project-feature__facts > div:nth-child(2)::before { display: none; }
  /* Preserve the existing availability label where the original renderer has no inline noun. */
  html:not([lang="zh-TW"]) .project-page [data-section="hero"] .project-feature__facts > div:has([data-feature-fact="available"]):not(:has(.project-feature__fact-unit)) dt {
    position: static; width: auto; height: auto; margin: 0 4px 0 0;
    overflow: visible; clip-path: none; white-space: normal;
    font: 400 12px/1.5 var(--sans);
  }
}