/* ============================================================
   金享官網 2026-09 上線施工層（layered after site.css + motion.css）
   決策出處：tasks/freelance/clients/金享/決策帳本_金享.md 2026-09-15
   1) Typography scale — 讀得到的內文 16px、次要說明 15px，13px 以下只留 metadata／eyebrow／legal
   2) Brand — 新 Logo 圖形（由方形 JPG 去白底之網頁過渡圖）＋ Logo 藍（token 在 site.css :root）
   3) 新元件 — 規格表、應用領域 7 類、品質 5 重點、母公司分工、交付基礎、詢價表單
   規則：顏色一律用 site.css 的 --accent* token，不在此寫死藍色色碼。
   ============================================================ */

:root {
  --fs-body: 16px;       /* 一般正文 */
  --fs-lead: 18px;       /* 導言 */
  --fs-secondary: 15px;  /* 卡片說明、次要段落 */
  --fs-small: 14px;      /* 表單提示、清單次要資訊 */
  --fs-label: 13px;      /* 圖說、小型標籤 */
  --fs-meta: 12px;       /* eyebrow／英文小標／版權 — 下限 */
  --fs-nav: 15px;
  --fs-button: 16px;
  --danger-text: #ff9f8f;        /* 表單錯誤字，navy 上 8.5:1 */
  --success-text: #9ee6b8;
}

/* ---------- Brand ---------- */
.brand-mark { display: none; }
.brand-logo { display: block; width: auto; height: 44px; }
.site-header { border-bottom-color: rgba(var(--accent-rgb), .26); }
.brand-copy b { font-size: 19px; }
.brand-copy small { font-size: var(--fs-meta); }

/* ---------- Typography floor on shared shell ---------- */
.site-nav a { font-size: var(--fs-nav); }
.site-nav .lang-switch, .site-nav .lang-switch a { font-size: var(--fs-label); }
.eyebrow { font-size: var(--fs-label); }
.button { font-size: var(--fs-button); }
.text-link, .email-link { font-size: var(--fs-secondary); }
.section-kicker, .breadcrumb, .contact-copy > p, .subpage-index > span,
.capability-rail-lead p, .capability-rail article > b { font-size: var(--fs-meta); }
.subpage-index li { font-size: var(--fs-small); }
.content-heading > div .lede { font-size: var(--fs-body); }
.editorial-intro > p:last-child { color: var(--steel-300); font-size: var(--fs-body); }
.capability-rail article p { color: var(--steel-300); font-size: var(--fs-secondary); }
.capability-rail-note { font-size: var(--fs-secondary); }
.contact-action > p { font-size: var(--fs-body); }
.section-note { color: var(--steel-300); font-size: var(--fs-secondary); }
.hardness-list b { font-size: var(--fs-meta); }
.hardness-list p { color: var(--steel-300); font-size: var(--fs-secondary); }
.inquiry-checklist p, .process-list p { color: var(--steel-300); font-size: var(--fs-secondary); }
.process-list b { font-size: var(--fs-label); }
.swiss-faq-list p { font-size: var(--fs-body); }
.quality-preview-copy > p:not(.section-kicker) { font-size: var(--fs-body); }

.floor-photo figcaption b, .media-figure figcaption b, .quality-hero-media figcaption b,
.capabilities-hero-media figcaption b, .prototype-figure figcaption b { font-size: var(--fs-meta); }
.floor-photo figcaption span, .media-figure figcaption span, .quality-hero-media figcaption span,
.capabilities-hero-media figcaption span, .prototype-figure figcaption span { font-size: var(--fs-small); }
.capabilities-hero-label span, .quality-hero-label span { font-size: var(--fs-meta); }
.region-chart figcaption b { font-size: var(--fs-meta); }
.region-chart figcaption span { font-size: var(--fs-small); }
.article-guide-tag { font-size: var(--fs-label); }
.compare-table th, table th { font-size: var(--fs-small); }
.equip-grid figcaption { font: 700 var(--fs-label)/1.4 ui-monospace, monospace; }
.equip-grid figcaption b { font-size: var(--fs-meta); }
.region-legend-item b { font-size: var(--fs-small); }
.region-legend-item small { font-size: var(--fs-meta); }

/* ---------- Pre-launch ribbon (preview builds only; build-release strips it for production) ---------- */
.review-ribbon.prelaunch-ribbon {
  position: fixed; z-index: 96; right: 18px; bottom: 14px;
  display: grid; grid-template-columns: auto auto; gap: 2px 14px;
  width: min(300px, calc(100vw - 36px)); padding: 10px 14px;
  border: 1px solid rgba(var(--accent-text-rgb), .76); background: rgba(var(--accent-text-rgb), .96);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .38); color: #071522;
}
.prelaunch-ribbon b { font: 950 12px/1.2 ui-monospace, monospace; letter-spacing: .1em; }
.prelaunch-ribbon span { justify-self: end; font: 850 12px/1.2 ui-monospace, monospace; }
.prelaunch-ribbon small { grid-column: 1 / -1; color: #1d2f3a; font-size: 12px; font-weight: 800; }

/* ---------- Home hero with real footage ---------- */
.launch-hero .hero-photo { position: relative; overflow: hidden; }
.launch-hero .hero-photo img,
.launch-hero .hero-photo video.ambient-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% center; filter: saturate(.86) contrast(1.04) brightness(.8); }
.launch-hero .hero-photo video.ambient-video { z-index: 1; opacity: 0; transition: opacity .6s ease; background: transparent; pointer-events: none; }
.launch-hero .hero-photo video.ambient-video.is-playing { opacity: 1; }
.launch-hero .hero-photo::after { z-index: 2; }
.launch-hero .hero-photo figcaption { z-index: 3; }
.launch-hero h1 { max-width: none; }

/* Montage: photos fill their grid cell instead of pushing the row to the photo's intrinsic height */
.montage-grid > .floor-photo { min-height: 0; }
.montage-grid > .floor-photo img { position: absolute; inset: 0; }
@media (max-width: 960px) {
  .montage-grid > .floor-photo { min-height: 280px; }
}

/* ---------- Spec snapshot (home) ---------- */
.spec-snapshot { display: grid; gap: 26px; padding: clamp(46px, 5vw, 72px) var(--pad); border-bottom: 1px solid var(--line); background: linear-gradient(120deg, rgba(var(--accent-rgb), .07), transparent 46%), var(--navy-900); }
.spec-snapshot > * { width: min(100%, var(--max)); margin-inline: auto; }
.spec-snapshot-heading { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; }
.spec-snapshot-heading .section-kicker { margin: 0; }
.spec-snapshot-heading h2 { margin: 0; font-size: clamp(24px, 2.4vw, 31px); line-height: 1.35; }
.spec-snapshot-heading .text-link { margin-left: auto; }
.spec-snapshot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-strong); }
.spec-snapshot-grid > div { min-width: 0; padding: 18px 18px 20px 0; border-bottom: 1px solid var(--line); }
.spec-snapshot-grid > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.spec-snapshot-grid dt { margin-bottom: 10px; color: var(--accent-text); font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; }
.spec-snapshot-grid dd { margin: 0; color: var(--steel-100); font-size: var(--fs-body); line-height: 1.7; }

/* ---------- Quality points ---------- */
.quality-points { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.quality-points li { display: grid; grid-template-columns: 64px minmax(160px, .7fr) minmax(0, 1.6fr); gap: 20px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.quality-points b { color: var(--accent-text); font: 800 var(--fs-label)/1 ui-monospace, monospace; letter-spacing: .08em; }
.quality-points h3 { margin: 0; font-size: 20px; }
.quality-points p { margin: 0; color: var(--steel-300); font-size: var(--fs-body); line-height: 1.8; }
.quality-points--compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 30px 0 28px; }
.quality-points--compact li { grid-template-columns: 38px 1fr; gap: 10px; padding: 15px 8px 15px 0; }
.quality-points--compact li:nth-child(odd) { border-right: 1px solid var(--line); }
.quality-points--compact li:nth-child(even) { padding-left: 14px; }
.quality-points--compact span { color: var(--steel-100); font-size: var(--fs-secondary); font-weight: 750; }
.spec-note { max-width: 70ch; margin: 22px 0 0; color: var(--steel-300); font-size: var(--fs-secondary); line-height: 1.8; }

/* ---------- Industries (7) ---------- */
.industry-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line); }
.industry-tiles li { display: grid; gap: 12px; align-content: start; min-height: 128px; padding: 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.industry-tiles b { color: var(--accent-text); font: 800 var(--fs-meta)/1 ui-monospace, monospace; letter-spacing: .1em; }
.industry-tiles span { color: var(--steel-100); font-size: 18px; font-weight: 750; line-height: 1.45; }
.industry-tiles li:last-child { grid-column: span 2; }
@media (max-width: 1100px) {
  .industry-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industry-tiles li:last-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .industry-tiles { grid-template-columns: 1fr; }
  .industry-tiles li:last-child { grid-column: auto; }
  .industry-tiles li { min-height: 0; }
}

/* ---------- Stable delivery (home) ---------- */
.delivery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
.delivery-grid article { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 30px 28px 32px 0; border-bottom: 1px solid var(--line); }
.delivery-grid article + article { padding-left: 28px; border-left: 1px solid var(--line); }
.delivery-grid h3 { margin: 0; font-size: 21px; }
.delivery-grid p { margin: 0; color: var(--steel-300); font-size: var(--fs-body); line-height: 1.8; }

/* ---------- Capabilities: spec table / machines / read-more ---------- */
.spec-table-wrap { overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line-strong); }
.spec-table th, .spec-table td { padding: 20px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th { width: 30%; min-width: 150px; padding-left: 0; color: var(--accent-text); font-size: var(--fs-secondary); font-weight: 800; letter-spacing: .04em; }
.spec-table td { color: var(--steel-100); font-size: 17px; line-height: 1.75; }
.machine-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 8px; border-top: 1px solid var(--line-strong); }
.machine-list > div { display: grid; gap: 8px; padding: 22px 22px 22px 0; border-bottom: 1px solid var(--line); }
.machine-list > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.machine-list b { color: var(--accent-text); font-size: var(--fs-secondary); font-weight: 800; letter-spacing: .06em; }
.machine-list span { color: var(--steel-100); font-size: 20px; font-weight: 750; }
.equip-grid--two img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.equipment-quality-link { margin: 26px 0 0; }
.read-more-panel { padding: clamp(48px, 6vw, 80px) var(--pad); border-bottom: 1px solid var(--line); background: var(--navy-950); }
.read-more-inner { width: min(100%, 900px); margin: 0 auto; padding: 30px clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.read-more-inner h2 { margin: 10px 0 14px; font-size: clamp(22px, 2.2vw, 28px); }
.read-more-inner p:not(.section-kicker) { max-width: 62ch; color: var(--steel-300); font-size: var(--fs-body); line-height: 1.8; }

/* ---------- Quality: inspection equipment ---------- */
.inspection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.inspection-grid figure { display: grid; grid-template-rows: auto 1fr; margin: 0; overflow: hidden; border: 1px solid var(--line); background: var(--navy-950); }
.inspection-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.9) brightness(.92); }
.inspection-grid figcaption { display: grid; gap: 6px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.inspection-grid figcaption b { color: var(--accent-text); font: 800 var(--fs-meta)/1.2 ui-monospace, monospace; letter-spacing: .12em; }
.inspection-grid figcaption span { color: var(--steel-100); font-size: var(--fs-secondary); font-weight: 700; }

/* ---------- About: group split ---------- */
.group-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.group-split article { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 30px 30px 32px 0; border-bottom: 1px solid var(--line); }
.group-split article + article { padding-left: 30px; border-left: 1px solid var(--line); }
.group-role { margin: 0; color: var(--accent-text); font: 800 var(--fs-meta)/1 ui-monospace, monospace; letter-spacing: .14em; }
.group-split h3 { margin: 0; font-size: 23px; }
.group-split p:not(.group-role) { margin: 0; color: var(--steel-300); font-size: var(--fs-body); line-height: 1.85; }
.group-note { max-width: 70ch; margin: 24px 0 0; color: var(--steel-300); font-size: var(--fs-secondary); line-height: 1.85; }

/* ---------- Contact band (subtle logo-blue wash; photo variant keeps its own background) ---------- */
.contact-band:not(.contact-band--photo) { background: linear-gradient(135deg, rgba(var(--accent-deep-rgb), .3) 0%, var(--navy-800) 58%); }

/* ---------- Footer ---------- */
.site-footer.launch-footer { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 24px 42px; font-size: var(--fs-small); }
.launch-footer .footer-brand-block { display: grid; gap: 12px; min-width: 0; }
.launch-footer .footer-brand { border-bottom: 0; }
.launch-footer .footer-brand .brand-logo { height: 40px; }
.launch-footer .footer-brand .brand-copy b { font-size: 17px; letter-spacing: .08em; }
.launch-footer .footer-brand-block p { display: block; margin: 0; color: var(--steel-500); font-size: var(--fs-small); }
.launch-footer .footer-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.launch-footer .footer-links a { font-size: var(--fs-small); }
.launch-footer .footer-top { font-size: var(--fs-small); }
.launch-footer .site-credit { margin: 0; font-size: var(--fs-meta); }

/* ---------- Drawing RFQ form ---------- */
.rfq-layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.rfq-intro h2 { margin: 14px 0 16px; font-size: clamp(25px, 2.6vw, 33px); line-height: 1.3; }
.rfq-intro > p:not(.section-kicker) { color: var(--steel-300); font-size: var(--fs-body); line-height: 1.8; }
.rfq-facts { display: grid; gap: 10px; padding: 0; margin: 22px 0; list-style: none; }
.rfq-facts li { padding-left: 18px; border-left: 2px solid rgba(var(--accent-rgb), .7); color: var(--steel-300); font-size: var(--fs-secondary); line-height: 1.6; }
.rfq-alt { color: var(--steel-300); font-size: var(--fs-secondary); }
.rfq-form { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); background: var(--navy-950); }
.rfq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.rfq-field { display: grid; gap: 8px; min-width: 0; }
.rfq-field--wide { grid-column: 1 / -1; }
.rfq-field label { color: var(--steel-100); font-size: var(--fs-secondary); font-weight: 750; }
.rfq-field label em { margin-left: 6px; color: var(--accent-text); font-size: var(--fs-meta); font-style: normal; font-weight: 800; }
.rfq-field input, .rfq-field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(199, 208, 210, .32); border-radius: 0;
  background: var(--navy-900); color: var(--steel-100); font: inherit; font-size: var(--fs-body); line-height: 1.5;
}
.rfq-field textarea { min-height: 150px; resize: vertical; }
.rfq-field input:focus-visible, .rfq-field textarea:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; border-color: var(--accent); }
.rfq-field [aria-invalid="true"] { border-color: var(--danger-text); }
.rfq-hint { color: var(--steel-500); font-size: var(--fs-small); line-height: 1.6; }
.rfq-error { min-height: 0; color: var(--danger-text); font-size: var(--fs-small); font-weight: 700; }
.rfq-error:empty { display: none; }
.rfq-dropzone { position: relative; display: grid; place-items: center; min-height: 96px; padding: 18px; border: 1px dashed rgba(var(--accent-text-rgb), .55); background: rgba(var(--accent-rgb), .06); color: var(--steel-300); font-size: var(--fs-secondary); text-align: center; }
.rfq-dropzone.is-dragover { border-style: solid; background: rgba(var(--accent-rgb), .14); }
.rfq-dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; }
.rfq-dropzone:focus-within { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.rfq-file-list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.rfq-file-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); background: var(--navy-900); font-size: var(--fs-small); }
.rfq-file-list .rfq-file-name { overflow: hidden; color: var(--steel-100); text-overflow: ellipsis; white-space: nowrap; }
.rfq-file-list .rfq-file-size { color: var(--steel-500); font-family: ui-monospace, monospace; }
.rfq-file-list .rfq-file-state { color: var(--steel-300); }
.rfq-file-list li.is-invalid .rfq-file-state { color: var(--danger-text); font-weight: 700; }
.rfq-file-list button { min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); background: transparent; color: var(--steel-300); font-size: var(--fs-small); cursor: pointer; }
.rfq-file-list button:hover { border-color: var(--accent-text); color: var(--steel-100); }
.rfq-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rfq-consent { margin: 22px 0 0; color: var(--steel-500); font-size: var(--fs-small); }
.rfq-actions { margin-top: 18px; }
.rfq-submit[disabled] { opacity: .6; cursor: progress; }
.rfq-status { margin-top: 18px; }
.rfq-status:empty { display: none; }
.rfq-status > div { padding: 16px 18px; border: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.7; }
.rfq-status .is-success { border-color: rgba(158, 230, 184, .5); background: rgba(158, 230, 184, .08); color: var(--steel-100); }
.rfq-status .is-success strong { color: var(--success-text); font-family: ui-monospace, monospace; letter-spacing: .04em; }
.rfq-status .is-error { border-color: rgba(255, 159, 143, .5); background: rgba(255, 159, 143, .08); color: var(--steel-100); }
.rfq-status .is-info { border-color: rgba(var(--accent-text-rgb), .45); background: rgba(var(--accent-rgb), .08); color: var(--steel-100); }
.rfq-progress { display: block; width: 100%; height: 6px; margin-top: 10px; accent-color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .spec-snapshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-snapshot-grid > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .inspection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .site-nav a { font-size: 16px; }
  .quality-points li { grid-template-columns: 52px 1fr; }
  .quality-points li p { grid-column: 2; }
  .delivery-grid, .group-split, .machine-list { grid-template-columns: 1fr; }
  .delivery-grid article + article, .group-split article + article, .machine-list > div + div { padding-left: 0; border-left: 0; }
  .rfq-layout { grid-template-columns: 1fr; }
  .site-footer.launch-footer { grid-template-columns: 1fr auto; }
  .launch-footer .footer-links { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 680px) {
  .brand-logo { height: 38px; }
  .brand-copy b { font-size: 16px; }
  .spec-snapshot-grid { grid-template-columns: 1fr; }
  .spec-snapshot-grid > div, .spec-snapshot-grid > div + div { padding: 16px 0; border-left: 0; }
  .quality-points--compact { grid-template-columns: 1fr; }
  .quality-points--compact li:nth-child(odd) { border-right: 0; }
  .quality-points--compact li:nth-child(even) { padding-left: 0; }
  .spec-table th, .spec-table td { display: block; width: 100%; padding: 0; border: 0; }
  .spec-table tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .spec-table th { margin-bottom: 8px; }
  .spec-table td { font-size: var(--fs-body); }
  .inspection-grid { grid-template-columns: 1fr; }
  .rfq-grid { grid-template-columns: 1fr; }
  .rfq-file-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .rfq-file-list .rfq-file-state { grid-column: 1 / -1; }
  .site-footer.launch-footer { grid-template-columns: 1fr; }
  .launch-footer .footer-links { grid-row: auto; }
  .review-ribbon.prelaunch-ribbon { right: 12px; bottom: 10px; width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .launch-hero .hero-photo video.ambient-video { display: none; }
}