/* HKBCC article pages and the 相關文章 list (works with styles.css) */
header nav{display:flex;gap:16px;flex-wrap:wrap}
.article,.article-list{max-width:820px;margin:0 auto}
.article-list{max-width:1076px}
.crumbs{font-size:14px;color:#466987;margin:0 0 6px}
.article h1,.article-list h1{font-size:34px;line-height:1.35;color:#12395f;margin:.3em 0 .25em}
.meta{color:#4a5c70;font-size:14px;margin:0 0 18px}
.lead{font-size:18px;color:#4a5c70;margin:0 0 8px}
.cover{margin:0 0 26px}
.cover img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:#eef3f7;border-radius:14px}
.article-body{font-size:17px;line-height:1.85}
.article-body h2{font-size:26px;line-height:1.4;color:#12395f;margin:1.6em 0 .6em}
.article-body h3{font-size:21px;line-height:1.45;color:#12395f;margin:1.4em 0 .5em}
.article-body h4,.article-body h5,.article-body h6{font-size:18px;margin:1.2em 0 .4em}
.article-body ul,.article-body ol{padding-left:1.4em}
.article-body li{margin:.3em 0}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.article-body blockquote{margin:1.2em 0;padding:12px 18px;border-left:4px solid var(--green);background:#f3f8f5;border-radius:0 10px 10px 0}
.article-body .table-wrap{margin:1.2em 0;overflow-x:auto}
.article-body table{border-collapse:collapse;min-width:100%;font-size:15px}
.article-body th,.article-body td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.article-body th{background:#eef3f7}
figure.video{margin:1.2em 0 1.6em;position:relative;aspect-ratio:16/9;background:#0b2f52;border-radius:12px;overflow:hidden}
figure.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article-cta{margin:36px 0;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:#f5f9fd}
.article-cta h2{margin:0 0 6px;font-size:22px;color:#12395f}
.article-cta p{margin:0 0 14px}
.related h2,.article-list h2{font-size:24px;color:#12395f;margin:32px 0 14px}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.article-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;background:#fff;padding-bottom:16px}
.article-card img{width:100%;height:170px;object-fit:cover;background:#eef3f7}
.article-card .tag,.article-card b,.article-card span:last-child{padding:0 14px}
.article-card b{color:#12395f;line-height:1.45}
.article-card span:last-child{font-size:14px;color:#4a5c70;line-height:1.6}
.back{margin-top:28px}
@media(max-width:900px){.article-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.article-grid{grid-template-columns:1fr}.article h1,.article-list h1{font-size:27px}.article-body{font-size:16px}.article-body h2{font-size:22px}.article-body h3{font-size:19px}header{flex-wrap:wrap;gap:8px}}
.not-found-links{margin:24px 0}
.not-found-card{padding:18px 16px;gap:4px}
.not-found-card b{font-size:18px}

/* service, contact, reference and privacy pages */
.service-card,.contact-card{padding-top:18px}
.service-card .tag{color:#0d8747;font-weight:700}
.contact-card .cta{margin:10px 14px 0;align-self:flex-start}
.contact-grid{grid-template-columns:repeat(2,1fr)}
.item-list{columns:2;column-gap:28px;padding-left:1.2em}
.item-list li{break-inside:avoid;margin:.25em 0}
.situation-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.situation-list a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#f5f9fd;text-decoration:none}
.situation-list a:hover{background:#eef3f7}
.prep-list{padding-left:1.3em}
.prep-list li{margin:.5em 0}
.reference-list{list-style:none;padding:0;display:grid;gap:8px}
.reference-list a{display:block;padding:11px 14px;border:1px solid var(--line);border-radius:10px;text-decoration:none;background:#fff}
.reference-list a:hover{background:#f5f9fd}
.note{color:#4a5c70;font-size:14px}
.faq details{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:#fff}
.faq summary{cursor:pointer;padding:12px 14px;font-weight:700;color:#12395f}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details p{margin:0;padding:12px 14px}
@media(max-width:700px){.item-list{columns:1}.situation-list,.contact-grid{grid-template-columns:1fr}}