:root { --ink: #172126; --muted: #5b6870; --paper: #fbfaf7; --surface: #ffffff; --line: #d9e1df; --teal: #146c68; --teal-dark: #0d4e4b; --blue: #245b7d; --coral: #bd553f; --amber: #c9912f; --shadow: 0 18px 45px rgba(23, 33, 38, 0.12); color-scheme: light; font-family: "Noto Sans Thai", "Avenir Next", "Segoe UI", Tahoma, Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; background: var(--paper); color: var(--ink); letter-spacing: 0px; line-height: 1.65; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
a, button, select, summary { touch-action: manipulation; }
:focus-visible { outline: rgba(20, 108, 104, 0.72) solid 3px; outline-offset: 4px; }
.skip-link { background: var(--ink); border-radius: 0px 0px 8px; color: rgb(255, 255, 255); font-weight: 800; left: 0px; padding: 12px 18px; position: fixed; text-decoration: none; top: 0px; transform: translateY(-120%); transition: transform 180ms; z-index: 100; }
.skip-link:focus { transform: translateY(0px); }
.site-header { align-items: center; background: rgba(251, 250, 247, 0.94); border-bottom: 1px solid rgba(217, 225, 223, 0.9); display: flex; gap: 24px; justify-content: space-between; left: 0px; min-height: 76px; padding: 12px clamp(20px, 5vw, 72px); position: sticky; right: 0px; top: 0px; z-index: 20; }
.brand { align-items: center; display: flex; gap: 12px; min-width: 220px; text-decoration: none; }
.brand-mark { align-items: center; background: var(--teal); border-radius: 8px; color: rgb(255, 255, 255); display: inline-flex; font-size: 14px; font-weight: 800; height: 42px; justify-content: center; width: 48px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; line-height: 1.2; }
.brand small { color: var(--muted); font-size: 12px; line-height: 1.25; }
.site-nav { align-items: center; display: flex; gap: 6px; }
.site-nav a { border-radius: 8px; color: rgb(46, 59, 66); font-size: 14px; font-weight: 700; padding: 10px 12px; text-decoration: none; transition: background-color 180ms, color 180ms, border-color 180ms; }
.site-nav a:hover { background: rgb(233, 241, 239); color: var(--teal-dark); }
.site-nav .nav-cta { background: var(--teal); color: rgb(255, 255, 255); margin-left: 4px; }
.site-nav .nav-cta:hover { background: var(--teal-dark); color: rgb(255, 255, 255); }
.nav-toggle { background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; display: none; height: 42px; padding: 8px; transition: background-color 180ms, border-color 180ms; width: 42px; }
.nav-toggle:hover { background: rgb(233, 241, 239); border-color: var(--line); }
.nav-toggle span { background: var(--ink); display: block; height: 2px; margin: 6px 0px; width: 24px; }
.hero { min-height: 78vh; overflow: hidden; position: relative; }
.hero-media, .hero-photo { height: 100%; inset: 0px; object-fit: cover; position: absolute; width: 100%; }
.hero-shade { background: linear-gradient(90deg, rgba(12, 21, 26, 0.86) 0%, rgba(12, 21, 26, 0.64) 42%, rgba(12, 21, 26, 0.18) 100%); inset: 0px; position: absolute; }
.hero-content { color: rgb(255, 255, 255); max-width: 760px; padding: clamp(72px, 11vh, 118px) clamp(20px, 7vw, 92px) 52px; position: relative; z-index: 1; }
.eyebrow { color: var(--coral); font-size: 13px; font-weight: 800; margin: 0px 0px 10px; text-transform: uppercase; }
.hero .eyebrow { color: rgb(242, 179, 90); }
h1, h2, h3, p { margin-top: 0px; }
h1 { font-size: clamp(44px, 7vw, 84px); line-height: 0.98; margin-bottom: 20px; }
h2 { font-size: clamp(28px, 4vw, 48px); line-height: 1.16; margin-bottom: 18px; }
h3 { font-size: 21px; line-height: 1.3; margin-bottom: 10px; }
.hero-copy { color: rgba(255, 255, 255, 0.9); font-size: 20px; margin-bottom: 28px; max-width: 690px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.button { align-items: center; border: 1px solid transparent; border-radius: 8px; display: inline-flex; font-size: 15px; font-weight: 800; justify-content: center; min-height: 46px; padding: 12px 18px; text-decoration: none; transition: background-color 180ms, border-color 180ms, color 180ms, box-shadow 180ms, transform 180ms; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--teal); color: rgb(255, 255, 255); }
.button.primary:hover { background: var(--teal-dark); }
.button.secondary { background: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.92); color: var(--ink); }
.button.secondary:hover { background: rgb(255, 255, 255); }
.button.full { width: 100%; }
.hero-stats { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0px, 1fr)); margin: 0px; max-width: 640px; }
.hero-stats div { border-left: 3px solid rgb(242, 179, 90); padding-left: 14px; }
.hero-stats dt { font-size: 30px; font-weight: 900; line-height: 1; }
.hero-stats dd { color: rgba(255, 255, 255, 0.82); font-size: 13px; margin: 4px 0px 0px; }
.quick-paths { background: var(--surface); border-bottom: 1px solid var(--line); display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.quick-paths a { background: var(--surface); min-height: 112px; padding: 26px clamp(20px, 4vw, 52px); text-decoration: none; }
.quick-paths a:hover { background: rgb(237, 246, 243); }
.quick-paths strong, .quick-paths span { display: block; }
.quick-paths strong { color: var(--teal-dark); font-size: 18px; margin-bottom: 4px; }
.quick-paths span { color: var(--muted); font-size: 14px; }
.trust-strip { background: rgb(247, 251, 250); border-bottom: 1px solid var(--line); display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.trust-strip div { background: rgb(247, 251, 250); border-right: 1px solid var(--line); padding: 22px clamp(20px, 3vw, 38px); }
.trust-strip div:last-child { border-right: 0px; }
.trust-strip strong, .trust-strip span { display: block; }
.trust-strip strong { color: var(--ink); font-size: 16px; line-height: 1.35; margin-bottom: 4px; }
.trust-strip span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.section { padding: clamp(62px, 8vw, 106px) clamp(20px, 5vw, 72px); }
.band { background: rgb(238, 244, 242); }
.section-heading { margin-bottom: 34px; max-width: 850px; }
.section-heading p:not(.eyebrow) { color: var(--muted); font-size: 18px; }
.intro-grid, .pillar-grid, .qa-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.intro-grid article, .pillar-grid article, .qa-grid details, .estimate-panel, .checklist, .article-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.intro-grid article, .pillar-grid article { min-height: 206px; padding: 26px; }
.intro-grid p, .pillar-grid p, .article-card p, .checklist li, .qa-grid p, .procurement-copy p, .split-layout p { color: var(--muted); }
.pillar-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.pillar-grid a, .article-card a { color: var(--teal-dark); font-weight: 800; }
.pillar-grid a:hover, .article-card a:hover, .comparison-table a:hover, .site-footer a:hover { color: var(--teal); }
.article-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.article-card { display: flex; flex-direction: column; overflow: hidden; transition: border-color 180ms, box-shadow 180ms, transform 180ms; }
.article-card:hover { border-color: rgba(20, 108, 104, 0.34); box-shadow: var(--shadow); transform: translateY(-2px); }
.article-card img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; width: 100%; }
.article-card div { padding: 24px; }
.article-hub-grid h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; }
.article-type { color: var(--coral); font-size: 12px; font-weight: 900; margin-bottom: 8px; text-transform: uppercase; }
.split-layout, .procurement-section { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: minmax(0px, 1.2fr) minmax(320px, 0.8fr); }
.room-list { display: grid; gap: 12px; margin-top: 28px; }
.room-list a { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: block; padding: 18px 20px; text-decoration: none; transition: border-color 180ms, box-shadow 180ms, transform 180ms; }
.room-list a:hover { border-color: var(--teal); box-shadow: var(--shadow); transform: translateY(-1px); }
.room-list strong, .room-list span { display: block; }
.room-list span { color: var(--muted); font-size: 14px; }
.estimate-panel { align-self: start; box-shadow: var(--shadow); padding: 26px; }
.estimate-panel label { color: var(--muted); display: block; font-size: 13px; font-weight: 800; margin: 16px 0px 6px; }
.estimate-panel select, .estimate-panel output { border: 1px solid var(--line); border-radius: 8px; display: block; font: inherit; min-height: 46px; padding: 10px 12px; width: 100%; }
.estimate-panel output { background: rgb(237, 246, 243); border-color: rgb(184, 214, 208); color: var(--teal-dark); font-weight: 900; margin: 18px 0px; }
.comparison-table { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.comparison-table [role="row"] { display: grid; grid-template-columns: 0.9fr repeat(3, 1fr); }
.comparison-table span { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 70px; padding: 18px; }
.comparison-table [role="row"]:last-child span { border-bottom: 0px; }
.comparison-table span:last-child { border-right: 0px; }
.table-head span { background: var(--ink); color: rgb(255, 255, 255); font-weight: 900; }
.comparison-table a { color: var(--teal-dark); font-weight: 800; }
.procurement-section { background: var(--ink); color: rgb(255, 255, 255); }
.procurement-copy { max-width: 760px; }
.procurement-copy p { color: rgba(255, 255, 255, 0.76); }
.procurement-section .button.secondary { background: rgb(255, 255, 255); color: var(--ink); }
.checklist { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); padding: 28px; }
.checklist ul { margin: 0px; padding-left: 20px; }
.checklist li { color: rgba(255, 255, 255, 0.78); margin-bottom: 12px; }
.qa-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.qa-grid details { padding: 22px 24px; }
.qa-grid summary { cursor: pointer; font-size: 18px; font-weight: 900; min-height: 44px; }
.qa-grid p { margin: 12px 0px 0px; }
.final-cta { align-items: center; background: var(--blue); color: rgb(255, 255, 255); display: flex; gap: 28px; justify-content: space-between; }
.final-cta div { max-width: 760px; }
.final-cta p:not(.eyebrow) { color: rgba(255, 255, 255, 0.82); }
.site-footer { align-items: center; background: rgb(16, 25, 29); color: rgb(255, 255, 255); display: flex; gap: 24px; justify-content: space-between; padding: 32px clamp(20px, 5vw, 72px); }
.site-footer p { color: rgba(255, 255, 255, 0.68); margin: 4px 0px 0px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
.site-footer a { color: rgba(255, 255, 255, 0.86); font-weight: 800; text-decoration: none; }
.section-link { color: var(--teal-dark); display: inline-flex; font-weight: 900; margin-top: 24px; text-decoration: none; }
.section-link:hover { color: var(--teal); }
.site-page { background: var(--paper); }
.page-hero { background: radial-gradient(circle at 88% 12%, rgba(201, 145, 47, 0.22), transparent 28%), var(--ink); color: rgb(255, 255, 255); min-height: 520px; overflow: hidden; padding: clamp(58px, 8vw, 98px) clamp(20px, 7vw, 96px); position: relative; }
.page-hero::before { background: linear-gradient(90deg, rgba(12, 21, 26, 0.9) 0%, rgba(12, 21, 26, 0.74) 48%, rgba(12, 21, 26, 0.28) 100%); content: ""; inset: 0px; position: absolute; z-index: 0; }
.page-hero > :not(.page-hero-media) { position: relative; z-index: 1; }
.page-hero-media { height: 100%; inset: 0px; object-fit: cover; object-position: center center; position: absolute; width: 100%; z-index: 0; }
.page-hero h1 { max-width: 940px; }
.page-hero p:not(.eyebrow) { color: rgba(255, 255, 255, 0.8); font-size: 20px; max-width: 860px; }
.page-hero .hero-actions { margin-bottom: 0px; }
.breadcrumb { align-items: center; color: rgba(255, 255, 255, 0.72); display: flex; flex-wrap: wrap; font-size: 13px; font-weight: 800; gap: 10px; margin-bottom: 22px; }
.breadcrumb a { color: rgb(255, 255, 255); text-decoration: none; }
.breadcrumb a:hover { color: rgb(242, 179, 90); }
.breadcrumb span::before { content: "/"; margin-right: 10px; opacity: 0.62; }
.content-layout { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: minmax(0px, 1fr) 320px; padding: clamp(48px, 7vw, 88px) clamp(20px, 7vw, 96px); }
.content-main { display: grid; gap: 22px; }
.content-section, .side-nav, .note-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.content-section { padding: clamp(24px, 4vw, 42px); }
.tool-section { background: transparent; border: 0px; padding: 0px; }
.content-section p, .content-section li, .note-panel p, .link-card span, .definition-grid p, .timeline-list li { color: var(--muted); }
.answer-box { background: rgb(237, 246, 243); border-color: rgb(189, 216, 210); }
.check-grid, .link-card-grid, .definition-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.check-grid article, .definition-grid article, .link-card { background: rgb(247, 251, 250); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.link-card { display: block; text-decoration: none; transition: border-color 180ms, box-shadow 180ms, transform 180ms; }
.link-card:hover { border-color: rgba(20, 108, 104, 0.38); box-shadow: var(--shadow); transform: translateY(-1px); }
.link-card strong, .link-card span { display: block; }
.link-card strong { color: var(--teal-dark); font-size: 18px; margin-bottom: 6px; }
.clean-list { margin: 0px; padding-left: 22px; }
.clean-list li { margin-bottom: 10px; }
.timeline-list { list-style: none; margin: 0px; padding: 0px; }
.timeline-list li { border-left: 3px solid rgb(189, 216, 210); margin-bottom: 16px; padding-left: 18px; }
.timeline-list li:last-child { margin-bottom: 0px; }
.spec-table { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.spec-table [role="row"] { display: grid; grid-template-columns: 0.8fr 1.1fr 1.1fr; }
.spec-table span { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 76px; padding: 18px; }
.spec-table [role="row"]:last-child span { border-bottom: 0px; }
.spec-table span:last-child { border-right: 0px; }
.inline-estimate { box-shadow: none; max-width: 620px; }
.content-sidebar { align-self: start; display: grid; gap: 18px; position: sticky; top: 96px; }
.side-nav, .note-panel { padding: 22px; }
.side-nav strong { display: block; margin-bottom: 12px; }
.side-nav a { border-top: 1px solid var(--line); color: var(--teal-dark); display: block; font-weight: 800; padding: 12px 0px; text-decoration: none; }
.side-nav a:hover { color: var(--teal); }
.note-panel { background: rgb(237, 246, 243); border-color: rgb(189, 216, 210); }
.note-panel h2 { font-size: 22px; }
.article-page { background: var(--paper); }
.article-hero { background: var(--ink); color: rgb(255, 255, 255); padding: clamp(62px, 9vw, 112px) clamp(20px, 7vw, 96px); }
.article-hero p { color: rgba(255, 255, 255, 0.78); font-size: 20px; max-width: 780px; }
.article-body { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0px, 1fr) 300px; padding: clamp(48px, 7vw, 88px) clamp(20px, 7vw, 96px); }
.article-body article { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: clamp(24px, 5vw, 52px); }
.article-body aside { align-self: start; background: rgb(237, 246, 243); border: 1px solid rgb(189, 216, 210); border-radius: 8px; padding: 22px; position: sticky; top: 96px; }
.article-body li { margin-bottom: 8px; }
.decision-intro { align-items: end; display: flex; gap: 28px; justify-content: space-between; }
.decision-intro > div:first-child { max-width: 760px; }
.decision-intro .section-link { flex-shrink: 0; margin-top: 0px; }
.decision-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.decision-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; min-height: 210px; padding: 24px; text-decoration: none; transition: border-color 180ms, box-shadow 180ms, transform 180ms; }
.decision-card:hover { border-color: rgba(20, 108, 104, 0.38); box-shadow: var(--shadow); transform: translateY(-2px); }
.decision-card strong { color: var(--teal-dark); font-size: 18px; margin-bottom: 8px; }
.decision-card span { color: var(--muted); font-size: 14px; }
.decision-card small { color: var(--coral); font-size: 12px; font-weight: 900; margin-top: auto; padding-top: 18px; text-transform: uppercase; }
.tool-shell { background: var(--ink); border-radius: 8px; color: rgb(255, 255, 255); display: grid; gap: 28px; grid-template-columns: minmax(280px, 0.78fr) minmax(0px, 1.22fr); padding: clamp(24px, 5vw, 46px); }
.tool-copy { align-self: start; max-width: 430px; }
.tool-copy p { color: rgba(255, 255, 255, 0.74); }
.tool-form { background: rgb(255, 255, 255); border-radius: 8px; color: var(--ink); padding: clamp(22px, 4vw, 34px); }
.tool-form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.tool-form label { color: var(--muted); display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.tool-form select, .tool-form input { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 8px; font: inherit; min-height: 46px; padding: 10px 12px; width: 100%; }
.tool-form select:focus, .tool-form input:focus { border-color: var(--teal); outline: rgba(20, 108, 104, 0.18) solid 3px; }
.decision-result { background: rgb(237, 246, 243); border: 1px solid rgb(189, 216, 210); border-radius: 8px; margin-top: 22px; padding: 22px; }
.result-kicker { color: var(--coral); font-size: 12px; font-weight: 900; margin-bottom: 6px; text-transform: uppercase; }
.decision-result h3 { color: var(--teal-dark); margin-bottom: 6px; }
.decision-result p, .decision-result li { color: var(--muted); }
.decision-result ul { margin: 14px 0px; padding-left: 20px; }
.decision-result li { margin-bottom: 6px; }
.result-note { border-top: 1px solid rgb(189, 216, 210); font-size: 14px; padding-top: 14px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.result-actions .button { min-height: 42px; padding: 10px 14px; }
.result-actions .button.secondary { background: rgb(255, 255, 255); border-color: var(--line); }
.tool-steps { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.tool-step { border-top: 3px solid rgb(189, 216, 210); padding-top: 18px; }
.tool-step b { color: var(--coral); display: block; font-size: 13px; margin-bottom: 6px; }
.tool-step p { color: var(--muted); }
.article-search { align-items: end; display: flex; gap: 14px; justify-content: space-between; margin-bottom: 22px; }
.article-search label { color: var(--muted); display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.article-search input { border: 1px solid var(--line); border-radius: 8px; font: inherit; min-height: 46px; padding: 10px 14px; width: min(560px, 100%); }
.article-search input:focus { border-color: var(--teal); outline: rgba(20, 108, 104, 0.18) solid 3px; }
.article-count { color: var(--muted); font-size: 14px; margin: 0px; white-space: nowrap; }
.article-card[hidden] { display: none; }
.brand-toolbar { align-items: end; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; margin-bottom: 24px; }
.brand-search { flex: 1 1 360px; }
.brand-search label { color: var(--muted); display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.brand-search input { border: 1px solid var(--line); border-radius: 8px; font: inherit; min-height: 46px; padding: 10px 14px; width: 100%; }
.brand-search input:focus { border-color: var(--teal); outline: rgba(20, 108, 104, 0.18) solid 3px; }
.brand-filter-list { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-filter { appearance: none; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--teal-dark); cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; min-height: 42px; padding: 8px 14px; }
.brand-filter:hover, .brand-filter.is-active { background: var(--teal); border-color: var(--teal); color: rgb(255, 255, 255); }
.brand-count { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.brand-directory-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.brand-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; min-height: 214px; padding: 22px; transition: border-color 180ms, box-shadow 180ms, transform 180ms; }
.brand-card:hover { border-color: rgba(20, 108, 104, 0.38); box-shadow: var(--shadow); transform: translateY(-2px); }
.brand-card[hidden] { display: none; }
.brand-card .article-type { margin-bottom: 10px; }
.brand-card h3 { margin-bottom: 8px; }
.brand-card p { color: var(--muted); margin-bottom: 18px; }
.brand-card a { color: var(--teal-dark); font-weight: 900; margin-top: auto; text-decoration: none; }
.brand-card a:hover { color: var(--teal); }
.brand-note { background: rgb(247, 251, 250); border: 1px solid var(--line); border-radius: 8px; margin-top: 24px; padding: 20px 22px; }
.brand-note p { color: var(--muted); margin-bottom: 0; }
.source-list { display: grid; gap: 10px; margin: 0; padding: 0; }
.source-list li { color: var(--muted); list-style: none; }
.source-list a { color: var(--teal-dark); font-weight: 800; }
.source-list a:hover { color: var(--teal); }
.source-note { color: var(--muted); font-size: 13px; margin: 14px 0 0; }
.brand-card .source-note, .link-card .source-note { color: var(--muted); font-size: 12px; font-weight: 600; }
.article-meta { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 10px; margin-bottom: 10px; }
.article-meta time { color: var(--teal-dark); font-weight: 800; }
.zoom-brand-page { --zoom-blue: #2d8cff; --zoom-blue-dark: #0b5cff; --zoom-navy: #0b1f3a; --zoom-sky: #f2f7ff; --zoom-line: #d8e6f7; }
.zoom-brand-page .page-hero { background: var(--zoom-navy); min-height: 590px; }
.zoom-brand-page .page-hero::before { background: linear-gradient(90deg, rgba(7, 20, 40, 0.96) 0%, rgba(7, 20, 40, 0.82) 42%, rgba(7, 20, 40, 0.28) 100%); }
.zoom-brand-page .page-hero-media { object-position: center center; }
.zoom-brand-page .breadcrumb a:hover { color: #9dccff; }
.zoom-brand-page .eyebrow { color: #9dccff; }
.zoom-brand-lockup { align-items: center; display: flex; gap: 14px; margin: 4px 0 26px; }
.zoom-brand-logo { background: rgb(255, 255, 255); border-radius: 9px; height: auto; padding: 9px 15px; width: min(184px, 48vw); }
.zoom-brand-lockup > span { color: rgba(255, 255, 255, 0.88); font-size: 14px; font-weight: 800; line-height: 1.35; }
.zoom-brand-lockup small { color: rgba(255, 255, 255, 0.68); font-size: 12px; font-weight: 500; }
.zoom-brand-page .page-hero h1 { max-width: 980px; }
.zoom-brand-page .page-hero p:not(.eyebrow):not(.zoom-hero-disclaimer) { max-width: 780px; }
.zoom-hero-disclaimer { color: rgba(255, 255, 255, 0.7) !important; font-size: 13px !important; margin: 0 0 24px; }
.zoom-brand-page .button.primary { background: var(--zoom-blue); }
.zoom-brand-page .button.primary:hover { background: var(--zoom-blue-dark); }
.zoom-brand-page .button.secondary { color: var(--zoom-navy); }
.zoom-signal-bar { background: rgb(255, 255, 255); border-bottom: 1px solid var(--zoom-line); display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zoom-signal-bar div { border-right: 1px solid var(--zoom-line); padding: 22px clamp(18px, 4vw, 48px); }
.zoom-signal-bar div:last-child { border-right: 0; }
.zoom-signal-bar strong, .zoom-signal-bar span { display: block; }
.zoom-signal-bar strong { color: var(--zoom-navy); font-size: 17px; line-height: 1.3; }
.zoom-signal-bar span { color: var(--muted); font-size: 13px; margin-top: 3px; }
.zoom-brand-page .answer-box { background: var(--zoom-sky); border-color: var(--zoom-line); }
.zoom-brand-page .content-section h2 { color: var(--zoom-navy); }
.zoom-brand-page .content-section h3 { color: #174f8f; }
.zoom-brand-page .check-grid article, .zoom-brand-page .link-card { background: #fbfdff; border-color: var(--zoom-line); }
.zoom-brand-page .link-card:hover { border-color: rgba(45, 140, 255, 0.5); }
.zoom-brand-page .link-card strong, .zoom-brand-page .side-nav a { color: #174f8f; }
.zoom-brand-page .timeline-list li { border-left-color: var(--zoom-blue); }
.zoom-brand-page .spec-table .table-head span { background: var(--zoom-navy); }
.zoom-brand-page .source-note { color: #61768e; }
.zoom-feature-figure { background: var(--zoom-navy); border: 1px solid var(--zoom-line); border-radius: 8px; margin: 0; overflow: hidden; }
.zoom-feature-figure img { aspect-ratio: 16 / 7; object-fit: cover; width: 100%; }
.zoom-feature-figure figcaption { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; padding: 16px 20px 18px; }
.zoom-feature-figure figcaption strong { color: rgb(255, 255, 255); }
.zoom-feature-figure figcaption span { color: rgba(255, 255, 255, 0.68); font-size: 12px; }
.zoom-brand-page .note-panel { background: var(--zoom-sky); border-color: var(--zoom-line); }
.zoom-brand-page .note-panel h2 { color: var(--zoom-navy); }
.zoom-brand-page .site-footer { background: var(--zoom-navy); }
.ops-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.ops-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.ops-card h3 { color: var(--teal-dark); }
.ops-card p, .ops-card li { color: var(--muted); }
.ops-card ul { margin: 0px; padding-left: 20px; }
.print-action { appearance: none; background: transparent; border: 1px solid var(--teal); border-radius: 8px; color: var(--teal-dark); cursor: pointer; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 800; min-height: 44px; padding: 10px 14px; }
.print-action:hover { background: rgb(237, 246, 243); }
@media print {
  .site-header, .site-footer, .skip-link, .hero-actions, .content-sidebar, .print-action, .article-search { display: none !important; }
  .page-hero, .article-hero { min-height: auto; padding: 24px; }
  .page-hero-media, .page-hero::before { display: none; }
  .page-hero, .article-hero { background: rgb(255, 255, 255); color: rgb(0, 0, 0); }
  .page-hero p:not(.eyebrow), .article-hero p { color: rgb(51, 51, 51); }
}
@media (max-width: 1020px) {
  .pillar-grid, .article-grid, .intro-grid, .decision-grid, .ops-grid, .check-grid, .link-card-grid, .definition-grid, .brand-directory-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .quick-paths { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .split-layout, .procurement-section, .article-body, .content-layout { grid-template-columns: 1fr; }
  .article-body aside, .content-sidebar { position: static; }
  .tool-shell { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .site-header { min-height: 68px; }
  .nav-toggle { display: block; }
  .site-nav { background: var(--surface); border-bottom: 1px solid var(--line); display: none; flex-direction: column; left: 0px; padding: 12px 20px 20px; position: absolute; right: 0px; top: 68px; }
  body.nav-open .site-nav { display: flex; }
  .site-nav a { width: 100%; }
  .brand small { display: none; }
}
@media (max-width: 760px) {
  .site-header { min-height: 68px; }
  .nav-toggle { display: block; }
  .site-nav { background: var(--surface); border-bottom: 1px solid var(--line); display: none; flex-direction: column; left: 0px; padding: 12px 20px 20px; position: absolute; right: 0px; top: 68px; }
  body.nav-open .site-nav { display: flex; }
  .site-nav a { width: 100%; }
  .brand small { display: none; }
  .hero { min-height: 76vh; }
  .hero-shade { background: linear-gradient(rgba(12, 21, 26, 0.86), rgba(12, 21, 26, 0.52)); }
  .hero-content { padding-top: 68px; }
  h1 { font-size: 46px; }
  .hero-copy { font-size: 17px; }
  .hero-stats, .quick-paths, .trust-strip, .article-grid, .intro-grid, .pillar-grid, .decision-grid, .ops-grid, .qa-grid, .check-grid, .link-card-grid, .definition-grid, .brand-directory-grid { grid-template-columns: 1fr; }
  .trust-strip div { border-right: 0px; border-bottom: 1px solid var(--line); }
  .trust-strip div:last-child { border-bottom: 0px; }
  .quick-paths a { min-height: auto; padding: 20px; }
  .decision-intro, .article-search, .brand-toolbar { align-items: flex-start; flex-direction: column; }
  .article-count { white-space: normal; }
  .tool-form-grid, .tool-steps { grid-template-columns: 1fr; }
  .result-actions { flex-direction: column; }
  .result-actions .button { width: 100%; }
  .comparison-table [role="row"], .spec-table [role="row"] { grid-template-columns: 1fr; }
  .comparison-table .table-head, .spec-table .table-head { display: none; }
  .comparison-table [role="row"] + [role="row"], .spec-table [role="row"] + [role="row"] { border-top: 1px solid var(--line); }
  .comparison-table span, .spec-table span { border-right: 0px; min-height: auto; padding: 14px 18px; }
  .comparison-table span::before, .spec-table span::before { color: var(--muted); content: attr(data-label); display: block; font-size: 12px; font-weight: 900; line-height: 1.3; margin-bottom: 4px; text-transform: uppercase; }
  .final-cta, .site-footer { align-items: flex-start; flex-direction: column; }
  .page-hero p:not(.eyebrow) { font-size: 17px; }
  .zoom-signal-bar { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .zoom-signal-bar div:nth-child(2) { border-right: 0; }
  .zoom-signal-bar div:nth-child(-n+2) { border-bottom: 1px solid var(--zoom-line); }
  .zoom-feature-figure img { aspect-ratio: 4 / 3; }
}
@media (max-width: 420px) {
  .brand { min-width: 0px; }
  .brand strong { font-size: 14px; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .zoom-brand-lockup { align-items: flex-start; flex-direction: column; }
  .zoom-brand-logo { width: min(170px, 70vw); }
  .zoom-signal-bar { grid-template-columns: 1fr; }
  .zoom-signal-bar div { border-bottom: 1px solid var(--zoom-line); border-right: 0; }
  .zoom-signal-bar div:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .button:hover, .article-card:hover, .room-list a:hover, .link-card:hover { transform: none; }
}