/* CITICTLC visual rebuild v2 — ported component system (rebuild-20261030).
   Same palette/brand, new component system. Text unchanged; only layout,
   spacing, hierarchy and colour application change.
   Palette: CITICTLC blueprint navy/amber/paper (DESIGN doc).
   Evidence shape: panel (long-sentence facts), not a card row — forcing five
   narrow columns would harm readability; panel uses v2 card language. */
:root{--ink:#12283a;--paper:#f4f1ea;--accent:#e8b34a;--deep:#0b4a6f;--line:#d8d2c4;--soft:#ece9dc;--amber:#b7791f;--card:#ffffff}
*{box-sizing:border-box}body{margin:0;font-family:Georgia,'Times New Roman',serif;color:#1d2a33;background:var(--paper);line-height:1.7}
a{color:var(--deep)}a:hover{color:#9a6b12}
/* --- compact header: topbar brand row + solid inquiry button --- */
.topbar{background:var(--ink);color:#fff;padding:10px 5vw;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.brand{font-size:26px;font-weight:700;letter-spacing:.5px}.brand small{display:block;font-size:13px;color:var(--accent);letter-spacing:1px}
.brand-cta{display:inline-block;background:var(--accent);color:#12283a !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(18,40,58,.35);white-space:nowrap}
.brand-cta:hover{background:var(--deep);color:#fff !important}
/* --- two-tier nav: product row (primary) + secondary row; mobile = scroll rows, never a stacked list --- */
.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:#9a6b12;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:#9a6b12;text-decoration:underline}
.nav-link{text-decoration:none}
details.lang-switch{font-family:Arial,Helvetica,sans-serif;font-size:14px}
details.lang-switch summary{cursor:pointer;padding:8px 5vw}
details.lang-switch ul{list-style:none;margin:6px 0;padding:10px 5vw;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.lang-switch li{margin:4px 0}
details.lang-switch a{color:var(--deep)}
.cur{font-weight:700}.chev{font-size:11px}
/* --- compact hero (kept dark navy: brand) so the product figure enters the first screen --- */
.hero{background:var(--ink);color:#fff;padding:28px 5vw 22px;border-bottom:3px solid var(--accent)}
.badge{display:inline-block;background:var(--deep);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:12px;padding:3px 9px;letter-spacing:1px;text-transform:uppercase}
.kiln-badge{display:inline-block;background:var(--accent);color:#12283a;padding:3px 10px;font-weight:700;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.hero h1{font-size:36px;line-height:1.15;margin:8px 0}.page-intro{font-size:18px;max-width:840px;line-height:1.6}
/* --- visual signature, verbatim: gear-rule toothed strip under the hero --- */
.gear-rule{height:14px;background:repeating-linear-gradient(90deg,#e8b34a 0 14px,#12283a 14px 28px);border-top:3px solid #e8b34a;border-bottom:3px solid #e8b34a}
/* --- evidence panel in v2 card language (white card, accent top edge, no bullets) --- */
.evidence{background:#fff;border:1px solid var(--line);border-top:4px solid var(--accent);border-left:6px solid var(--accent);margin:18px auto;padding:14px 18px;max-width:880px;box-shadow:0 1px 4px rgba(18,40,58,.06)}
.evidence-title{font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin:0 0 8px}
.evidence-list{list-style:none;margin:0;padding:0;line-height:1.7}
.evidence-list li{margin:6px 0}
/* --- reading rhythm: narrower measure, breathing paragraphs, alternating h2 treatments --- */
main.main{padding:28px 5vw 10px;max-width:880px;margin:0 auto}
main h2{font-size:26px;margin-top:44px;line-height:1.25}
main h2:nth-of-type(odd){border-left:6px solid var(--accent);padding-left:12px}
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 + .body-text{font-size:18px}
main p,.body-text{font-size:17px;line-height:1.85;margin:0 0 1.15em}
.section-title{color:var(--ink)}
/* --- product figure: framed, caption as a strip --- */
.figure{margin:8px 0 28px;border:1px solid var(--line);background:#fff;padding:10px;box-shadow:0 2px 10px rgba(18,40,58,.10)}
.figure img{width:100%;height:auto;display:block}
.figure figcaption,.figure-caption{font-size:14px;color:#fff;background:var(--deep);font-style:normal;margin:10px -10px -10px;padding:9px 14px}
/* --- inquiry band (inside measure) + source note + footer --- */
.cta-band{background:var(--ink);color:#fff;padding:28px 5vw;margin-top:34px}
.cta-band a{color:#ffd98a;font-weight:700}
.cta-title{font-size:1.5em;font-weight:700;margin:0.83em 0;font-family:Arial,Helvetica,sans-serif}
.cta-text{line-height:1.7}
.source-note{font-size:13px;color:#5a6570;border-top:1px solid var(--line);padding-top:10px}
.footer{background:var(--ink);color:#dfe7ec;padding:34px 5vw;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.8;border-top:4px solid var(--accent)}
.footer a{color:#ffd98a}.footer-contact{margin:0 0 8px}.footer-links{line-height:1.8}.footer-nav{margin-top:8px}.footer-link{color:#ffd98a}
/* --- forms: v2 card language; field markup unchanged --- */
form{max-width:640px;background:#fff;border:1px solid var(--line);padding:22px}
.form-field{margin:12px 0}
.form-label{display:block;font-weight:700;font-family:Arial,Helvetica,sans-serif}
.input-text{width:100%;padding:10px;border:1px solid #999;font-size:16px}
textarea.input-text{min-height:140px}
button.btn-primary{background:var(--accent);color:#12283a;border:0;padding:13px 26px;font-size:16px;font-weight:700;cursor:pointer}
/* --- blog index list + card language (kept for safety; no page currently uses cards) --- */
.blog-list li{margin-bottom:14px;line-height:1.7}
.card-grid{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,40,58,.06)}
.card:nth-child(2n){background:var(--soft)}
.card h3{margin:6px 0}.card p{font-size:15px;line-height:1.7}
/* --- mobile: compact header, scroll-row nav with fade scroll cues --- */
@media(max-width:640px){
.topbar{font-size:12px;gap:8px;padding:5px 4vw}
.brand{font-size:24px}.brand small{font-size:11px}
.brand-cta{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-size:13px}
.hero{padding:16px 4vw 12px}.hero h1{font-size:26px}.page-intro{font-size:16px;line-height:1.55}
main.main{padding:20px 4vw 10px}main h2{font-size:23px;margin-top:34px}
main p,.body-text{font-size:16px}
.evidence{margin:14px 4vw}
.card-grid{grid-template-columns:1fr}
.footer{padding:28px 4vw}
}