/* Shared fluid layout for the hosted site and the standalone HTML copy. */
:root {
  --page-gutter: max(clamp(1rem, 4vw, 4rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
html { -webkit-text-size-adjust: 100%; }
.wrap {
  width: min(1280px, calc(100% - var(--page-gutter) * 2));
}
.site-header {
  width: min(1360px, calc(100% - var(--page-gutter) * 2));
  min-height: 76px;
  height: auto;
  padding-block: 24px;
}
.site-header > *, .section-head > *, .scenario-panel > *,
.flow-lanes > *, .cert-slide > *, .case-detail-header > *,
.case-detail-body > *, .about-hero > *, .journey article > *,
.method-heading > *, .service-units > *, .faq-section > * {
  min-width: 0;
}
.hero {
  display: grid;
  grid-template-areas: "copy" "footer";
  align-content: space-between;
  gap: clamp(2rem, 4vw, 4rem);
  min-height: clamp(650px, 53vw, 780px);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: 1.75rem;
  isolation: isolate;
}
.hero-copy { grid-area: copy; min-width: 0; }
.hero-photo {
  inset: 0 0 auto auto;
  width: 70%;
  max-width: 100%;
  height: calc(100% - 45px);
}
.hero h1 {
  font-size: clamp(2.75rem, 6vw, 5.65rem);
  line-height: 1.28;
}
.hero-role { font-size: .875rem; }
.hero-intro { font-size: 1rem; }
.hero-bottom {
  grid-area: footer;
  position: relative;
  inset: auto;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-bottom > span { line-height: 1.8; }
.hero-bottom a { flex-shrink: 0; }
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metrics > div { min-width: 0; }
.metrics strong { font-size: clamp(2.5rem, 4.3vw, 3.5rem); }
.metrics p { font-size: .875rem; }
.section { padding-top: clamp(3.5rem, 8vw, 7rem); }
.section-head h2, .method-heading h2, .about-teaser h2 {
  font-size: clamp(2rem, 3.9vw, 3.25rem);
}
.scenario-text p, .method-heading p, .method-step p,
.case-card p, .cert-copy > p:not(.eyebrow), .cert-purpose p,
.service-units p, .faq-section details p, .about-teaser p,
.contact-section p, .work-directory p { font-size: 1rem; }
.case-card h3 { min-height: 0; }
.rail-tools { flex-wrap: wrap; }
.rail-controls { margin-left: auto; }
.rail-hint { flex: 1 1 250px; max-width: none; }
.cert-copy { padding: clamp(1.375rem, 3vw, 2.5rem); }
.cert-copy h3 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); }
.registration, .work-directory small, #image-caption { overflow-wrap: anywhere; }
.inner-hero h1 { font-size: clamp(2.15rem, 5vw, 4.25rem); }
.case-detail-header h1 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.case-detail-stat { min-width: 0; }
.case-detail-stat strong { font-size: clamp(2.8rem, 5vw, 4.7rem); }
.case-detail-stat .word-stat { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.inner-hero .lead { font-size: clamp(1rem, 1.8vw, 1.125rem); }
.case-detail-image img { max-height: min(660px, 80svh); }
.dialog-actions { flex-wrap: wrap; }
dialog {
  max-width: calc(100% - 24px);
  max-height: calc(100dvh - 24px);
  padding: clamp(1.25rem, 4vw, 2.375rem);
  overscroll-behavior: contain;
}
.dialog-qr { max-width: 100%; }
#image-dialog { max-width: calc(100% - 24px); }
.flow-scrubber input { min-height: 36px; }
@media (min-width: 961px) {
  .site-header > .mobile-menu { display: none; }
}

/* Small laptops and portrait tablets keep a calm two-column composition. */
@media (min-width: 701px) and (max-width: 1100px) {
  .hero-copy { width: 78%; }
  .hero h1 { font-size: clamp(2.9rem, 6.1vw, 4.15rem); }
  .hero { min-height: 640px; }
  .hero-photo { width: 73%; }
  .hero-photo img { object-position: 66% center; }
  .scenario-panel { gap: 28px; }
  .scenario-text h3 { font-size: clamp(1.75rem, 3vw, 2.3rem); }
  .case-detail-header { grid-template-columns: minmax(0, 1fr) minmax(150px, .33fr); }
  .case-detail-body { grid-template-columns: 160px minmax(0, 1fr); gap: 35px; }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .site-header { gap: 15px; padding-block: 16px; }
  .site-header > nav:not(.mobile-menu) { display: none; }
  .header-contact { margin-left: auto; font-size: .875rem; min-height: 44px; }
  .menu-toggle {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 6px; width: 44px; height: 44px; padding: 10px;
    flex-shrink: 0;
  }
  .menu-toggle > span { width: 23px; height: 1px; background: #b1d2c0; }
  .menu-toggle[aria-expanded=true] > span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] > span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-header .mobile-menu {
    display: flex; position: absolute; top: 100%;
    left: 0; right: 0; padding: 18px 24px;
    flex-direction: column; gap: 2px; border: 1px solid var(--line);
    background: #0d1819fa; backdrop-filter: blur(20px); border-radius: 0 0 10px 10px;
    max-height: calc(100dvh - 100px); overflow-y: auto;
  }
  .site-header .mobile-menu a, .mobile-menu button {
    min-height: 44px; display: flex; align-items: center;
    font-size: 1rem; text-align: left; padding: 8px 0;
  }
  .mobile-menu button { color: var(--green); }
  .scenario-panel, .method-heading, .faq-section { grid-template-columns: minmax(0, 1fr); }
  .scenario-panel { gap: 30px; }
  .scenario-text p, .method-heading p { max-width: 100%; }
  .flow-console { padding: clamp(20px, 4vw, 30px); }
  .flow-lanes { grid-template-columns: minmax(0, 1fr) 45px minmax(0, 1.2fr); }
  .cert-slide { grid-template-columns: minmax(0, 1fr); }
  .certificate-image { padding: clamp(20px, 4vw, 32px); }
  .certificate-image img { width: 100%; max-height: 350px; object-fit: contain; box-shadow: none; }
  .cert-copy { padding: 28px; }
  .faq-section { gap: 0; }
  .about-hero { grid-template-columns: minmax(0, 1fr); }
  .about-hero img { width: 100%; height: auto; max-height: 550px; object-fit: contain; }
  .service-units { gap: 24px; }
  .service-units h2 { font-size: 1.3rem; }
  .section-head { flex-wrap: wrap; gap: 22px; }
  .section-intro { max-width: 100%; }
}

/* Phones: the portrait becomes the hero backdrop so the person and the headline share one screen. */
@media (max-width: 700px) {
  .site-header { gap: 8px; }
  .brand, .site-header > .brand { font-size: 26px; gap: 10px; }
  .brand > span { display: inline; font-size: 12px; letter-spacing: 1px; }
  .header-contact { font-size: 13px; gap: 6px; }
  .header-contact svg { width: 18px; }
  .hero {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    grid-template-areas: none; gap: 0; overflow: hidden;
    min-height: 0;
    padding-top: min(45svh, 360px); padding-bottom: 22px;
  }
  .hero-photo {
    position: absolute; inset: 0 0 auto; z-index: 0;
    width: 100%; max-width: none; height: min(48svh, 400px); aspect-ratio: auto;
    order: -1; border: 0; border-radius: 0;
  }
  .hero-photo picture, .hero-photo img { width: 100%; height: 100%; }
  .hero-photo img { object-position: 64% 12%; opacity: 1; }
  .hero-photo:after {
    background:
      linear-gradient(180deg, #05080a00 0%, #05080a00 42%, #05080a8c 72%, var(--bg) 100%),
      linear-gradient(90deg, #05080ac9 0%, #05080a4d 42%, transparent 72%);
  }
  .portrait-caption { display: none; }
  .hero-copy { position: relative; z-index: 2; width: 100%; }
  .hero .eyebrow { font-size: 11px; letter-spacing: .14em; color: #9fdcbf; }
  .greeting { margin-top: 0; font-size: .9375rem; }
  .hero h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); line-height: 1.2; margin: 12px 0 14px; }
  .hero-role { max-width: 100%; font-size: .875rem; line-height: 1.7; letter-spacing: 0; }
  .hero-intro { max-width: 100%; font-size: .9375rem; line-height: 1.8; margin: 12px 0 18px; color: #cfe0d8; }
  .hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
  .hero .button { flex: 0 1 auto; font-size: .9375rem; padding: 14px 22px; }
  .hero .text-link { font-size: .875rem; }
  .hero-bottom { display: none; }
  .price-index { margin-top: 0; }
  .price-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-index li { border-top: 1px solid var(--line); }
  .price-index li:nth-child(-n+2) { border-top: 0; }
  .price-index li:nth-child(odd) { border-left: 0; }
  .price-index a { padding: 16px; gap: 6px; }
  .pi-name { font-size: .75rem; }
  .pi-price strong { font-size: 1.3125rem; }
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 32px; }
  .product { padding: 20px; gap: 14px; }
  .product h3 { font-size: 1.125rem; }
  .product-price strong { font-size: 1.375rem; }
  .product-rail .shot { width: 84%; }
  .product-rail .shot img { height: 148px; }
  /* 手机上省掉计数行与提示语，滑动与箭头仍在 */
  .product-rail .rail-bottom { display: none; }
  .product-rail .rail-tools { margin-bottom: 4px; }
  .product-includes { display: flex; flex-wrap: wrap; gap: 5px 16px; }
  .product-includes li { padding-left: 14px; }
  .cert-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
  .cert-strip .cert-chip:not(.cert-more) > span { display: none; }
  .cert-more-inner strong { font-size: 1.0625rem; }
  .rail-hint { display: none; }
  .section-head { padding-top: 20px; }
.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .metrics > div { padding-left: 20px; }
  .metrics > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .metrics p { font-size: .8125rem; }
  .section-head h2, .method-heading h2, .about-teaser h2 { font-size: clamp(1.9rem, 7.4vw, 2.3rem); }
  .scenario-switch button { padding: 16px 6px; }
  .scenario-switch strong { font-size: .875rem; line-height: 1.7; }
  .scenario-switch button > span { font-size: 12px; }
  .scenario-text h3 { font-size: clamp(1.6rem, 6.3vw, 2rem); }
  .flow-node h4 { font-size: .875rem; }
  .flow-task, .input-tag { font-size: .875rem; }
  .flow-result { min-height: 0; }
  .flow-result strong { font-size: 1.0625rem; }
  .rail-tools { gap: 12px; }
  .rail-hint { flex-basis: 100%; font-size: .8125rem; }
  .rail-controls { gap: 10px; }
  .rail-controls [data-play] { min-height: 44px; font-size: .875rem; padding-inline: 10px; }
  .round { width: 44px; height: 44px; }
  .filter-group { overflow: visible; display: flex; flex-wrap: wrap; gap: 8px; }
  .filter-group button { font-size: .875rem; padding: 11px 13px; min-height: 44px; }
  .filter-group small { font-size: 12px; }
  .case-card { flex-basis: 90%; }
  .case-card-link { min-height: 0; padding: 22px; }
  .case-card h3 { font-size: 1.3rem; }
  .case-card-metric > span { min-height: 0; font-size: .8125rem; }
  .case-card-metric strong { font-size: 3rem; }
  .case-card-top { font-size: .8125rem; }
  .case-card-bottom img { height: auto; aspect-ratio: 2.2; }
  .case-card-bottom > span { font-size: .875rem; }
  .cert-copy { padding: 24px 22px; }
  .cert-copy .eyebrow, .cert-copy .registration { font-size: 12px !important; }
  .certificate-image img { max-height: none; }
  .service-units { grid-template-columns: minmax(0, 1fr); }
  .service-units h2 { font-size: 1.4rem; }
  .case-grid, .related .case-grid { grid-template-columns: minmax(0, 1fr); }
  .case-detail-header { grid-template-columns: minmax(0, 1fr); }
  .case-detail-body { grid-template-columns: minmax(0, 1fr); }
  .case-detail-stat { flex-wrap: wrap; }
  .case-detail-stat .word-stat { white-space: normal; }
  .case-detail-header .lead, .case-prose p { font-size: 1rem; }
  .case-detail-body aside { max-width: 100%; }
  .journey article { grid-template-columns: minmax(0, 1fr); }
  .about-belief h2 { font-size: clamp(1.9rem, 7.5vw, 2.3rem); }
  .about-belief p { font-size: 1rem; }
  .contact-section h2 { font-size: clamp(2rem, 8vw, 2.75rem); }
  .contact-section .actions { gap: 12px; }
  .phone-link { padding-left: 0; font-size: 1rem; }
  footer { gap: 18px; font-size: 12px; }
  footer > .brand { width: auto; }
  .dialog-qr { width: min(230px, 100%); }
  .dialog-actions { gap: 8px; justify-content: center; }
  .dialog-actions > * { min-height: 44px; }
}
@media (max-width: 430px) {
  .filter-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-group button { display: flex; align-items: center; justify-content: space-between; }
  .filter-group small { margin-left: 4px; }
  .work-directory article { gap: 12px; flex-wrap: wrap; }
  .directory-no { min-width: 20px; }
  .work-directory .round { width: 44px; height: 44px; }
}
@media (max-width: 359px) {
  .site-header > .brand > span { display: none; }
  .hero .actions .button { flex-basis: 100%; }
  .scenario-switch strong { font-size: .8125rem; }
  .flow-lanes { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1.2fr); }
  .flow-console { padding: 16px; }
  .flow-scrubber label { flex-wrap: wrap; }
  .hero-bottom > span { max-width: 60%; }
  .hero-bottom a { gap: 7px; }
  .case-card { flex-basis: 94%; }
}
@media (min-width: 701px) and (max-height: 600px) {
  .hero { min-height: 0; padding-top: 30px; gap: 32px; }
  .hero-photo { height: 100%; }
}
@media (hover: none) and (pointer: coarse) {
  .round, .menu-toggle { min-width: 44px; min-height: 44px; }
  .button:hover { transform: none; }
}
@media (min-width: 701px) and (max-width: 760px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-detail-header, .case-detail-body { grid-template-columns: minmax(0, 1fr); }
  .case-detail-stat { flex-wrap: wrap; }
}

/* Readable text hierarchy on every dark surface, including mobile. */
:root {
  --ink: #f7faf9;
  --muted: #d2ded9;
  --reading-label: #b9cfc4;
  --reading-accent: #b7f0d3;
  --line: #a8c8b83d;
}
body { -webkit-font-smoothing: auto; }
h1, h2, h3 { font-weight: 600; }
p { color: var(--muted); }
.hero-intro, .section-intro, .scenario-text p, .method-heading p,
.method-step p, .case-card p, .cert-copy > p:not(.eyebrow),
.cert-purpose p, .service-units p, .faq-section details p,
.about-teaser p, .contact-section p, .work-directory p,
.inner-hero .lead, .case-detail-header .lead, .case-prose p,
.journey article > div:last-child p, .about-hero > div > p:last-child,
.about-belief p {
  color: var(--muted);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.9;
}
.greeting, .hero-role, .metrics p, .case-card-metric > span,
.case-detail-stat span {
  color: #dbe7e1;
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.8;
}
.hero-intro { max-width: 37rem; }
.eyebrow, .hero .eyebrow, .section-head .eyebrow,
.scenario-text > .eyebrow, .cert-copy .eyebrow {
  color: var(--reading-accent);
  font-size: .875rem;
  font-weight: 550;
  letter-spacing: .06em;
}
.hero-bottom, .rail-hint, .rail-bottom, .rail-position,
.case-card-top, .case-card-bottom > span,
.console-top, .node-no, .flow-result > span,
.cert-purpose > span, .cert-copy > small,
.certificate-image > span, .method-step > span,
.breadcrumbs, .breadcrumbs a, .byline,
.case-detail-image figcaption, .case-detail-body aside a,
.deliverable > span, .source-note p, .work-directory small,
.directory-no, .directory-title span,
.journey article > div:first-child p, .about-mark > span,
.flow-scrubber label, .flow-scrubber label span,
footer, footer .brand > span, .copy-status, #image-caption {
  color: var(--reading-label);
  font-size: .875rem;
  line-height: 1.8;
  font-weight: 450;
}
.cert-copy .registration {
  color: var(--reading-label);
  font-size: .875rem !important;
  line-height: 1.8;
}
.source-note p { font-size: 1rem; }
.site-header nav a, .header-contact, .filter-group button,
.scenario-switch strong, .rail-controls [data-play], .text-link,
.phone-link, .dialog-actions, .flow-node h4, .flow-task, .input-tag {
  color: #e2eee7;
  font-size: 1rem;
  font-weight: 500;
}
.brand > span { color: #deebe4; }
.filter-group button { background: #101d18; border-color: #789a874f; }
.filter-group small, .scenario-switch small, .scenario-switch button > span {
  color: var(--reading-label);
  font-size: .875rem;
  font-weight: 500;
}
.filter-group button[aria-pressed=true] {
  color: #fff; background: #1c513b; border-color: #58edac;
}
.filter-group button[aria-pressed=true] small { color: #d5ffec; }
.scenario-switch button[aria-pressed=true] strong { color: #86ffbf; }
.scenario-switch button[aria-pressed=true] { background: #10251b; }
.button, .hero .button { font-size: 1rem; font-weight: 600; }
.button.ghost { background: #11201c; color: #f0faf4; border-color: #8fb5a05c; }
.button.primary { color: #032015; }
.metrics strong, .case-card-metric strong, .case-detail-stat strong { font-weight: 450; }
.case-card h3, .cert-copy h3, .flow-result strong { color: #f4fbf7; font-weight: 600; }
.case-card-bottom > span, .case-prose blockquote { color: #c3f7db; }
.flow-result { background: #10251c; border-color: #418362; }
.flow-console[data-step="0"] .flow-node:last-child { opacity: 1; }
.input-tag { background: #172922; border-color: #7ea38d52; overflow-wrap: anywhere; }
.case-wordmark { color: #a4d8ba; font-weight: 450; }
.portrait-caption {
  color: #eef8f2; font-size: .8125rem; font-weight: 500;
  background: #050d0bc9; padding: 8px 7px; border-radius: 4px;
}
.certificate-image > span { color: #d8e8df; }
.qr-preview > span { font-size: .875rem; font-weight: 500; color: #163823; }
.dialog-close { color: #e0f0e7; }
dialog p { font-size: 1rem; color: var(--muted); }
footer .brand { color: #ecf7ef; }

@media (min-width: 701px) {
  .hero-photo:after {
    background: linear-gradient(90deg, #05080a 0%, #05080ae0 16%, #05080a80 36%, transparent 56%),
      linear-gradient(0deg, #05080a 0%, transparent 35%);
  }
  .hero-intro, .hero-role { text-shadow: 0 2px 10px #000; }
}
@media (max-width: 700px) {
  .hero-intro, .section-intro, .scenario-text p, .method-heading p,
  .method-step p, .case-card p, .cert-copy > p:not(.eyebrow),
  .cert-purpose p, .service-units p, .faq-section details p,
  .about-teaser p, .contact-section p, .work-directory p,
  .inner-hero .lead, .case-detail-header .lead, .case-prose p,
  .journey article > div:last-child p, .about-hero > div > p:last-child,
  .about-belief p { font-size: 1.0625rem; }
  .header-contact { font-size: .9375rem; }
  .hero-role, .metrics p, .case-card-metric > span { font-size: .9375rem; }
  .flow-task, .input-tag, .flow-node h4 { font-size: .9375rem; }
  .flow-scrubber label, .rail-bottom, .breadcrumbs, .byline { font-size: .875rem; }
  .hero .actions .button { flex-basis: 100%; }
  .hero-bottom { flex-wrap: wrap; }
  .hero-bottom > span { max-width: 100%; }
  .scenario-switch strong { font-size: .9375rem; }
  .scenario-switch button { overflow-wrap: anywhere; }
  .flow-scrubber label { flex-wrap: wrap; }
  .filter-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-group button { white-space: normal; text-align: left; font-size: .9375rem; gap: 6px; }
  .filter-group small { flex-shrink: 0; }
  .cert-copy .registration { font-size: .875rem !important; }
}

/* Certificate metadata must also override the earlier mobile size rule. */
.cert-copy .eyebrow { font-size: .875rem !important; }
.flow-result .text-link { font-size: 1rem; }
.journey article > div:first-child > span {
  color: var(--reading-label); font-size: .875rem; line-height: 1.8;
}
.journey h3, .greeting strong { font-weight: 600; }
.brand > span { font-size: .875rem; }
@media (max-width: 700px) { .brand > span { font-size: .8125rem; } }