/* ===== Hans Group Holdings — shared stylesheet ===== */
:root{
  --blue:#0056b3;
  --blue-dark:#00448f;
  --yellow:#d9a900;
  --red:#cc2229;
  --ink:#333;
  --grey-text:#666;
  --grey-line:#e2e2e2;
  --grey-bg:#f2f2f2;
  --footer-bg:#8d8d8d;
  --accent:var(--blue);
  --maxw:1600px;
  --maxw-content:1200px;
  --font-r:"Adobe Heiti Std R","Microsoft JhengHei","PingFang TC","Heiti TC",
    "Noto Sans TC","Segoe UI",Arial,sans-serif;
  --font-b:"Adobe Fan Heiti Std B","Microsoft JhengHei","PingFang TC","Heiti TC",
    "Noto Sans TC","Segoe UI",Arial,sans-serif;
}
body[data-accent="yellow"]{--accent:var(--yellow);}
body[data-accent="red"]{--accent:var(--red);}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0 auto;
  max-width:var(--maxw);
  font-family:var(--font-r);
  color:var(--ink);
  line-height:1.8;
  font-size:15px;
  background:#fff;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw-content);margin:0 auto;padding:0 24px;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img.logo-lockup{height:42px;width:auto;}
.mainnav{display:flex;align-items:center;gap:30px;}
.mainnav > ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
.mainnav > ul > li{position:relative;}
.mainnav > ul > li > a{font-size:14px;color:#3a3a3a;padding:18px 0;display:block;
  font-weight:600;font-family:var(--font-b);white-space:nowrap;}
.mainnav > ul > li:hover > a{color:var(--blue);}
.mainnav .submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.12);
  border-top:3px solid var(--blue);padding:8px 0;display:none;list-style:none;margin:0;}
.mainnav > ul > li:hover .submenu{display:block;}
.mainnav .submenu li a{display:block;padding:9px 20px;font-size:13.5px;color:#444;
  white-space:nowrap;}
.mainnav .submenu li a:hover{background:var(--grey-bg);color:var(--blue);}
.lang{font-size:13px;color:#555;cursor:default;display:flex;align-items:center;gap:5px;}
.nav-toggle{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--blue);}

/* nav active state */
body[data-active="about"]   .nav-about > a,
body[data-active="business"].nav-business > a,
body[data-active="investor"].nav-investor > a,
body[data-active="esg"]     .nav-esg > a,
body[data-active="join"]    .nav-join > a,
body[data-active="contact"] .nav-contact > a{color:var(--blue);}

/* ---------- Tri-color brand bar ---------- */
.brandbar{height:4px;width:100%;display:flex;}
.brandbar i{display:block;height:100%;}
.brandbar .y{flex:0 0 50%;background:var(--yellow);}
.brandbar .r{flex:0 0 25%;background:var(--red);}
.brandbar .b{flex:0 0 25%;background:var(--blue);}

/* ---------- Hero banner ---------- */
.hero{position:relative;height:212px;background-size:cover;background-position:center;}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.05));}
.hero .htitle{position:absolute;left:0;right:0;bottom:26px;z-index:2;}
.hero .htitle h1{max-width:var(--maxw-content);margin:0 auto;padding:0 24px;
  color:#fff;font-size:34px;font-weight:700;font-family:var(--font-b);letter-spacing:2px;}

/* ---------- Page body ---------- */
main{padding:46px 0 70px;}
.section-title{color:var(--accent);font-size:22px;font-weight:700;font-family:var(--font-b);margin:0 0 18px;}
.section-title.center{text-align:center;color:var(--blue);}
.lead{font-size:17px;font-weight:700;font-family:var(--font-b);color:#222;margin:0 0 18px;}
p{margin:0 0 16px;color:#444;}
.muted{color:var(--grey-text);}
.divider{border:0;border-top:1px solid var(--grey-line);margin:34px 0;}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;}
.two-col.text-img{grid-template-columns:1.1fr .9fr;}
.two-col img{width:100%;border-radius:2px;}

/* ---------- Accordion ---------- */
.acc-item{border-bottom:1px solid var(--grey-line);}
.acc-head{display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;padding:16px 4px;color:var(--accent);font-weight:700;font-family:var(--font-b);font-size:16px;
  user-select:none;}
.acc-head .sign{font-size:22px;font-weight:400;line-height:1;color:var(--accent);}
.acc-body{display:none;padding:4px 4px 20px;}
.acc-item.open .acc-body,
.acc-row.open .acc-body,
.member.open .acc-body,
.listrow.open .acc-body{display:block;}
.acc-row{border-bottom:1px solid var(--grey-line);}
.acc-row .acc-head{font-size:14.5px;color:var(--blue);}

/* leadership name rows */
.member{border-bottom:1px solid var(--grey-line);}
.member .acc-head{font-size:15px;color:var(--blue);font-weight:600;padding:13px 4px;}
.member .acc-body{padding:0 4px 24px;}
.member .acc-body p{color:#656565;line-height:1.9;margin:0;}
.subhead{color:#4b4b4b;font-weight:700;font-family:var(--font-b);font-size:17px;margin:40px 0 10px;}
.group-title{color:var(--blue);font-weight:700;font-family:var(--font-b);font-size:19px;margin:52px 0 14px;}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--grey-line);margin:14px 0 26px;
  flex-wrap:wrap;}
.tabs button{background:none;border:0;padding:12px 20px;font-size:15px;cursor:pointer;
  color:#888;font-weight:600;border-bottom:3px solid transparent;font-family:var(--font-b);}
.tabs button:not(:last-child){border-right:1px solid var(--grey-line);}
.tabs button.active{color:var(--accent);border-bottom-color:var(--accent);}
.tabpane{display:none;}
.tabpane.active{display:block;}

/* ---------- Cards / galleries ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.card{text-align:center;}
.card .thumb{aspect-ratio:1/1;background-size:cover;background-position:center;}
.card .clabel{margin-top:12px;color:var(--blue);font-weight:600;font-family:var(--font-b);font-size:14.5px;}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.gallery .g{aspect-ratio:4/3;background-size:cover;background-position:center;border-radius:2px;}
.svc-list{list-style:none;padding:0;margin:0;}
.svc-list li{padding:4px 0;color:#555;}
.svc-list li::before{content:"- ";color:#999;}

/* other-business cross links */
.other-biz{margin-top:48px;}
.other-biz h4{color:#999;font-weight:600;font-family:var(--font-b);font-size:14px;margin:0 0 16px;}
.other-biz .cards3{grid-template-columns:repeat(2,minmax(0,260px));}
.other-biz .card .thumb{aspect-ratio:4/3;}
.other-biz .clabel.yellow{color:var(--yellow);}
.other-biz .clabel.red{color:var(--red);}
.other-biz .clabel.blue{color:var(--blue);}

/* ---------- Tables ---------- */
table.data{width:100%;border-collapse:collapse;font-size:13.5px;margin:10px 0 30px;}
table.data caption{background:var(--blue);color:#fff;padding:7px;font-weight:600;font-family:var(--font-b);
  text-align:center;font-size:13px;}
table.data th,table.data td{padding:9px 12px;text-align:right;border-bottom:1px solid #e8e8e8;}
table.data th:first-child,table.data td:first-child{text-align:left;}
table.data thead th{color:var(--blue);font-weight:700;font-family:var(--font-b);border-bottom:1px solid var(--blue);}
table.data tr.alt{background:#eef4fa;}
table.data tr.sub td:first-child{padding-left:24px;color:#666;}

/* results / press list */
.doc-table{width:100%;border-collapse:collapse;}
.doc-table th{text-align:left;color:var(--blue);font-weight:700;font-family:var(--font-b);padding:8px 6px;
  border-bottom:1px solid var(--grey-line);font-size:15px;}
.doc-table td{padding:13px 6px;border-bottom:1px solid var(--grey-line);font-size:14px;}
.doc-table .dl{text-align:right;width:40px;}
.dl-btn{display:inline-block;width:26px;height:26px;border:1px solid var(--blue);
  border-radius:4px;color:var(--blue);text-align:center;line-height:24px;}
.dl-btn:hover{background:var(--blue);color:#fff;}

/* list-row accordion (announcements) */
.listrow{background:var(--grey-bg);margin-bottom:10px;}
.listrow .acc-head{padding:16px 18px;color:#333;font-weight:600;align-items:flex-start;}
.listrow .acc-head .meta{font-weight:400;color:#888;font-size:12.5px;display:block;margin-top:4px;}
.listrow .sign{color:var(--blue);}
.listrow .acc-body{padding:0 18px 18px;color:#666;}
.press-row{background:var(--grey-bg);margin-bottom:10px;display:flex;
  justify-content:space-between;align-items:center;padding:14px 18px;}
.press-row .meta{color:#888;font-size:12.5px;}

/* year filter / pagination */
.yearsel{text-align:right;margin:0 0 22px;color:#444;font-weight:600;font-family:var(--font-b);}
.yearsel select{font-family:inherit;font-size:14px;padding:3px 6px;border:1px solid var(--grey-line);}
.pager{text-align:center;margin-top:34px;color:#888;letter-spacing:6px;font-size:14px;}

/* carousel (report covers) */
.carousel{display:flex;align-items:center;gap:24px;justify-content:center;}
.carousel .arrow{font-size:30px;color:#bbb;cursor:pointer;user-select:none;}
.covers{display:flex;gap:26px;}
.cover{width:150px;text-align:center;}
.cover img{width:150px;border:1px solid var(--grey-line);box-shadow:0 2px 8px rgba(0,0,0,.12);}
.cover .clabel{margin-top:8px;font-size:13px;color:#444;}

/* link list (governance) */
.linklist{max-width:560px;margin:30px 0;}
.linklist a{display:flex;align-items:center;gap:14px;padding:14px 6px;
  border-bottom:1px solid var(--grey-line);color:#555;font-size:15px;}
.linklist a .chev{color:#bbb;}
.linklist a:hover{color:var(--blue);}

/* related links page */
.rel-row{display:grid;grid-template-columns:340px 1fr;align-items:center;gap:30px;
  padding:22px 0;}
.rel-row img{max-height:54px;width:auto;}
.rel-row a{color:#555;word-break:break-all;}
.rel-row a:hover{color:var(--blue);}

/* contact form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.form-field{margin-bottom:14px;}
.form-field label{display:block;font-size:13.5px;margin-bottom:5px;color:#444;}
.form-field .req{color:var(--red);}
.form-field input,.form-field textarea{width:100%;padding:8px 10px;border:1px solid #ccc;
  font-family:inherit;font-size:14px;}
.form-field textarea{height:90px;resize:vertical;}
.cap-row{display:flex;align-items:center;gap:10px;}
.cap-row input{width:120px;}
.btn{background:var(--blue);color:#fff;border:0;padding:10px 26px;font-size:15px;
  cursor:pointer;font-family:inherit;border-radius:2px;}
.btn.grey{background:#777;padding:7px 14px;}
.note-red{color:var(--red);font-size:13px;}

/* sitemap */
.sitemap-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;}
.sitemap-cols h3{color:var(--blue);font-size:16px;margin:0 0 14px;}
.sitemap-cols ul{list-style:none;padding:0;margin:0;}
.sitemap-cols li a{display:block;padding:6px 0;color:#666;font-size:13.5px;}
.sitemap-cols li a:hover{color:var(--blue);}

/* FAQ */
.faq .acc-head{color:#333;font-size:15px;font-weight:500;}
.faq .acc-item:first-child .acc-head{color:#333;}

/* ---------- Footer ---------- */
.site-footer{background:var(--footer-bg);color:#fff;padding:26px 0;font-size:12.5px;}
.site-footer .frow{display:flex;justify-content:space-between;align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:0 24px;gap:30px;flex-wrap:wrap;}
.site-footer .subs{display:flex;align-items:center;gap:18px;}
.site-footer .subs .lbl{color:#e6e6e6;font-size:12px;}
.site-footer .subs img{height:26px;width:auto;background:#fff;padding:3px 6px;border-radius:3px;}
.footer-citybus{font-weight:800;font-family:var(--font-b);font-style:italic;color:#fff;font-size:15px;
  background:#fff;color:var(--blue);padding:3px 8px;border-radius:3px;}
.site-footer .flinks{display:flex;gap:26px;}
.site-footer .flinks a{color:#f0f0f0;}
.site-footer .flinks a:hover{color:#fff;text-decoration:underline;}
.site-footer .copy{width:100%;text-align:right;color:#dcdcdc;font-size:11px;margin-top:8px;}

/* ---------- Stock ticker ---------- */
.ticker{color:var(--blue);font-size:13px;font-weight:600;font-family:var(--font-b);padding:10px 0;}

/* placeholder for missing imagery */
.placeholder{background:#dfe3e8 repeating-linear-gradient(45deg,transparent,transparent 12px,#d3d8de 12px,#d3d8de 24px);
  display:flex;align-items:center;justify-content:center;color:#8a929c;font-size:13px;
  text-align:center;padding:14px;border-radius:4px;}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .mainnav{position:fixed;top:0;right:-100%;height:100vh;width:260px;background:#fff;
    flex-direction:column;align-items:stretch;padding:70px 0 0;gap:0;
    box-shadow:-4px 0 20px rgba(0,0,0,.15);transition:right .25s;overflow-y:auto;}
  .mainnav.open{right:0;}
  .mainnav > ul{flex-direction:column;gap:0;}
  .mainnav > ul > li > a{padding:14px 22px;border-bottom:1px solid var(--grey-line);}
  .mainnav .submenu{position:static;transform:none;display:block;box-shadow:none;
    border-top:0;padding:0 0 0 16px;}
  .nav-toggle{display:block;z-index:200;}
  .two-col,.two-col.text-img,.form-grid{grid-template-columns:1fr;gap:24px;}
  .cards3,.sitemap-cols{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .rel-row{grid-template-columns:1fr;gap:10px;}
  table.data{font-size:11px;}
  .hero .htitle h1{font-size:26px;}
}
@media(max-width:560px){
  .cards3,.sitemap-cols,.gallery{grid-template-columns:1fr;}
  .covers{flex-wrap:wrap;}
}