/* cranes.sg — supplementary components (2026-10-21) */
.illus{margin:0;overflow:hidden;border-radius:.75rem;border:1px solid #e2e8f0;background:#f1f5f9}
.illus svg{display:block;width:100%;height:auto}
.illus-dark{border-color:rgba(255,255,255,.12);background:#0e2f57}
.cat .illus{border:0;border-radius:0;border-bottom:1px solid #e2e8f0}
.roles{display:grid;gap:1.25rem;margin-top:2rem}
@media (min-width:768px){.roles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.role{border:1px solid #e2e8f0;border-top:4px solid #1d4e89;border-radius:.75rem;background:#fff;padding:1.5rem}
.role.role-y{border-top-color:#f2a900}
.role .tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1d4e89;margin-bottom:.5rem}
.role h3{font-size:1.125rem;font-weight:700;color:#0b2545}
.role p,.role li{color:#475569;font-size:15px;line-height:1.6}
.tbl-w{overflow-x:auto;margin-top:1.25rem;border:1px solid #e2e8f0;border-radius:.75rem}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:.75rem 1rem;border-bottom:1px solid #e2e8f0}
.tbl th{background:#f8fafc;color:#0b2545;font-weight:700}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600;color:#0b2545;white-space:nowrap}
.steps{counter-reset:s;display:grid;gap:1rem;margin-top:1.5rem}
@media (min-width:768px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.steps li{counter-increment:s;border:1px solid #e2e8f0;border-radius:.75rem;background:#fff;padding:1.25rem;color:#475569;font-size:15px;line-height:1.55}
.steps li:before{content:counter(s,decimal-leading-zero);display:block;font-weight:800;color:#9a6b00;font-size:.875rem;margin-bottom:.35rem}
.steps li b{display:block;color:#0b2545;margin-bottom:.25rem}
.reg{border:1px solid #e2e8f0;border-radius:.75rem;background:#fff;padding:1.5rem}
.reg h2,.reg h3{color:#0b2545}
.form fieldset{border:1px solid #e2e8f0;border-radius:.75rem;padding:1.25rem;margin-top:1.5rem}
.form legend{padding:0 .5rem;font-weight:700;color:#0b2545}
.form .hint{font-size:.8125rem;font-weight:400;color:#64748b}
.form input[type=file]{padding:.5rem}
.prose-c ul.ticks{margin-top:1rem}
.prose-c h3{margin-top:1.75rem}
.lg-only{display:none}
@media (min-width:1024px){.lg-only{display:block}}
.prose-c,.aside{min-width:0}
.photo{margin:0;overflow:hidden;border-radius:.75rem;border:1px solid #e2e8f0;background:#f1f5f9}
.photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.photo figcaption{padding:.625rem .875rem;font-size:.8125rem;line-height:1.4;color:#475569;background:#fff}
.photo-dark{border-color:rgba(255,255,255,.12)}
.photo-dark figcaption{background:#0e2f57;color:#cbd5e1}
.cat .photo{border:0;border-radius:0;border-bottom:1px solid #e2e8f0}