/* ==========================================================================
   HF2A — Hong Kong Fastener Application Association 香港緊固應用協會
   Brand palette from the official logo pack:
   navy #023370 · deep navy #001F48 · silver #9B9EA2 · white #FFFFFF
   ========================================================================== */
:root {
  --navy: #001f48;
  --blue: #023370;
  --bright: #0e6ad2;
  --silver: #9b9ea2;
  --ink: #17202a;
  --muted: #5d6875;
  --line: #dbe2ec;
  --soft: #f4f6fa;
  --sky: #e9f2ff;
  --shadow: 0 .7rem 2rem rgba(2, 51, 112, .06);
  --shadow-lift: 0 1.1rem 2.6rem rgba(2, 51, 112, .12);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --radius: 1rem;
  --bs-primary: #023370;
  --bs-primary-rgb: 2, 51, 112;
  --bs-link-color: #023370;
  --bs-link-hover-color: #001f48;
  --bs-body-color: #17202a;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  color: var(--ink);
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Traditional Chinese typography — Hong Kong character forms first */
html[data-lang="zh"] body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "PingFang TC", "Noto Sans HK",
    "Noto Sans TC", "Microsoft JhengHei", "Hiragino Sans CNS", "Source Han Sans HC", sans-serif;
  line-height: 1.85;
  letter-spacing: .012em;
}
html[data-lang="zh"] h1, html[data-lang="zh"] h2, html[data-lang="zh"] h3 {
  letter-spacing: .01em; line-height: 1.32;
}
html[data-lang="zh"] .eyebrow { letter-spacing: .14em; }

/* Suppress the flash of English before the dictionary is applied */
html.i18n-pending body { opacity: 0; }
body { transition: opacity .14s linear; }

h1, h2, h3 { font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.3rem); line-height: 1.2; }
h3 { font-size: 1.2rem; line-height: 1.35; }
p { margin-bottom: 1rem; }
/* Chinese breaks at any character, so "pretty" has no word boundary to work
   with; "balance" shares the characters out evenly instead and is what keeps a
   block from ending with one stranded character. Browsers skip it past a few
   lines, which is fine — long prose does not strand a character anyway. */
p, dd, li, figcaption, .industry-tile-teaser, .form-check-label { text-wrap: balance; }
a { color: var(--blue); text-underline-offset: .2em; }
/* Wider, and the browser shares the words out evenly across the lines, so a
   two-line lead never ends with one stranded character. */
.lead { max-width: 58rem; color: var(--muted); font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.7; text-wrap: balance; }
.eyebrow { color: var(--bright); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .6rem; }
.minor-heading { font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .85rem; }
html[data-lang="zh"] .minor-heading { text-transform: none; letter-spacing: .08em; font-size: .92rem; }

.icon { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; }

.skip-link { position: fixed; z-index: 1100; top: .5rem; left: .5rem; transform: translateY(-200%); padding: .75rem 1rem; background: #fff; color: var(--navy); border-radius: .5rem; box-shadow: 0 .5rem 2rem rgba(0,0,0,.2); }
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid var(--bright); outline-offset: 2px; border-radius: .3rem; }

/* Keep a linked section clear of the sticky header */
[id] { scroll-margin-top: 6rem; }

/* --------------------------------------------------------------- header --- */
.site-header { z-index: 1020; transition: box-shadow .2s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 .35rem 1.4rem rgba(0, 31, 72, .08); }
.navbar { min-height: 78px; }
/* Keep the brand and the menu button on one row. Without this the brand is
   treated as unshrinkable and, on a 390px phone, pushes the menu button onto a
   second line under it. The brand's own text wraps instead. */
.site-header .navbar > .container { flex-wrap: nowrap; }
.navbar-brand { min-width: 0; }
.navbar-brand img { object-fit: contain; transition: transform .28s var(--ease); }
.navbar-brand:hover img { transform: scale(1.06); }
.brand-copy { min-width: 0; display: flex; flex-direction: column; color: var(--ink); line-height: 1.15; }
.brand-copy strong { font-size: 1.14rem; font-weight: 800; letter-spacing: .06em; }
.brand-copy small { max-width: 22rem; margin-top: .22rem; color: var(--muted); font-size: .74rem; font-weight: 500; }
/* Bootstrap's nowrap brand rule must not make the association name overlap
   the mobile menu or overflow a narrow viewport. */
@media (max-width:1199.98px) {
  .site-header .brand-copy small { white-space:normal; overflow-wrap:anywhere; }
}
.navbar .nav-link { color: #2c3642; font-weight: 600; border-radius: .45rem; padding: .6rem .7rem !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--blue); background: var(--sky); }

/* Language switch — a text control, deliberately a step below the Join button */
.lang-switch { display: inline-flex; align-items: center; gap: .1rem; }
.lang-switch button { border: 0; background: none; padding: .3rem .34rem; font-size: .8rem; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: .3rem; line-height: 1.2; }
.lang-switch button:hover { color: var(--blue); }
.lang-switch button[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.lang-switch .lang-sep { color: var(--line); font-size: .8rem; user-select: none; }

/* --------------------------------------------------------------- buttons -- */
.btn { border-radius: .55rem; font-weight: 650; padding: .62rem 1.15rem; }
.btn-lg { padding: .8rem 1.6rem; }
.btn-primary { background: var(--blue); border-color: var(--blue); }
.btn-primary:hover, .btn-primary:focus { background: var(--navy); border-color: var(--navy); }
.btn-outline-primary { color: var(--blue); border-color: var(--blue); }
.btn-outline-primary:hover { background: var(--blue); border-color: var(--blue); }
.btn-light { background: #fff; border-color: #fff; color: var(--blue); }
.btn-light:hover { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.btn .icon { margin-left: .4rem; transition: transform .22s var(--ease); }
.btn:hover .icon { transform: translateX(.18rem); }
.text-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--blue); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link .icon { transition: transform .22s var(--ease); }
.text-link:hover .icon { transform: translateX(.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.section-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* -------------------------------------------------------------- sections -- */
.section { padding: clamp(2rem, 3.6vw, 3rem) 0; }
.section-tinted { background: var(--soft); }
.section-heading { max-width: 60rem; margin-bottom: 1.6rem; }
.section-note { max-width: 58rem; margin-top: 1.25rem; color: var(--muted); font-size: .95rem; text-wrap: balance; }
/* A section whose heading carries its action on the right. */
.section-head-row { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                    gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.section-head-row > :first-child { min-width: 0; }
.section-head-row .section-heading { margin-bottom: 0; }
.section-head-row .section-note { margin-top: 1rem; }
.section-head-action .btn { white-space: nowrap; }
.statement { max-width: 58rem; margin: 0; text-wrap: balance; color: #263648; font-size: clamp(1.2rem, 2.1vw, 1.7rem); line-height: 1.55; font-weight: 500; }

/* About: the opening statement is the page-level intro layer: below the hero
   lead, above section headings/body copy. The colour emblem balances that copy
   on desktop and is aligned to the same container edge as the rest of the site. */
.about-intro-layout {
  display:grid;
  grid-template-columns:minmax(0,58rem) minmax(13rem,1fr);
  gap:clamp(2.75rem,5vw,5.5rem);
  align-items:center;
}
.about-intro-layout .statement { max-width:58rem; }
.about-intro-logo {
  width:clamp(15.5rem,17vw,16.5rem);
  aspect-ratio:1;
  justify-self:end;
  align-self:center;
}
.about-intro-logo img { display:block; width:100%; height:100%; object-fit:contain; }
@media (max-width:991.98px) {
  .about-intro-layout { grid-template-columns:minmax(0,1fr) 10.5rem; gap:2rem; }
  .about-intro-logo { width:10.5rem; }
}
@media (max-width:767.98px) {
  .about-intro-layout { grid-template-columns:1fr; }
  .about-intro-logo { display:none; }
}

/* The home banner. Its height is fixed per breakpoint so artwork can be drawn
   against a known shape. Three shapes, three images:
     >=992px   1440 x 640  wide      copy left, emblem right
     576-991   820 x 600   tablet    emblem above copy
     <=575px   390 x 740   phone     emblem above copy
   background-size:cover centres the image and crops the overflow, so the part
   of the drawing that matters must sit in the middle of the canvas. */
.hero { background: radial-gradient(circle at 86% 18%, #eef4ff 0, #fff 46%, #fff 100%); border-bottom: 1px solid var(--line); padding: clamp(2.25rem, 4vw, 3.5rem) 0; }
.hero-home { display: flex; align-items: center; min-height: 640px;
             background-size: cover; background-position: center;
             background-repeat: no-repeat; }
.hero-home > .container { width: 100%; }
@media (max-width: 991.98px) { .hero-home { min-height: 600px; } }
@media (max-width: 575.98px)  { .hero-home { min-height: 740px; } }

/* To use the artwork, save the three files under src/assets/img/ and delete the
   comment markers around the block below. Keep the artwork pale: the heading,
   lead and buttons sit on top of it in navy and have to stay readable. The
   gradient above is the fallback and shows wherever a file is missing.
.hero-home { background-image: url("../img/hero-home.jpg"); }
@media (max-width: 991.98px) { .hero-home { background-image: url("../img/hero-home-tablet.jpg"); } }
@media (max-width: 575.98px)  { .hero-home { background-image: url("../img/hero-home-phone.jpg"); } }
*/
.hero-home-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-emblem-wrap { display: flex; justify-content: center; }
.hero-emblem { width: min(100%, 22rem); height: auto; filter: drop-shadow(0 1.2rem 2.4rem rgba(0, 31, 72, .12)); }
.page-hero { background: linear-gradient(180deg, #f7f9fd 0, #fff 100%); border-bottom: 1px solid var(--line); padding: clamp(2rem, 3.6vw, 3rem) 0; }
.page-hero-slim { padding: clamp(1.75rem, 3vw, 2.5rem) 0; }
.page-hero-centre { text-align: center; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.page-hero-centre .lead { margin-inline: auto; }
.page-hero-centre .hero-actions { justify-content: center; }


/* ----------------------------------------------------------------- cards -- */
.card { height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); transition: transform .24s var(--ease), box-shadow .24s var(--ease); }
.card h3 { margin-bottom: .65rem; }
.card p { margin-bottom: 0; color: var(--muted); }
/* A card with only a heading should not keep the gap that a body would fill. */
.card > h3:only-child { margin-bottom: 0; }
.card:has(> h3:only-child) { padding-block: 1.35rem; }
.card-quiet { background: var(--soft); box-shadow: none; }
.section-tinted .card-quiet { background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  /* The same lift for the site's other bordered boxes, so a tile, a pill and a
     plain list box all answer the pointer the same way. Links additionally take
     the brand colour; these plain boxes only lift. */
  .tag-grid li:hover, .who-list li:hover {
    transform: translateY(-2px); border-color: #bcd3f0; box-shadow: var(--shadow-lift);
  }
}
.tag-grid li, .who-list li {
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}

/* Vertical padding trimmed so the panel is about a fifth shorter at desktop
   widths; the side padding is unchanged. */
.cta-panel { padding: clamp(1.5rem, 3.2vw, 2.2rem) clamp(2.25rem, 5vw, 3.5rem); border-radius: 1.25rem; background: linear-gradient(125deg, var(--navy), #0a54ab); color: #fff; box-shadow: 0 1.5rem 3rem rgba(0, 31, 72, .18); }
.cta-panel h2 { color: #fff; margin-bottom: .8rem; }
.cta-panel p { max-width: 46rem; margin-bottom: 0; color: rgba(255, 255, 255, .88); }
/* Copy left, action right, both on the panel's centre line. */
.cta-panel-split { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                   gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.cta-panel-split .cta-panel-copy { min-width: 0; }
.cta-panel-split .cta-panel-action .btn { white-space: nowrap; padding: .8rem 1.7rem; }

/* ------------------------------------------------------- industry tiles --- */
/* Every card grid is three across, left-aligned; a short last row simply ends early */
.industry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.industry-tile { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: .9rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease); }
/* The industry glyph sits above the name, balancing the arrow top-right. */
.tile-icon { width: 1.75rem; height: 1.75rem; stroke-width: 1.6; color: var(--blue);
             margin-bottom: .35rem; vertical-align: baseline;
             transition: color .24s var(--ease), transform .24s var(--ease); }
.industry-tile:hover .tile-icon { color: var(--bright); transform: translateY(-1px); }
.industry-tile-name { font-weight: 700; font-size: 1.05rem; padding-right: 1.5rem; }
.industry-tile-teaser { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.industry-tile-go { position: absolute; top: 1.4rem; right: 1.35rem; color: var(--bright); opacity: .55; transition: transform .24s var(--ease), opacity .24s var(--ease); }
.industry-tile:hover { transform: translateY(-3px); border-color: #bcd3f0; box-shadow: var(--shadow-lift); color: var(--ink); }
.industry-tile:hover .industry-tile-go { transform: translateX(.2rem); opacity: 1; }

/* ---------------------------------------------------- industry details ---- */
.industry-details { display: grid; gap: 1.25rem; }
.industry-detail { scroll-margin-top: 6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.5rem); box-shadow: var(--shadow); }
.industry-detail > h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); margin-bottom: .9rem; }
.industry-detail .lead { font-size: 1.05rem; max-width: 62rem; }
/* A question and its note belong together; the gap goes between the pairs */
.qa-list { margin: 0 0 1.75rem; }
.qa-list dt { font-weight: 700; color: var(--navy); margin-top: 1.15rem; }
.qa-list dt:first-child { margin-top: 0; }
.qa-list dd { margin: .2rem 0 0; color: var(--muted); }
.starting-info { padding: 1.15rem 1.35rem; background: var(--soft); border-radius: .75rem; border: 1px solid var(--line); }
.starting-info p { margin-bottom: 0; color: var(--ink); }
.detail-link { margin: 1.35rem 0 0; }

/* -------------------------------------------------------------- tag grid -- */
.tag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; list-style: none; padding: 0; margin: 0; }
.tag-grid li { display: flex; align-items: center; min-height: 3.6rem; padding: .85rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: .7rem; box-shadow: var(--shadow); font-weight: 600; }
.section-tinted .tag-grid li { background: #fff; }
/* An odd-numbered list reads as two balanced columns, not a ragged grid */
.tag-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; }

/* --------------------------------------------------------- source guide --- */
.source-list { display: grid; gap: 1rem; }
.source-row { scroll-margin-top: 6rem; padding: 1.4rem 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: .85rem; box-shadow: var(--shadow); }
.source-row h3 { margin-bottom: .5rem; }
.source-row p { margin-bottom: .6rem; color: var(--muted); }
.source-links { margin-bottom: 0 !important; font-weight: 600; }
.source-links a { color: var(--blue); }
.resource-group-title { margin-bottom: .9rem; }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.link-list a { font-weight: 600; }

/* -------------------------------------------------------- note articles --- */
.note-list { display: grid; gap: 1.25rem; }
.note-card { scroll-margin-top: 6rem; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--bright); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.25rem); box-shadow: var(--shadow); }
.note-card h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: .9rem; }
.note-card p { max-width: 62rem; color: #35404d; }
.note-prompt { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--blue); font-weight: 650; }

.empty-state { padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--soft); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.section-actions + .empty-state, .section-heading + .empty-state { margin-top: 1.75rem; }
.section-tinted .empty-state { background: #fff; }
.empty-state p { margin-bottom: 0; text-wrap: balance; }

/* -------------------------------------------------------------- contact --- */
.contact-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
.contact-item h2 { font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
html[data-lang="zh"] .contact-item h2 { text-transform: none; letter-spacing: .08em; font-size: .92rem; }
.contact-item p { margin-bottom: 0; font-size: 1.15rem; font-weight: 650; }
.subject-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.subject-tile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: .75rem; font-weight: 650; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); }
.subject-tile .icon { color: var(--bright); }
.subject-tile:hover { transform: translateY(-2px); border-color: #bcd3f0; box-shadow: var(--shadow-lift); color: var(--blue); }

/* ----------------------------------------------------------- step / faq --- */
/* Joining: the three steps read as one connected route, with the membership
   card beside them carrying the two things a reader can do next. */
/* The join page's first screen: the invitation and its one action on the left,
   the membership card on the right. Deliberately taller than the other page
   heroes so the sections below start under the fold — the rest of the site
   keeps the tightened spacing. */
/* Sized against the viewport, not the page width, so the first screen holds
   the invitation and its one action at any window height and the sections
   below always start under the fold. Capped so a tall monitor does not turn
   it into an empty field. */
.join-hero { display: flex; align-items: center; padding: clamp(2.5rem, 6vw, 5rem) 0;
             min-height: min(calc(100vh - 4.9rem), 60rem);
             min-height: min(calc(100svh - 4.9rem), 60rem); }
.join-hero > .container { width: 100%; }
.join-hero-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(19rem, 4fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.join-hero-layout > * { min-width: 0; }
.join-hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
.join-hero .lead { max-width: 34rem; margin-top: 1.1rem; }
.join-hero .hero-actions { margin-top: 2rem; }
.join-hero .hero-actions .btn { padding: .8rem 1.7rem; font-size: 1.05rem; }

/* The three steps, back beside the membership card. */
.membership-start-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(19rem, 4fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.membership-start-layout > * { min-width: 0; }
.process-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.process-list li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.1rem; position: relative; padding-bottom: 1.75rem; }
.process-list li:last-child { padding-bottom: 0; }
.process-list li::before { content: ""; position: absolute; left: 1.32rem; top: 3rem; bottom: .25rem; width: 1px; background: var(--line); }
.process-list li:last-child::before { display: none; }

/* Who can get involved — the hero's right column. Deliberately quiet: a small
   heading, one line of copy and a plain two-column list, so nothing here
   competes with the join button on the left. */
.join-hero-who .minor-heading { margin-bottom: .55rem; }
.who-lead { margin-bottom: 1.15rem; color: var(--muted); font-size: .95rem; }
.who-list { display: grid; grid-template-columns: 1fr; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.who-list li { padding: .72rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: .6rem;
               box-shadow: var(--shadow); color: var(--ink); font-size: .92rem; font-weight: 600; line-height: 1.4; }
.step-num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; font-size: 1.05rem; }
.process-list h3 { margin-bottom: .3rem; font-size: 1.12rem; }
.process-list p { margin-bottom: 0; color: var(--muted); }
.membership-start-card { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--soft); border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: var(--shadow); }
.section-tinted .membership-start-card { background: #fff; }
.membership-start-card h3 { margin-bottom: .75rem; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.2; }
.membership-start-card p:not(.eyebrow) { margin-bottom: 0; color: var(--muted); }
.membership-start-actions { display: grid; gap: .7rem; margin-top: 2rem; }
.membership-start-actions .btn { width: 100%; justify-content: center; }

.faq-list { display: grid; gap: .75rem; max-width: 58rem; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: .8rem; padding: 1.1rem 1.35rem; box-shadow: var(--shadow); }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--bright); font-size: 1.4rem; line-height: 1; font-weight: 500; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: .85rem 0 0; color: var(--muted); }

/* ----------------------------------------------------------------- forms -- */
.enquiry-form { max-width: 56rem; }
/* On its own page the form is the whole content, so it sits centred
   rather than hugging the left edge of a full-width container. */
.form-page .enquiry-form, .form-page .breadcrumb,
.form-page h1, .form-page .page-hero .lead { margin-inline: auto; }
.form-page .page-hero .container, .form-page .section .container { max-width: 56rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.15rem; margin-bottom: 1.75rem; }
.form-field { display: flex; flex-direction: column; }
.form-label { font-weight: 650; font-size: .94rem; margin-bottom: .35rem; }
.form-control, .form-select { border-radius: .55rem; border-color: var(--line); padding: .6rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--bright); box-shadow: 0 0 0 .2rem rgba(14, 106, 210, .15); }
.field-hint { margin: .4rem 0 0; color: var(--muted); font-size: .82rem; }
html[data-lang="zh"] .field-hint { font-size: .85rem; }
.field-group { margin-bottom: 1.75rem; padding: 1.25rem 1.4rem; background: var(--soft); border: 1px solid var(--line); border-radius: .85rem; }
.section-tinted .field-group { background: #fff; }
.field-group legend { float: none; width: auto; font-weight: 700; font-size: 1rem; margin-bottom: .85rem; }
.field-group.is-invalid { border-color: #c62828; }
.group-error { margin: .6rem 0 0; color: #c62828; font-size: .88rem; font-weight: 600; }
/* English labels are long and want three roomy columns; Chinese labels are two
   to seven characters, and at three columns each one trails 200px of empty
   cell. Four columns in Chinese puts them close enough to read as one group,
   and leaves no row holding a single item (7 -> 4,3 · 10 -> 4,4,2 · 8 -> 4,4). */
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .35rem .9rem; }
html[data-lang="zh"] .check-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.form-check { margin-bottom: .6rem; }
.form-check-input { border-color: var(--silver); }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.form-check-label { font-size: .95rem; }
.enquiry-form > .form-check { max-width: 54rem; margin-bottom: 1rem; }
.form-status { margin: 1rem 0 0; font-weight: 650; min-height: 1.4rem; }
.form-status.is-error { color: #c62828; }
.form-status.is-success { color: #1b7a3d; }
/* Sits under the consent it explains; .form-check already indents past the box */
.form-note { margin: .3rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.7; }
html[data-lang="zh"] .form-note { font-size: .85rem; }
/* Statements are fine print: smallest type, no box around them. */
.collection-statement { max-width: 56rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.collection-statement h3 { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin-bottom: .5rem; }
.collection-statement p { margin-bottom: 0; color: var(--muted); font-size: .82rem; line-height: 1.8; }
html[data-lang="zh"] .collection-statement h3,
html[data-lang="zh"] .collection-statement p { font-size: .85rem; }

/* ------------------------------------------------------------ newsletter -- */
.newsletter-section { background: var(--navy); color: #fff; }
.newsletter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.newsletter h2 { color: #fff; margin-bottom: .75rem; }
.newsletter-copy p { color: rgba(255, 255, 255, .82); margin-bottom: 0; max-width: 32rem; text-wrap: balance; }
.newsletter-form .form-label { color: rgba(255, 255, 255, .9); }
.newsletter-side { min-width: 0; }
.newsletter-row { margin-bottom: .9rem; max-width: 34rem; }
/* The subscribe button sits on the same line as the address it applies to */
.newsletter-field { display: flex; gap: .6rem; align-items: stretch; }
.newsletter-field .form-control { flex: 1 1 auto; min-width: 0; }
.newsletter-field .btn { flex: 0 0 auto; }
.newsletter-form .form-check-label { color: rgba(255, 255, 255, .82); font-size: .88rem; }
.newsletter-form .form-check-label a { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
.newsletter-form .form-check-input { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); }
/* Bootstrap draws its tick in white. On the white box of the dark band that
   would be white on white, so the tick is redrawn in the brand navy. */
.newsletter-form .form-check-input:checked {
  background-color: #fff; border-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23023370' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.newsletter-form .btn-primary { background: #fff; border-color: #fff; color: var(--navy); }
.newsletter-form .btn-primary:hover { background: var(--sky); border-color: var(--sky); }
.newsletter-form .form-status { color: #fff; }
.newsletter-form .form-status.is-error { color: #ffc4c4; }
.newsletter-form .form-status.is-success { color: #b8f0cd; }

/* ---------------------------------------------------------------- footer -- */
.site-footer { background: #0b1526; color: rgba(255, 255, 255, .74); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr)); gap: clamp(1.75rem, 4vw, 3.5rem); }
.footer-brand img { margin-bottom: 1rem; }
.footer-brand p { max-width: 26rem; font-size: .95rem; }
.footer-email a { color: #fff; font-weight: 650; }
.footer-col h3 { color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .9rem; }
html[data-lang="zh"] .footer-col h3 { text-transform: none; letter-spacing: .08em; font-size: .95rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-col a { color: rgba(255, 255, 255, .74); text-decoration: none; font-size: .95rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-legal { margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: .85rem; }
.footer-legal p { margin-bottom: 0; }
.footer-entity span { display: block; }
html[data-lang="en"] .footer-entity span[lang="zh-Hant-HK"] { color: rgba(255, 255, 255, .55); }

.back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; width: 2.85rem; height: 2.85rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--blue); box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none; transform: translateY(.5rem); transition: opacity .22s var(--ease), transform .22s var(--ease); }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }


/* ---------------------------------------------------- form validation ----- */
.field-error { margin: .4rem 0 0; color: #c62828; font-size: .88rem; font-weight: 600; }
.group-error { margin: .6rem 0 0; color: #c62828; font-size: .88rem; font-weight: 600; }
.form-control.is-invalid, .form-select.is-invalid { border-color: #c62828; background-image: none; }
.form-check .field-error { margin-left: 1.6rem; }

[hidden] { display: none !important; }

/* ------------------------------------------------- related organisations --- */
.related-groups { display: grid; gap: 0; }
.related-group + .related-group { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line); }
.related-group h3 { margin-bottom: .85rem; font-size: 1.02rem; }
.related-links-grid { display: flex; flex-wrap: wrap; gap: .55rem; }
.related-link { flex: 1 1 6.8rem; max-width: 15rem; display: flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .6rem .7rem; background: #fff; border: 1px solid var(--line); border-radius: .65rem; box-shadow: var(--shadow); color: var(--ink); font-size: .86rem; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); }
.related-link:hover { transform: translateY(-2px); border-color: #bcd3f0; box-shadow: var(--shadow-lift); color: var(--blue); }

/* ------------------------------------------------------- industry pages --- */
.breadcrumb { margin-bottom: .9rem; font-size: .9rem; font-weight: 650; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a::before { content: "\2190"; margin-right: .4rem; }
.breadcrumb a:hover { color: var(--blue); }
.industry-switch ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; list-style: none; padding: 0; margin: 0; }
.industry-switch a { display: block; padding: .75rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: .6rem; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; transition: border-color .2s var(--ease), color .2s var(--ease); }
.industry-switch a:hover { border-color: #bcd3f0; color: var(--blue); }

/* --------------------------------------------------------------- policy --- */
.policy-body { max-width: 52rem; }
.policy-part + .policy-part { margin-top: 2.5rem; }
.policy-part h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); margin-bottom: .8rem; }
.policy-part p { color: #35404d; line-height: 1.8; margin-bottom: 0; }
.policy-updated { margin-top: 1.1rem; margin-bottom: 0; color: var(--muted); font-size: .88rem; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 991.98px) {
  .join-hero-layout { grid-template-columns: 1fr; gap: 2rem; }
  .cta-panel-split { grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }
  .section-head-row { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .join-hero-who { padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .membership-start-layout { grid-template-columns: 1fr; gap: 2.25rem; }
  .industry-grid, .tag-grid, .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industry-switch ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tag-grid-wide { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .hero-home-grid { grid-template-columns: 1fr; }
  .hero-emblem-wrap { order: -1; }
  .hero-emblem { width: min(60%, 13rem); }
  .newsletter { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .industry-grid, .tag-grid, .subject-grid, .industry-switch ul { grid-template-columns: 1fr; }
  .newsletter-field { flex-wrap: wrap; }
  .newsletter-field .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .related-link { flex-basis: 6.2rem; max-width: 12rem; }
  .industry-tile-name { padding-right: 0; }
  .industry-tile-go { display: none; }
}
/* Bootstrap's negative row gutters can exceed the container padding on phones */
@media (max-width: 767.98px) {
  .container > .row, .container > * > .row { --bs-gutter-x: 1.5rem; }
}

/* ========================================================================
   FINAL VISUAL UNIFICATION — 2026-10
   One banner system, one type hierarchy, one footer system.
   ======================================================================== */
:root {
  --hero-bg: radial-gradient(circle at 88% 12%, rgba(72,151,231,.30), transparent 29%),
             linear-gradient(125deg, #023370 0%, #0a54ab 100%);
  --hero-text: #ffffff;
  --hero-muted: rgba(255,255,255,.76);
  --type-eyebrow: .78rem;
  --type-minor: .82rem;
  --type-caption: .82rem;
}

/* Same hierarchy in English and Traditional Chinese. Language can change the
   font family and line-height, but not the semantic size, weight or colour. */
h1, h2, h3 { color: var(--ink); }
.minor-heading,
html[data-lang="zh"] .minor-heading {
  font-size: var(--type-minor);
  font-weight: 800;
  color: var(--muted);
}
html[data-lang="zh"] .minor-heading { text-transform: none; letter-spacing: .08em; }
.contact-item h2,
html[data-lang="zh"] .contact-item h2 {
  font-size: var(--type-minor);
  font-weight: 800;
  color: var(--muted);
}
html[data-lang="zh"] .contact-item h2 { text-transform: none; letter-spacing: .08em; }
.field-hint,
html[data-lang="zh"] .field-hint,
.form-note,
html[data-lang="zh"] .form-note,
.collection-statement h3,
.collection-statement p,
html[data-lang="zh"] .collection-statement h3,
html[data-lang="zh"] .collection-statement p { font-size: var(--type-caption); }

/* All page banners use the same HF2A gradient. Only the home page receives the
   transparent emblem watermark below. */
.page-hero {
  position: relative;
  overflow: hidden;
  color: var(--hero-text);
  background: var(--hero-bg);
  border-bottom: 0;
}
.page-hero h1,
.page-hero h2,
.page-hero h3 { color: var(--hero-text); }
.page-hero .lead,
.page-hero .who-lead { color: var(--hero-muted); }
.page-hero .minor-heading { color: rgba(255,255,255,.72); }
.page-hero .breadcrumb a { color: rgba(255,255,255,.72); }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero .hero-actions .btn-primary { background:#fff; border-color:#fff; color:var(--blue); }
.page-hero .hero-actions .btn-primary:hover,
.page-hero .hero-actions .btn-primary:focus { background:var(--sky); border-color:var(--sky); color:var(--navy); }
.page-hero .hero-actions .btn-outline-primary { color:#fff; border-color:rgba(255,255,255,.62); background:rgba(255,255,255,.06); }
.page-hero .hero-actions .btn-outline-primary:hover { background:#fff; border-color:#fff; color:var(--blue); }
.join-hero-who { color:#fff; }
.join-hero .who-list li { color:var(--ink); }
@media (max-width: 991.98px) {
  .join-hero-who { border-top-color: rgba(255,255,255,.22); }
}

/* Home hero: same banner colour, with the only site-wide transparent emblem. */
.hero-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 400px;
  padding: clamp(3.55rem,5vw,4.65rem) 0 clamp(3.25rem,4.5vw,4rem);
  color: #fff;
  background: var(--hero-bg);
}
.hero-home::before {
  content:"";
  position:absolute;
  z-index:-2;
  width:34rem;
  height:34rem;
  right:-7rem;
  top:-9rem;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 43%,transparent 70%);
  pointer-events:none;
}
.hero-home > .container { position:relative; width:100%; z-index:2; }
.hero-home-grid { display:block; max-width:100%; position:relative; }
.hero-copy { position:relative; z-index:3; max-width:100%; }
.hero-copy .eyebrow { color:rgba(255,255,255,.76); }
.hero-copy h1 {
  color:#fff;
  max-width:none;
  margin-right:0;
  font-size:clamp(2.35rem,2.8vw,3rem);
  line-height:1.1;
  letter-spacing:-.035em;
}
html[data-lang="en"] .hero-copy h1 { white-space:nowrap; }
.hero-copy .lead {
  max-width:47rem;
  color:var(--hero-muted);
  font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.7;
}
.hero-home .hero-actions {
  position:relative;
  z-index:4;
  margin-top:1.55rem;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:.75rem;
  flex-wrap:wrap;
}
.hero-home .hero-actions .btn {
  white-space:nowrap;
  min-height:3.1rem;
  padding:.72rem 1.18rem;
  border-radius:.85rem;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.hero-home .hero-actions .btn-primary {
  color:#073b73;
  background:#fff;
  border-color:#fff;
  box-shadow:0 .7rem 1.55rem rgba(0,31,72,.15);
}
.hero-home .hero-actions .btn-primary:hover,
.hero-home .hero-actions .btn-primary:focus-visible { color:#073b73; background:#eef6ff; border-color:#eef6ff; transform:translateY(-1px); }
.hero-home .hero-actions .btn-outline-primary { color:#fff; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.60); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.hero-home .hero-actions .btn-outline-primary:hover,
.hero-home .hero-actions .btn-outline-primary:focus-visible { color:#073b73; background:#fff; border-color:#fff; transform:translateY(-1px); }
.hero-watermark {
  position:absolute;
  z-index:1;
  top:50%;
  right:clamp(.55rem,1.8vw,1.1rem);
  width:clamp(18.9rem,19.8vw,20.4rem);
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  pointer-events:none;
}
.hero-watermark img {
  display:block;
  width:100%;
  height:auto;
  opacity:.16;
  user-select:none;
}

/* Home focus section. */
.home-purpose { padding:clamp(3.8rem,6vw,5.6rem) 0; }
.purpose-layout { display:grid; grid-template-columns:minmax(15rem,.78fr) minmax(0,1.45fr); gap:clamp(2.8rem,6vw,6rem); align-items:start; }
.purpose-intro { position:sticky; top:7rem; }
.purpose-title { margin-bottom:1.2rem; line-height:1.08; font-size:clamp(2rem,3.25vw,3.15rem); }
.purpose-intro { min-width:0; }
/* Keep the approved two-line title within its own desktop column. */
@media (min-width:992px) {
  .purpose-intro { container-type:inline-size; }
  .purpose-title { font-size:clamp(1.5rem,2.3vw,2.2rem); }
  @supports (font-size:1cqi) {
    .purpose-title { font-size:clamp(1.5rem,8.15cqi,3.15rem); }
  }
}
.purpose-title .purpose-title-en,
.purpose-title .purpose-title-zh { display:none; white-space:nowrap; }
html[data-lang="en"] .purpose-title .purpose-title-en { display:inline; }
html[data-lang="zh"] .purpose-title .purpose-title-zh { display:inline; }
.purpose-intro .lead { max-width:26rem; font-size:1rem; }
.purpose-cards { display:grid; gap:1rem; }
.purpose-card {
  display:grid;
  grid-template-columns:3.2rem minmax(0,1fr);
  gap:1rem;
  align-items:start;
  padding:1.45rem 1.6rem;
  border:1px solid rgba(184,204,227,.72);
  border-radius:1.1rem;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(247,250,253,.82));
  box-shadow:0 .75rem 2rem rgba(2,51,112,.045);
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.purpose-card-link { color:inherit; text-decoration:none; cursor:pointer; }
.purpose-card-link:hover,
.purpose-card-link:focus-visible { color:inherit; text-decoration:none; transform:translateY(-2px); border-color:rgba(40,112,194,.42); box-shadow:0 1rem 2.4rem rgba(2,51,112,.08); }
.purpose-card-link:focus-visible { outline:3px solid rgba(33,113,196,.18); outline-offset:3px; }
.purpose-icon { width:3.2rem; height:3.2rem; display:grid; place-items:center; border:1px solid #c7dbf2; border-radius:.95rem; color:var(--blue); background:#f7fbff; }
.purpose-icon svg { width:1.35rem; height:1.35rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.purpose-card h3 { margin:0 0 .4rem; font-size:1.16rem; }
.purpose-card p { margin:0; color:var(--muted); font-size:.95rem; line-height:1.65; }
.home-related { padding-bottom:clamp(3.5rem,5vw,4.75rem); }
.home-related .related-groups { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.home-related .related-group + .related-group { margin-top:clamp(1.5rem,3vw,2.25rem); padding-top:clamp(1.5rem,3vw,2.25rem); }
.home-related .related-link { background:rgba(255,255,255,.72); border-color:rgba(194,208,225,.72); box-shadow:0 .3rem 1rem rgba(2,51,112,.035); }

/* One continuous footer; the subscription is a column, not a separate band. */
.site-footer { background:#0b1526; color:rgba(255,255,255,.74); padding:3rem 0 1.2rem; border-top:0; }
.footer-grid { display:grid; grid-template-columns:minmax(15rem,1.35fr) repeat(3,minmax(7.5rem,.66fr)) minmax(19rem,1.35fr); gap:clamp(1.4rem,2.6vw,2.8rem); align-items:start; }
.footer-brand img { width:46px; height:46px; margin-bottom:.85rem; }
.footer-brand p { font-size:.86rem; line-height:1.62; margin-bottom:.6rem; max-width:23rem; }
.footer-email { margin-bottom:0!important; }
.footer-col h3,
.footer-newsletter h3,
html[data-lang="zh"] .footer-col h3,
html[data-lang="zh"] .footer-newsletter h3 {
  margin:0 0 .85rem;
  color:rgba(255,255,255,.56);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
html[data-lang="zh"] .footer-col h3,
html[data-lang="zh"] .footer-newsletter h3 { text-transform:none; letter-spacing:.08em; }
.footer-col ul { gap:.42rem; }
.footer-col a { font-size:.86rem; color:rgba(255,255,255,.76); }
.footer-col a:hover { color:#fff; }
.footer-newsletter { min-width:0; }
.footer-newsletter .newsletter-form { width:100%; }
.footer-newsletter .newsletter-row { margin-bottom:.62rem; max-width:none; }
.footer-newsletter .newsletter-field { display:flex; gap:.48rem; align-items:stretch; }
.footer-newsletter .newsletter-field .form-control { flex:1 1 auto; min-width:0; min-height:2.55rem; padding:.5rem .7rem; border-color:rgba(255,255,255,.18); background:#fff; }
.footer-newsletter .newsletter-field .btn { flex:0 0 auto; min-height:2.55rem; padding:.5rem .85rem; background:#fff; border-color:#fff; color:#0b1526; }
.footer-newsletter .newsletter-field .btn:hover { background:#dceeff; border-color:#dceeff; color:#0b1526; }
.footer-newsletter .form-check { display:flex; align-items:flex-start; gap:.45rem; padding-left:0; margin:0; }
.footer-newsletter .form-check-input { float:none; flex:0 0 auto; width:.82rem; height:.82rem; margin:.18rem 0 0; background-color:rgba(255,255,255,.08); border-color:rgba(255,255,255,.42); }
.footer-newsletter .form-check-input:checked { background-color:#fff; border-color:#fff; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23023370' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.footer-newsletter .form-check-label { color:rgba(255,255,255,.58); font-size:.64rem; line-height:1.45; }
.footer-newsletter .form-check-label a { color:rgba(255,255,255,.82); text-decoration-color:rgba(255,255,255,.35); }
.footer-newsletter .form-status { margin:.4rem 0 0; color:#fff; font-size:.72rem; min-height:0; }
.footer-newsletter .form-status.is-error { color:#ffc4c4; }
.footer-newsletter .form-status.is-success { color:#b8f0cd; }
.footer-legal { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-top:2.55rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.10); font-size:.76rem; }
.footer-legal p { margin-bottom:0; }

@media (max-width:1199.98px) {
  .hero-watermark { right:.3rem; width:15.9rem; }
  .hero-watermark img { opacity:.13; }
  .footer-grid { grid-template-columns:minmax(14rem,1.2fr) repeat(2,minmax(8rem,.7fr)); }
  .footer-brand { grid-row:span 2; }
  .footer-newsletter { grid-column:2/4; }
}
@media (max-width:991.98px) {
  .hero-home { min-height:auto; padding:3.8rem 0 3.55rem; }
  .hero-watermark { right:.1rem; width:12.6rem; }
  .hero-watermark img { opacity:.11; }
  html[data-lang="en"] .hero-copy h1 { white-space:normal; }
  .purpose-layout { grid-template-columns:1fr; gap:2rem; }
  .purpose-intro { position:static; }
  .purpose-intro .lead { max-width:40rem; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-brand { grid-column:1/-1; grid-row:auto; }
  .footer-newsletter { grid-column:1/-1; max-width:38rem; }
}
@media (max-width:767.98px) {
  .hero-watermark { right:-.15rem; width:9.9rem; }
  .hero-watermark img { opacity:.08; }
}
@media (max-width:575.98px) {
  .hero-home { padding:3.15rem 0 3.1rem; }
  .hero-watermark { right:-.35rem; width:8.1rem; }
  .hero-watermark img { opacity:.06; }
  .hero-copy h1 { font-size:clamp(2.15rem,10vw,2.75rem); }
  .hero-home .hero-actions { margin-top:1.35rem; gap:.6rem; }
  .hero-home .hero-actions .btn { min-height:2.9rem; padding:.66rem .95rem; }
  .purpose-title { font-size:clamp(1.5rem,7.5vw,2rem); }
  .purpose-card { grid-template-columns:2.85rem minmax(0,1fr); padding:1.25rem; }
  .purpose-icon { width:2.85rem; height:2.85rem; }
  .site-footer { padding:2.35rem 0 1rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:1.5rem 1.25rem; }
  .footer-brand,.footer-newsletter { grid-column:1/-1; }
  .footer-col:last-of-type { grid-column:1/-1; }
  .footer-col:last-of-type ul { grid-template-columns:1fr 1fr; }
  .footer-newsletter .newsletter-field { flex-wrap:wrap; }
  .footer-newsletter .newsletter-field .form-control { width:100%; }
  .footer-newsletter .newsletter-field .btn { width:auto; }
  .footer-legal { display:grid; gap:.45rem; margin-top:1.7rem; padding-top:.9rem; }
}



/* FINAL JOIN HERO OVERRIDES — approved 2026-10-03 */
/* Join HF2A hero — restrained association treatment.
   English and Traditional Chinese share one hierarchy, colour system and weight. */
.join-hero-who .minor-heading,
html[data-lang="zh"] .join-hero-who .minor-heading {
  color: rgba(255,255,255,.84) !important;
  font-weight: 550 !important;
  letter-spacing: .075em;
}
.join-hero-who .who-lead,
html[data-lang="zh"] .join-hero-who .who-lead {
  color: #EAF2FA !important;
  font-weight: 400 !important;
}
.join-hero-who .who-list li,
html[data-lang="zh"] .join-hero-who .who-list li {
  color: rgba(255,255,255,.94) !important;
  font-weight: 450 !important;
}

@media (min-width: 992px) {
  .join-hero {
    min-height: clamp(34rem, 72svh, 46rem);
    padding: clamp(2.25rem, 4vw, 3.75rem) 0;
  }
  .join-hero-layout {
    grid-template-columns: minmax(0, 1.03fr) minmax(30rem, .97fr);
    gap: clamp(4rem, 6vw, 6.75rem);
    transform: translateY(-1rem);
  }
  .join-hero h1 {
    font-size: clamp(2.6rem, 4.7vw, 4rem);
    font-weight: 650;
    letter-spacing: -.025em;
  }
  .join-hero .lead {
    max-width: 35rem;
    margin-top: 1.2rem;
    color: #EAF2FA !important;
    font-size: clamp(1.05rem, 1.25vw, 1.17rem);
    font-weight: 400;
    line-height: 1.72;
  }
  .join-hero .hero-actions { margin-top: 1.5rem; }
  .join-hero .hero-actions .btn {
    min-height: 46px;
    padding: .75rem 1.85rem;
    font-size: 1rem;
    font-weight: 600;
  }
  .join-hero-who {
    position: relative;
    min-height: 0;
    padding: .3rem 0 0;
  }
  .join-hero-who::before { display:none; }
  .join-hero-who .minor-heading {
    margin: 0 0 .65rem;
    font-size: .9rem;
  }
  .join-hero-who .who-lead {
    width: min(100%, 31rem);
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
  }
  .join-hero-who .who-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .82rem .9rem;
    margin: 1.45rem 0 0;
    padding: 0;
  }
  .join-hero-who .who-list li {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.15rem;
    padding: .72rem 1rem;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: .625rem;
    background: rgba(255,255,255,.10);
    box-shadow: 0 .55rem 1.4rem rgba(0,28,67,.08);
    -webkit-backdrop-filter: blur(9px) saturate(108%);
    backdrop-filter: blur(9px) saturate(108%);
    font-size: .9rem;
    line-height: 1.42;
    letter-spacing: 0;
    animation: joinAudienceFloat var(--float-time,11s) ease-in-out var(--float-delay,0s) infinite;
    will-change: transform;
    transition: background .24s ease, border-color .24s ease, transform .24s ease;
  }
  .join-hero-who .who-list li:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.30);
  }
  .join-hero-who .who-list li:nth-child(1) { --float-y:-2px; --float-time:10.8s; --float-delay:-.8s; }
  .join-hero-who .who-list li:nth-child(2) { --float-y: 2px; --float-time:12.1s; --float-delay:-2.1s; }
  .join-hero-who .who-list li:nth-child(3) { --float-y:-1.5px; --float-time:11.3s; --float-delay:-3.4s; }
  .join-hero-who .who-list li:nth-child(4) { --float-y: 2px; --float-time:12.6s; --float-delay:-1.7s; }
  .join-hero-who .who-list li:nth-child(5) { --float-y:-2px; --float-time:12s; --float-delay:-4.6s; }
  .join-hero-who .who-list li:nth-child(6) { --float-y: 1.5px; --float-time:11.1s; --float-delay:-2.9s; }
  @keyframes joinAudienceFloat {
    0%,100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,var(--float-y,-2px),0); }
  }
}

@media (max-width: 991.98px) {
  .join-hero { min-height: auto; }
  .join-hero .lead {
    color:#EAF2FA !important;
    font-weight:400;
    line-height:1.7;
  }
  .join-hero-who {
    position: relative;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.20);
  }
  .join-hero-who .who-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .7rem;
    margin-top: 1.2rem;
  }
  .join-hero-who .who-list li {
    position: static;
    width: auto;
    min-height: 3.35rem;
    padding: .76rem .9rem;
    border-radius: .625rem;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.10);
    box-shadow: none;
    font-size:.9rem;
    animation: none;
    transform: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
@media (max-width: 575.98px) {
  .join-hero-who .who-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .join-hero-who .who-list li { animation: none !important; }
}