
/* Liandong visual rebuild v2 — sample CSS (rebuild-20261030).
   Same palette/brand, new component system. Text unchanged; only layout,
   spacing, hierarchy and colour application change. */
:root{--ink:#12212b;--paper:#f7f5f0;--accent:#0e7c7b;--deep:#0b4f5c;--line:#d5d0c4;--soft:#eef3f2;--amber:#b7791f;--card:#ffffff}
*{box-sizing:border-box}body{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)}
/* --- compact header: topbar + brandbar + solid CTA button (was a plain link) --- */
.topbar{background:var(--ink);color:#fff;padding:7px 5vw;font-size:13px;display:flex;gap:20px;flex-wrap:wrap}
.topbar a{color:#ffe9a8}.brandbar{padding:16px 5vw 10px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.brand{font-size:30px;font-weight:700;letter-spacing:1px}.brand small{display:block;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--accent)}
.brandbar>div>a{display:inline-block;background:var(--accent);color:#fff !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(11,79,92,.25)}
.brandbar>div>a:hover{background:var(--deep);color:#fff}
/* --- two-tier nav: product row (primary) + secondary row; mobile = scroll rows, never a 5-row stack --- */
.mainnav{background:#fff;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);font-family:Arial,Helvetica,sans-serif}
.nav-primary{display:flex;gap:22px;padding:11px 5vw 10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.nav-primary a{text-decoration:none;color:var(--ink);font-size:16px;font-weight:700;white-space:nowrap}
.nav-primary a:hover{color:var(--accent);text-decoration:underline}
.nav-secondary{display:flex;gap:18px;padding:8px 5vw;flex-wrap:wrap}
.nav-secondary a{text-decoration:none;color:#4a5a64;font-size:13px;white-space:nowrap}
.nav-secondary a:hover{color:var(--accent);text-decoration:underline}
/* --- compact hero so the product figure enters the first screen --- */
.hero{padding:28px 5vw 22px;background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);border-bottom:3px solid var(--accent)}
.eyebrow{font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--accent);font-weight:700}
.hero h1{font-size:36px;line-height:1.15;margin:8px 0}.lede{font-size:18px;max-width:840px;line-height:1.6}
.evidence{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px}
.evidence-item{border:1px solid var(--line);border-top:4px solid var(--accent);background:#fff;padding:12px 16px}
.evidence-item b{display:block;font-family:Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px}
.evidence-item span{font-size:14px;color:#444}
/* --- product showcase figure: full-width, framed, caption as a strip --- */
.disc-motif{height:110px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;font-size:13px;margin:24px 0}
.motif-materials{background:radial-gradient(circle,#d8efec 0 34%,#f7f5f0 35% 58%,#bfe3df 59% 72%,#f7f5f0 73%)}
.motif-equipment{background:radial-gradient(circle,#dbe9f2 0 34%,#f7f5f0 35% 58%,#bcd6e8 59% 72%,#f7f5f0 73%)}
.motif-guides{background:radial-gradient(circle,#f5e8c8 0 34%,#f7f5f0 35% 58%,#ecd9a0 59% 72%,#f7f5f0 73%)}
.motif-company{background:radial-gradient(circle,#dde3e6 0 34%,#f7f5f0 35% 58%,#c3ced4 59% 72%,#f7f5f0 73%)}
/* --- reading rhythm: narrower measure, breathing paragraphs, alternating h2 treatments --- */
main{padding:28px 5vw 10px;max-width:880px;margin:0 auto}
main h2{font-size:26px;margin-top:44px;border-left:6px solid var(--accent);padding-left:12px;line-height:1.25}
main h2:nth-of-type(odd)::after{content:"";display:block;height:3px;width:64px;background:var(--accent);margin-top:10px}
main h2:nth-of-type(even){border-left:0;background:var(--deep);color:#fff;padding:12px 16px}
main h2 + p{font-size:18px}
main p{font-size:17px;line-height:1.85;margin:0 0 1.15em}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:24px 0}
.card{border:1px solid var(--line);border-top:4px solid var(--deep);background:#fff;padding:18px;box-shadow:0 1px 4px rgba(18,33,43,.06)}
.card:nth-child(2n){background:var(--soft)}
.card h3{margin:6px 0}.card p{font-size:15px;line-height:1.7}
.card img,.figure img{width:100%;height:auto;display:block}
.figure{margin:8px 0 28px;border:1px solid var(--line);background:#fff;padding:10px;box-shadow:0 2px 10px rgba(18,33,43,.10)}
.figure figcaption{font-size:14px;color:#fff;background:var(--deep);font-style:normal;margin:10px -10px -10px;padding:9px 14px}
.cta-band{background:var(--ink);color:#fff;padding:28px 5vw;margin-top:34px}.cta-band a{color:#ffe9a8}.cta-band .cta-title{font-size:1.5em;font-weight:700;margin:0.83em 0;font-family:Arial,sans-serif}
.cta-band .btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 22px;text-decoration:none;font-family:Arial,sans-serif;font-weight:700;margin-right:12px}
.note{background:var(--soft);border-left:4px solid var(--deep);padding:14px 18px;margin:20px 0}
.warn{background:#fff4e6;border-left:4px solid var(--amber);padding:14px 18px;margin:20px 0}
footer{background:#101c2e;color:#d9dee6;padding:34px 5vw;font-family:Arial,sans-serif;font-size:14px;border-top:4px solid var(--accent)}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
footer a{color:#ffe9a8}footer h4{color:#fff;margin:0 0 8px}.footbase{border-top:1px solid #33415c;margin-top:24px;padding-top:14px}
form{max-width:640px;background:#fff;border:1px solid var(--line);padding:22px}
label{display:block;font-family:Arial,sans-serif;font-weight:700;margin:14px 0 4px}
input[type=text],input[type=email],textarea{width:100%;padding:10px;border:1px solid #999;font-size:16px}
textarea{min-height:140px}button{background:var(--accent);color:#fff;border:0;padding:13px 26px;font-size:16px;font-weight:700;cursor:pointer}
.breadcrumb{font-family:Arial,sans-serif;font-size:13px;color:#666}
.cta-inner{max-width:1080px}.btn-secondary{display:inline-block;border:1px solid #ffe9a8;color:#ffe9a8;padding:12px 22px;text-decoration:none;font-family:Arial,sans-serif;font-weight:700}
.small{font-size:13px}.related-list{list-style:none;padding:0}.related-list li{margin:6px 0}.related-heading{font-family:Arial,sans-serif;font-size:18px;margin-top:30px}
.tag{display:inline-block;border:1px dashed var(--accent);padding:2px 8px;font-family:Arial,sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase}
.divider{margin:0}.highlight{background:#fff3d6;padding:2px 6px}.muted{color:#555}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.step-list{counter-reset:step}
.callout{border:2px solid var(--deep);background:#fff;padding:18px;margin:22px 0}
.badge{display:inline-block;background:var(--deep);color:#fff;font-family:Arial,sans-serif;font-size:12px;padding:3px 9px;letter-spacing:1px;text-transform:uppercase}
.intro-box{background:#fff;border:1px solid var(--line);padding:18px}.footer-note{font-size:13px;color:#aeb8c6}
.quote{border-left:4px solid var(--accent);padding:8px 16px;font-style:italic;background:#fff}
.spec-table{border-collapse:collapse;width:100%;margin:20px 0}.spec-table th,.spec-table td{border:1px solid var(--line);padding:8px 12px;text-align:left;font-size:15px}
.spec-table th{background:var(--soft);font-family:Arial,sans-serif}
/* --- tablet: evidence as one compact row of five (fixes 4+1 wrap) --- */
@media (max-width:1100px){
.evidence{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.evidence-item{padding:10px 12px}.evidence-item span{font-size:13px;line-height:1.5}
}
/* --- mobile: compact header, scroll-row nav + evidence strip with fade scroll cues --- */
@media (max-width:640px){
.topbar{font-size:12px;gap:8px;padding:5px 4vw}
.brandbar{padding:10px 4vw 6px}.brand{font-size:24px}.brand small{font-size:11px}
.brandbar>div>a{padding:8px 14px;font-size:14px}
.nav-primary,.nav-secondary{flex-wrap:nowrap;overflow-x:auto;padding-left:4vw;padding-right:4vw;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.nav-primary::-webkit-scrollbar,.nav-secondary::-webkit-scrollbar{display:none}
.nav-primary{gap:16px;padding-top:7px;padding-bottom:7px}
.nav-secondary{gap:14px;padding-top:6px;padding-bottom:6px}
details.lang-switch summary{padding:6px 4vw;font-family:Arial,Helvetica,sans-serif;font-size:13px}
.hero{padding:16px 4vw 12px}.hero h1{font-size:26px}.lede{font-size:16px;line-height:1.55}
main{padding:20px 4vw 10px}main h2{font-size:23px;margin-top:34px}
main p{font-size:16px}
.two-col{grid-template-columns:1fr}
.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}
.evidence-item span{font-size:13px}
}
