
/* Ruili visual rebuild v2 — ported CSS (rebuild-20261030).
   Liandong v2 sample, palette mapped to Blueprint Engineering; site
   appendix merged in. Text unchanged; only layout, spacing, hierarchy
   and colour application change. */
:root{--ink:#1d2a36;--paper:#f4f6f8;--accent:#e8a317;--deep:#0f2a44;--line:#c9d6e4;--soft:#eef3f8;--card:#ffffff}
*{box-sizing:border-box}
body.site{margin:0;font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--paper);line-height:1.7}
a{color:var(--deep)}a:hover{color:var(--accent)}
/* --- header: brandbar + solid CTA button + single-row nav (no topbar: site never had one) --- */
.site-header{background:var(--deep);color:#fff}
.brandbar{padding:16px 5vw 10px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.brand{font-size:22px;font-weight:700;letter-spacing:.2px}
.brand-mark{display:inline-block;width:34px;height:34px;line-height:34px;text-align:center;background:var(--accent);color:var(--deep);border-radius:50%;margin-right:10px}
.brandbar>div>a{display:inline-block;background:var(--accent);color:var(--deep) !important;padding:11px 22px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:15px;border-radius:3px;box-shadow:0 2px 6px rgba(15,42,68,.35);white-space:nowrap}
.brandbar>div>a:hover{background:#f2b93b;color:var(--deep)}
.mainnav{display:flex;gap:6px 18px;padding:2px 5vw 12px;flex-wrap:wrap;font-family:Arial,Helvetica,sans-serif}
.mainnav .nav-link{color:#dbe7f3;text-decoration:none;font-size:15px;white-space:nowrap}
.mainnav .nav-link:hover{text-decoration:underline}
/* --- reading column: narrower measure (v2 constant) --- */
.site-main{max-width:880px;margin:0 auto;padding:28px 5vw 10px;background:#fff}
main p{font-size:17px;line-height:1.85;margin:0 0 1.15em}
/* --- signature, verbatim from the pre-rebuild stylesheet --- */
.route-rule{height:6px;margin:6px 0 18px;background:linear-gradient(90deg,var(--route,#e8a317) 0 22%,#0f2a44 22% 24%,var(--route,#e8a317) 24% 46%,#0f2a44 46% 48%,var(--route,#e8a317) 48% 100%);border-radius:3px}
.route-core{--route:#e8a317}
.route-brand{--route:#1f8a7a}
.route-guide{--route:#4a6fa5}
/* --- hero block: compact hero treatment via site classes --- */
.hero-block{border:1px solid var(--line);padding:22px 22px 8px;background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);border-bottom:3px solid var(--route,#e8a317)}
.hero-title{font-size:36px;line-height:1.15;margin:0 0 12px;color:var(--deep)}
.lead{font-size:18px;color:#33475c;line-height:1.6;max-width:840px}
.hero-img{width:100%;height:auto;display:block;border:1px solid var(--line);margin-top:14px}
.caption{font-size:14px;color:#fff;background:var(--deep);padding:9px 14px;margin:0 0 14px}
/* --- evidence row: cards on desktop, one row of five on tablet, scroll row on mobile --- */
.evidence{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:14px 0}
.evidence-item{border:1px solid var(--line);border-top:4px solid var(--accent);background:#fff;padding:12px 16px;font-size:14px}
/* --- panels: alternating h2 treatments (odd: route-colour rule; even: deep band) --- */
.panel{margin-top:26px}
.section-title{font-size:26px;line-height:1.25;color:var(--deep);margin:44px 0 12px}
main>div.panel:nth-of-type(odd) .section-title{border-left:6px solid var(--route,#e8a317);padding-left:12px}
main>div.panel:nth-of-type(odd) .section-title::after{content:"";display:block;height:3px;width:64px;background:var(--route,#e8a317);margin-top:10px}
main>div.panel:nth-of-type(even) .section-title{border-left:0;background:var(--deep);color:#fff;padding:12px 16px}
main h2 + p{font-size:18px}
/* --- category cards (home directory) --- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.cat-card{border:1px solid var(--line);border-top:4px solid var(--deep);background:#fff;padding:14px;box-shadow:0 1px 4px rgba(29,42,54,.06)}
.cat-card:nth-child(2n){background:var(--soft)}
.cat-name{font-size:18px;margin:0 0 6px}
.cat-name a{color:var(--deep);text-decoration:none}
.cat-note{font-size:14px;color:#5a6b7d;margin:0}
/* --- inquiry band, callout, related pages --- */
.cta{margin-top:30px;background:var(--deep);color:#fff;padding:24px}
.cta-title{font-size:20px;font-family:Arial,Helvetica,sans-serif;font-weight:700;margin:0 0 8px}
.cta-link{color:#ffd970;font-size:18px}
.callout{margin-top:22px;border-left:4px solid var(--route,#e8a317);background:var(--soft);padding:12px 16px}
.related{max-width:880px;margin:0 auto;padding:0 5vw 30px;background:#fff}
.related-heading{font-size:18px;color:var(--deep)}
.related-list{list-style:none;padding:0}
.related-list li{margin:6px 0}
/* --- footer --- */
.site-footer{background:var(--deep);color:#dbe7f3;padding:34px 5vw;font-family:Arial,Helvetica,sans-serif;font-size:14px;border-top:4px solid var(--accent)}
.site-footer a{color:#ffd970}
.foot-brand{font-size:18px;font-weight:700}
.foot-links{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 16px}
.foot-meta{font-size:14px;color:#b9c9da}
/* --- forms --- */
.form{margin-top:18px;max-width:640px;background:#fff;border:1px solid var(--line);padding:22px}
.field{margin:0 0 14px}
.label{display:block;font-family:Arial,Helvetica,sans-serif;font-weight:700;margin-bottom:4px}
.text-input,.message-input{width:100%;max-width:640px;padding:10px;border:1px solid var(--line);font-size:16px}
.message-input{min-height:150px}
.submit-btn{background:var(--accent);color:var(--deep);border:0;padding:13px 26px;font-size:16px;font-weight:700;font-family:Arial,Helvetica,sans-serif;cursor:pointer}
/* --- lists, blog, misc (kept) --- */
.checklist{margin:10px 0 10px 20px}
.faq-q{font-weight:700;margin-top:16px}
.faq-a{margin:6px 0}
.blog-list{list-style:none;padding:0}
.blog-item{border-bottom:1px solid var(--line);padding:12px 0}
.notfound{text-align:left}
/* --- tablet: evidence as one row of five (site has exactly five items) --- */
@media (max-width:1100px){
.evidence{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.evidence-item{padding:10px 12px}
}
/* --- mobile: compact header, scroll-row nav + evidence row with fade scroll cues --- */
@media (max-width:640px){
.brandbar{padding:10px 4vw 6px}
.brand{font-size:20px}
.brandbar>div>a{padding:8px 14px;font-size:14px}
.mainnav{flex-wrap:nowrap;overflow-x:auto;padding:2px 4vw 8px;gap:16px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.mainnav::-webkit-scrollbar{display:none}
.site-main{padding:20px 4vw 10px}
.hero-title{font-size:26px}
main p{font-size:16px}
.section-title{font-size:23px}
.evidence{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.evidence-item{flex:0 0 230px;scroll-snap-align:start}
.related{padding:0 4vw 30px}
}
@media(max-width:700px){.cat-grid{grid-template-columns:1fr}}
