/* ==========================================================================
   Safe Harbour (Hong Kong) Consultants Limited — site stylesheet
   Design system: forest + copper, Newsreader display, Inter UI, system CJK.
   ========================================================================== */

:root{
  /* deep green taken from the reference swatch #003D2E; the darker and lighter
     steps are derived at the same hue so the family stays coherent */
  --forest-deep:#003D2E; --forest:#0B5541; --forest-dark:#00271D;
  --accent:#A8621F; --accent-deep:#7E4715;
  --ink:#081A14; --stone:#576761; --line:#DEE4E0;
  --paper:#FFFFFF; --band:#F2F6F4; --pain:#FBF3EA;
  --serif:"Newsreader","Source Serif 4",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei","Helvetica Neue",Arial,sans-serif;
  --zh:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Hiragino Sans TC",sans-serif;
  /* Chinese display: a modern HK-style sans. macOS Songti is a newsprint Ming
     face and read as dated beside Newsreader; PingFang TC / Noto Sans TC is
     what current Hong Kong professional-services sites actually set. Latin
     inside a Chinese heading is now set in the same family, not Songti's. */
  --zh-display:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Hiragino Sans TC",sans-serif;
  --wrap:1180px; --pad:36px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0;letter-spacing:-.02em;
  font-optical-sizing:auto;text-wrap:balance}
p{margin:0 0 1rem;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
table{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- language variants ------------------------------------------------- */
:root[lang="zh-HK"] body{font-family:var(--zh);line-height:1.85}
:root[lang="zh-HK"] h1,:root[lang="zh-HK"] h2,:root[lang="zh-HK"] h3,:root[lang="zh-HK"] h4{
  font-family:var(--zh-display);font-weight:500;letter-spacing:0;line-height:1.4;
  word-break:keep-all;line-break:strict}
:root[lang="zh-HK"] p{line-height:1.85}

/* --- skip link, progress, back to top ---------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}
.prog{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0;z-index:120;transition:width .1s linear}
.totop{position:fixed;right:24px;bottom:24px;z-index:120;width:44px;height:44px;border-radius:50%;
  background:var(--forest-deep);color:#F3F1EC;border:0;cursor:pointer;font-size:15px;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s}
.totop.on{opacity:1;visibility:visible;transform:none}

/* --- utility bar + header --------------------------------------------- */
.util{background:var(--forest-dark);color:#C3CEC8;font-size:12.5px}
.util .wrap{display:flex;align-items:center;gap:22px;min-height:38px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.util a:hover{color:#fff}
.util .sp{margin-left:auto;display:flex;gap:6px}
.head{background:var(--forest-deep);color:#F3F1EC}
.head .wrap{display:flex;align-items:center;gap:22px;min-height:84px;flex-wrap:nowrap;padding-top:12px;padding-bottom:12px}
.nav{display:flex;gap:18px;font-size:13.5px;margin-left:auto;flex-wrap:nowrap;align-items:center;white-space:nowrap}
.nav a{padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--accent)}
.nav-cta{flex:0 0 auto}
/* --- mobile menu: three dots collapse into a left drawer ------------------ */
.burger{display:none;margin-left:auto;padding:10px 2px 10px 10px;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#F3F1EC;border-radius:1px;margin:5px 0;
  transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:280;opacity:0;pointer-events:none;
  transition:opacity .3s ease}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;inset:0 auto 0 0;width:min(84vw,320px);background:var(--forest-deep);color:#F3F1EC;
  z-index:300;display:flex;flex-direction:column;padding:20px 22px 24px;box-shadow:0 0 44px rgba(0,0,0,.38);
  transform:translateX(-104%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s linear .32s}
.drawer.open{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.drawer-close{border:0;background:none;color:#C3CEC8;font-size:32px;line-height:1;cursor:pointer;padding:0 4px}
.drawer-links{display:flex;flex-direction:column;overflow-y:auto}
.drawer-links a{padding:14px 2px;border-bottom:1px solid rgba(243,241,236,.12);font-size:16px;color:#F3F1EC}
.drawer-links a:hover,.drawer-links a[aria-current]{color:#DCA765}
.drawer-foot{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:14px}
.drawer-lang{font-size:13.5px;color:#C3CEC8}
.drawer-lang:hover{color:#fff}
@media (max-width:960px){
  .nav{display:none}
  .head .nav-cta{display:none}
  .burger{display:block}
}
.btn{display:inline-block;font-size:14px;padding:11px 20px;border-radius:2px;border:1px solid transparent;
  cursor:pointer;font-family:var(--sans);text-align:center;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-deep)}
.btn-outline{border-color:var(--forest-deep);color:var(--forest-deep)}
.btn-outline:hover{background:var(--forest-deep);color:#fff}
.btn-ghost{border-color:rgba(243,241,236,.45);color:#F3F1EC}
.btn-ghost:hover{background:rgba(243,241,236,.12)}

/* --- brand mark -------------------------------------------------------- */
.brand{display:inline-flex;flex-direction:column;gap:3px;text-decoration:none;flex:0 0 auto}
.brand .wm{position:relative;display:block;font-family:var(--serif);font-weight:400;font-size:23px;line-height:1;letter-spacing:-.012em}
.brand .hh{position:relative;display:inline-block}
.brand .dev{position:absolute;left:50%;top:-7px;width:15px;height:4px;background:var(--accent);
  transform:translateX(-50%) skewX(-22deg);animation:devIn .62s cubic-bezier(.2,.8,.25,1) .12s both}
@keyframes devIn{from{opacity:0;transform:translateX(-50%) translateY(-9px) skewX(-22deg)}
  to{opacity:1;transform:translateX(-50%) translateY(0) skewX(-22deg)}}
.brand .bd{font-size:9px;letter-spacing:.17em;text-transform:uppercase;opacity:.62;display:block}

/* --- generic layout ---------------------------------------------------- */
section.blk{padding:96px 0;border-bottom:1px solid var(--line)}
.sec-h{margin-bottom:40px;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.sec-h h2{font-size:34px;line-height:1.18}
.sec-h .sub{color:var(--stone);font-size:14.5px;width:100%;margin-top:10px}
.sec-h .link{margin-left:auto;font-size:14px;color:var(--forest)}
.sec-h .link:hover{text-decoration:underline}
.grid{display:grid;gap:24px}
/* minmax(0,1fr) rather than 1fr: a bare 1fr is minmax(auto,1fr), so one card
   holding a long unbreakable string inflates its whole column — which made
   cards in that column wider, and therefore taller, than their neighbours. */
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lede{font-size:17.5px;color:#3B4742;max-width:68ch}
.eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-bottom:14px}
.breadcrumb{font-size:12.5px;color:var(--stone);padding:22px 0 0}
.breadcrumb a:hover{text-decoration:underline}

/* --- hero: inner pages ------------------------------------------------- */
.hero{padding:56px 0 0}
.hero h1{font-size:clamp(38px,5vw,68px);max-width:19ch;line-height:1.06}

/* --- home hero: one full screen ---------------------------------------
   Height is the viewport minus the real chrome (utility bar + header), which
   site.js measures into --chrome, so the header, the headline and the whole
   film are all on screen before any scrolling. */
.hero-full{position:relative;padding:0;background:var(--forest-deep);overflow:hidden;
  height:calc(100vh - var(--chrome,122px));height:calc(100svh - var(--chrome,122px));
  min-height:460px;max-height:980px}
.hero-full .visual{position:absolute;inset:0;background:var(--forest-deep);line-height:0}
.hero-full .visual video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.hero-full .hero-overlay{justify-content:center}
.hero-full h1{font-size:clamp(21px,2.3vw,38px);line-height:1.3;max-width:26ch;color:#fff;
  margin:0 0 clamp(18px,3.2vw,44px);letter-spacing:-.012em}
.hero-full .hero-caps li{margin-bottom:clamp(10px,1.6vw,20px)}
.hero-full .hero-caps .t{font-size:clamp(16px,2vw,30px)}
.hero-full .hero-caps .e{font-size:clamp(9px,.85vw,13px)}
.hero-full .hero-rule{width:min(28%,520px)}
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,39,29,.95) 0%,rgba(0,39,29,.82) 38%,rgba(0,39,29,.24) 66%,rgba(0,39,29,.06) 100%),
    linear-gradient(0deg,rgba(0,39,29,.62) 0%,rgba(0,39,29,0) 44%)}
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,6.5vw,124px);pointer-events:none}
.hero-caps{list-style:none;margin:0;padding:0;max-width:70%}
.hero-caps li{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(12px,2.2vw,30px);
  opacity:0;transform:translateY(18px);animation:heroIn .8s cubic-bezier(.2,.8,.25,1) var(--d,0s) both}
.hero-caps .mk{width:clamp(10px,1.1vw,18px);height:clamp(10px,1.1vw,18px);background:#DCA765;flex:0 0 auto}
.hero-caps .t{font-family:var(--serif);font-size:clamp(18px,3.1vw,54px);line-height:1.12;color:#fff;
  white-space:nowrap}
.hero-caps .e{font-size:clamp(9px,1vw,17px);letter-spacing:.2em;text-transform:uppercase;color:#EDF0EF;white-space:nowrap}
.hero-caps .e::before{content:"";display:inline-block;width:24px;height:1px;margin-right:12px;
  background:rgba(220,167,101,.55);vertical-align:middle}
:root[lang="zh-HK"] .hero-caps .t{font-family:var(--zh-display);line-height:1.3}
.hero-rule{width:min(34%,620px);height:2px;background:var(--accent);transform-origin:0 50%;
  opacity:0;animation:heroIn .7s ease var(--d,1.3s) both, ruleDraw .9s cubic-bezier(.2,.8,.25,1) var(--d,1.3s) both}
.hero-scope{margin-top:clamp(12px,1.8vw,26px);font-size:clamp(11px,1.35vw,21px);color:#EDF0EF;max-width:70%;
  opacity:0;transform:translateY(12px);animation:heroIn .8s cubic-bezier(.2,.8,.25,1) var(--d,1.7s) both}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ruleDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .hero-caps li,.hero-rule,.hero-scope{animation:none;opacity:1;transform:none}
}
@media (max-width:720px){
  .hero-caps{max-width:100%}
  .hero-caps .t{white-space:normal;width:auto}
  .hero-caps .e{display:none}
  /* a phone cannot letterbox a full-height film without losing the copy, so the
     hero keeps its viewport height but the film becomes a positioned backdrop */
  .hero-full{height:auto;max-height:none}
  .hero-full .visual{position:relative;inset:auto;min-height:calc(100svh - var(--chrome,150px))}
  .hero-full h1{font-size:22px;margin-bottom:20px}
  .hero-full .hero-caps .t{font-size:17px}
  .hero-full .hero-overlay{padding:24px var(--pad)}
}

/* --- standalone film player (used off-site and on request) ------------- */
.film{padding:36px 0 0}
.film-frame{position:relative;background:var(--forest-deep);overflow:hidden;aspect-ratio:16 / 9}
.film-frame video{display:block;width:100%;height:100%;object-fit:cover}
.film-play{position:absolute;inset:0;border:0;cursor:pointer;color:#F3F1EC;
  background:linear-gradient(0deg,rgba(0,39,29,.55) 0%,rgba(0,39,29,.22) 55%,rgba(0,39,29,.35) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:background .25s}
.film-play:hover{background:linear-gradient(0deg,rgba(0,39,29,.62) 0%,rgba(0,39,29,.30) 55%,rgba(0,39,29,.42) 100%)}
.film-play .ic{width:78px;height:78px;border-radius:50%;background:var(--accent);position:relative;
  transition:transform .25s}
.film-play:hover .ic{transform:scale(1.06)}
.film-play .ic::after{content:"";position:absolute;left:31px;top:23px;border-style:solid;
  border-width:16px 0 16px 26px;border-color:transparent transparent transparent #fff}
.film-play .lbl{font-size:16px;letter-spacing:.03em;text-align:center}
.film-play .lbl i{display:block;font-style:normal;font-size:13px;opacity:.8;margin-top:7px}
.film-frame.playing .film-play{display:none}

/* --- the promise, moved off the first screen --------------------------- */
.quote-band{background:var(--forest-deep);color:#F3F1EC;padding:88px 0}
.quote-band .qs{margin:0 0 20px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9DA9A3}
.quote-band .q{font-family:var(--serif);font-size:clamp(30px,3.8vw,50px);line-height:1.22;color:#fff;text-wrap:balance}
:root[lang="zh-HK"] .quote-band .q{font-family:var(--zh-display);line-height:1.4}
.stand{font-size:19px;color:#2A3631;max-width:62ch;margin-bottom:46px}
.caption{background:var(--band);padding:26px 0}
.caption .wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:36px;align-items:center}
.caption p{font-size:18px;color:#2A3631;max-width:68ch}
.caption .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

/* --- cards ------------------------------------------------------------- */
.card{border:1px solid var(--line);background:var(--paper);padding:28px;display:flex;flex-direction:column;
  transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:0 12px 32px rgba(0,61,46,.10);transform:translateY(-3px)}
.card h3{font-size:20px;line-height:1.3;margin-bottom:6px}
.card .pain{font-size:13.5px;line-height:1.5;color:var(--accent-deep);background:var(--pain);
  border-left:2px solid var(--accent);padding:9px 13px;margin-bottom:14px}
.card p{font-size:14.5px;color:#4A5550;flex:1}
.card .more{margin-top:16px;font-size:13.5px;color:var(--forest);font-weight:500}
.card .mk{width:34px;height:3px;background:var(--forest);margin-bottom:18px}

/* --- standards --------------------------------------------------------- */
.std{border:1px solid var(--line);background:var(--paper);padding:28px;transition:border-color .2s}
.std:hover{border-color:var(--forest)}
.std .code{font-family:var(--serif);font-size:17px;color:var(--forest-deep)}
.std .nm{font-size:13px;color:var(--stone);margin-top:4px}
.std .pain{font-size:13.5px;line-height:1.5;color:var(--accent-deep);background:var(--pain);
  border-left:2px solid var(--accent);padding:9px 13px;margin-top:14px}

/* --- service flow ------------------------------------------------------ */
.method{position:relative;overflow:hidden;background:var(--forest-deep);color:#F3F1EC;padding:96px 0}
.method-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.method-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,39,29,.96) 0%,rgba(0,39,29,.88) 42%,rgba(0,39,29,.62) 100%),
             linear-gradient(0deg,rgba(0,39,29,.7) 0%,rgba(0,39,29,.2) 60%)}
.method-inner{position:relative;z-index:1;max-width:820px}
.method .eyebrow{color:#8FA79A}
.method h2{color:#fff;font-size:clamp(28px,3.4vw,42px);line-height:1.16}
.method .lede{color:#C3CEC8;font-size:17px;margin-top:16px;max-width:58ch}
.method-phases{list-style:none;margin:38px 0 0;padding:0}
.method-phases li{display:grid;grid-template-columns:44px 1fr;gap:6px 14px;align-items:baseline;
  padding:16px 0;border-top:1px solid rgba(243,241,236,.18)}
.method-phases .n{font-family:var(--serif);font-size:13px;letter-spacing:.12em;color:#DCA765}
.method-phases h4{font-size:17px;color:#fff;margin:0}
.method-phases p{grid-column:2;font-size:14px;color:#B4C0B9;margin:0}
@media (max-width:720px){ .method{padding:56px 0} .method-inner{max-width:100%} }

.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.ph{border:1px solid var(--line);border-top:3px solid var(--forest);padding:24px;background:var(--paper)}
.ph .n{font-family:var(--serif);font-size:12px;letter-spacing:.14em;color:var(--accent)}
.ph h4{font-size:16.5px;margin:10px 0 6px}
.ph p{font-size:13.5px;color:#4A5550}

/* --- why us / feature columns ------------------------------------------ */
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cols4 h4,.cols3 h4{font-size:16.5px;margin-bottom:8px}
.cols4 p,.cols3 p{font-size:14px;color:#4A5550}
.cols4 .n{font-family:var(--serif);font-size:13px;color:var(--accent);letter-spacing:.12em;display:block;margin-bottom:10px}

/* --- logo wall --------------------------------------------------------- */
.logos{background:var(--paper);border-bottom:1px solid var(--line);padding:30px 0}
.logos .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);text-align:center;margin-bottom:20px}
.logowall{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 34px}
.logowall span{font-family:var(--serif);font-size:17.5px;color:#6A756F;white-space:nowrap}
.logowall .sep{color:var(--line);font-size:13px}
.phnote{text-align:center;font-size:12.5px;color:var(--stone);margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}

/* --- refund band ------------------------------------------------------- */
.refund{background:var(--forest-dark);color:#F3F1EC;padding:34px 0}
.refund .wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:34px;align-items:start}
.refund h3{color:#fff;font-size:23px;line-height:1.3}
.refund p{font-size:16px;max-width:74ch}
.refund .cond{font-size:13px;color:#C3CEC8;margin-top:12px;max-width:82ch}

/* --- ISO 27001 hero band: the revenue gate ------------------------------ */
.iso27001{background:var(--band);border-bottom:1px solid var(--line);padding:64px 0}
.iso27001 .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.iso27001 .eyebrow{color:var(--accent)}
.iso27001 h2{font-size:clamp(26px,3vw,36px);line-height:1.18;max-width:22ch}
.iso27001 p{margin-top:16px;color:#3B4742;font-size:16.5px;max-width:62ch}
.iso27001 .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.iso27001-points{list-style:none;margin:0;padding:0;border-left:3px solid var(--accent);padding-left:24px}
.iso27001-points li{padding:14px 0;border-bottom:1px solid var(--line)}
.iso27001-points li:last-child{border-bottom:0}
.iso27001-points b{display:block;font-family:var(--serif);font-size:16px;color:var(--forest-deep);font-weight:500}
.iso27001-points span{display:block;font-size:13.5px;color:#576761;margin-top:4px}
@media (max-width:960px){ .iso27001 .wrap{grid-template-columns:1fr} }

/* --- AI governance before/after --------------------------------------- */
.gov{background:var(--forest-deep);color:#F3F1EC;padding:96px 0}
.gov .eyebrow{color:#8FA79A}
.gov h2{color:#fff;font-size:clamp(30px,3.6vw,44px);line-height:1.14;max-width:24ch}
.gov .lede{color:#C3CEC8;font-size:17.5px;margin-top:18px;max-width:60ch}
/* The heading and the block pin together while the reader scrolls through, so
   the transformation plays out fully in view instead of finishing before the
   section is centred. site.js gives the track a runway of just over one
   viewport; below 780px of viewport height the pin is dropped entirely rather
   than risk the pinned content overrunning the screen. */
.gov-track{margin:0}
.ba{display:grid;grid-template-columns:1fr 64px 1fr;gap:20px;align-items:center;margin-top:44px}
@media (min-width:961px) and (min-height:780px){
  .gov-pin{position:sticky;top:var(--gov-top,150px)}
}
.ba .lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.ba .lab.now{color:#7F8C86}
.ba .lab.after{color:#8FA79A;transition:color .45s ease}
.ba.lit .lab.after{color:var(--accent)}
.chaos{position:relative;height:290px}
.chaos span{position:absolute;font-size:13px;padding:9px 13px;white-space:nowrap;
  background:rgba(243,241,236,.055);border:1px solid rgba(243,241,236,.13);color:#AEB9B3;
  animation:jit 7s ease-in-out infinite;
  transform:translate3d(calc(var(--sx,0px) + var(--ax,0px)),var(--sy,0px),0)
            rotate(var(--sr,0deg)) scale(var(--as,1));
  will-change:transform;
  transition:opacity .45s ease,border-color .45s ease,color .45s ease}
.chaos span::after{content:"✓";margin-left:8px;color:var(--accent);display:inline-block;
  opacity:0;transform:scale(.45);transition:opacity .3s ease,transform .42s cubic-bezier(.2,1.5,.4,1)}
/* an answered question recedes: it has stopped being an open risk */
.chaos span.ans{--ax:-20px;--as:.94;opacity:.24;
  border-color:rgba(168,98,31,.55);color:#B99A76}
.chaos span.ans::after{opacity:1;transform:none}
.chaos span:nth-child(1){left:2%;top:6%;transform:rotate(-6deg);animation-delay:-.2s}
.chaos span:nth-child(2){left:44%;top:20%;transform:rotate(4deg);animation-delay:-1.4s}
.chaos span:nth-child(3){left:12%;top:44%;transform:rotate(-3deg);animation-delay:-2.6s}
.chaos span:nth-child(4){left:52%;top:62%;transform:rotate(6deg);animation-delay:-3.8s}
.chaos span:nth-child(5){left:20%;top:80%;transform:rotate(-4deg);animation-delay:-5s}
@keyframes jit{0%,100%{translate:0 0}50%{translate:0 -4px}}
.arrow{display:flex;align-items:center;justify-content:center}
.arrow{position:relative;min-height:290px}
.arrow svg{width:40px;height:40px;position:relative;z-index:1;transition:opacity .5s ease}
.js .arrow svg{opacity:.3}
.js .ba.lit .arrow svg{opacity:1}
.arrow .rail{position:absolute;left:50%;top:10%;bottom:10%;width:1px;background:rgba(243,241,236,.14);
  transform:translateX(-50%)}
.arrow .rail i{display:block;width:100%;height:calc(var(--p,0) * 100%);background:var(--accent)}
.arrow .comet{position:absolute;left:50%;bottom:8%;width:7px;height:7px;border-radius:50%;
  background:var(--accent);transform:translateX(-50%) scale(0);transition:transform .4s ease}
.ba.lit .arrow .comet{transform:translateX(-50%) scale(1)}
.order{border:1px solid rgba(243,241,236,.18);padding:8px 20px}
.orow{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(243,241,236,.1);
  position:relative;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.js .orow{opacity:.26;transform:translateX(26px)}
.orow::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:0;background:var(--accent);
  opacity:.9;transition:width .5s ease}
.orow.on{opacity:1;transform:none;animation:filed .9s cubic-bezier(.2,.7,.2,1)}
@keyframes filed{from{background:rgba(168,98,31,.20)}to{background:transparent}}
.orow.on::before{width:2px}
.orow:last-child{border-bottom:0}
.orow .n{font-family:var(--serif);font-size:13px;color:var(--accent);min-width:20px}
.orow b{font-weight:500;font-size:15.5px;color:#CFD9D4;transition:color .4s ease}
.orow.on b{color:#fff}
.orow .tick{margin-left:auto;color:var(--accent);font-size:14px;opacity:0;
  transform:scale(.4) rotate(-28deg);transition:opacity .3s ease,transform .45s cubic-bezier(.2,1.5,.4,1)}
.orow.on .tick{opacity:1;transform:none}
/* running tally: how many of the five are on file */
.score{display:none;align-items:baseline;gap:8px;margin-top:16px;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#7F8C86}
.js .score{display:flex}
.score .n{font-family:var(--serif);font-size:26px;letter-spacing:0;color:var(--accent);
  transition:color .35s ease}
.score.fulfilled .n,.score.fulfilled .lbl{color:#DCA765}
.gov .cta{margin-top:44px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.gov .note{font-size:13.5px;color:#8FA79A}

/* --- insights ---------------------------------------------------------- */
.post{display:block}
.post{position:relative;padding-top:20px;border-top:1px solid var(--line)}
.post::after{content:"";position:absolute;left:0;top:-1px;width:34px;height:2px;background:var(--accent)}
.post .cover{overflow:hidden;background:var(--band);display:block;border:1px solid var(--line)}
/* every cover occupies the same box whatever the source file's shape, so a
   tall or square photo can never make one card in a row shorter than its
   neighbours. The image is cropped to fill, never stretched. */
.post .cover{position:relative;aspect-ratio:16 / 9}
.post .cover img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.post:hover .cover img{transform:scale(1.045)}
.post .cat{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);margin-top:14px;display:block}
.post .date{font-size:13px;color:var(--stone);margin-top:6px}
.post h3{font-size:20px;margin-top:6px;line-height:1.3;overflow-wrap:anywhere}
.post:hover h3{color:var(--forest-deep)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.filters a{font-size:13px;border:1px solid var(--line);padding:6px 14px;border-radius:2px;background:#fff}
.filters a[aria-current]{background:var(--forest-deep);color:#fff;border-color:var(--forest-deep)}
.filters.by-role{margin-top:-18px}
.filters.by-role .fl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);align-self:center;margin-right:6px}
.sub-band{background:var(--forest-deep);color:#F3F1EC;padding:44px 0}
.sub-band .in{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center}
.sub-band h3{font-size:24px;color:#fff}
.sub-band p{color:#C3CEC8;font-size:14.5px;margin-top:10px}
.sub-form{display:flex;gap:10px;flex-wrap:wrap}
.sub-form input{flex:1;min-width:180px;border:1px solid rgba(243,241,236,.3);background:rgba(255,255,255,.06);
  color:#fff;padding:11px 13px;font:inherit;font-size:14px}
.sub-form input::placeholder{color:#9FB0A6}

/* --- article ----------------------------------------------------------- */
.art-head{padding:34px 0 0}
.art-head .catline{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--forest);margin-bottom:14px}
.art-head h1{font-size:clamp(32px,4.4vw,50px);max-width:26ch}
.standfirst{font-size:19px;color:#3B4742;margin-top:20px;max-width:64ch;font-family:var(--serif)}
.byline{display:flex;gap:16px;align-items:center;margin-top:28px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byline .av{width:46px;height:46px;border-radius:50%;background:var(--forest);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--serif);font-size:17px;flex:none}
.byline .who{font-size:13.5px;line-height:1.5}
.byline .meta{font-size:12.5px;color:var(--stone)}
.art-body{display:grid;grid-template-columns:1.65fr 1fr;gap:48px;align-items:start;padding:44px 0 64px}
.art-body h2{font-size:24px;margin:34px 0 14px}
.art-body h3{font-size:19px;margin:28px 0 12px}
.art-body ul,.art-body ol{margin:0 0 18px;padding-left:22px}
.art-body li{margin-bottom:8px}
.keybox{border-left:3px solid var(--accent);background:var(--pain);padding:22px 24px;margin:26px 0}
.keybox h4{font-size:15px;margin-bottom:10px}
.keybox ul{margin:0;padding-left:20px;font-size:15px}
.src{font-size:12.5px;color:var(--stone);border-top:1px solid var(--line);padding-top:18px;margin-top:34px}
.src div{margin-bottom:6px}
.aside .box{border:1px solid var(--line);padding:22px;background:var(--band);margin-bottom:18px}
.aside .box h4{font-size:15px;margin-bottom:10px}
.aside .box p,.aside .box li{font-size:13.5px;color:#4A5550}
.aside .box ul{margin:0;padding-left:18px}
.toc{position:sticky;top:24px}

/* --- tables ------------------------------------------------------------ */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin:22px 0}
.tbl th,.tbl td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-weight:500;background:var(--band)}
.tbl strong{font-family:var(--serif);font-weight:400;font-size:15.5px}

/* --- FAQ --------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:17px;list-style:none;display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);font-family:var(--sans);font-weight:500}
.faq details[open] summary::before{content:"–"}
.faq details p{font-size:14.5px;color:#4A5550;margin-top:12px;padding-left:24px}

/* --- forms ------------------------------------------------------------- */
.form{background:#fff;padding:28px}
.form label{display:block;font-size:12.5px;color:var(--stone);margin:0 0 6px}
.form .row{margin-bottom:16px}
.form input,.form textarea,.form select{width:100%;border:1px solid var(--line);padding:10px 12px;font:inherit;font-size:14px;background:#FDFCFA}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .promise{font-size:12.5px;color:var(--stone);margin-top:14px}
.contactbox{background:var(--forest-deep);color:#F3F1EC;padding:56px 0}
.contactbox .inner{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
.contactbox h2{font-size:28px;color:#fff}
.contactbox p{color:#C3CEC8;margin-top:14px}
.contactbox .det{margin-top:24px;font-size:14px;color:#C3CEC8;line-height:2}

/* --- AI governance readiness run (the self-assessment page) ------------ */
.game-blk{padding-top:0}
.game{border:1px solid var(--line);background:#fff;padding:clamp(24px,3.4vw,44px)}
.g-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-bottom:14px}
.g-intro h2{font-size:clamp(24px,3vw,34px);max-width:26ch}
.g-intro p{margin-top:16px;color:#3B4742;max-width:62ch;font-size:16px}
.g-start{margin-top:24px}
.g-noscript{margin-top:18px;font-size:14px;color:var(--accent-deep)}
.g-top{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.g-dots{display:flex;gap:7px;flex-wrap:wrap}
.g-dots i{width:26px;height:4px;background:var(--line);display:block;transition:background .35s ease}
.g-dots i.yes{background:var(--forest)}
.g-dots i.no{background:var(--accent)}
.g-count{margin-left:auto;display:flex;gap:4px;align-items:baseline;font-family:var(--serif);color:var(--stone)}
.g-count b{font-size:22px;color:var(--forest-deep)}
.g-count span{font-size:14px}
.g-cards{position:relative;min-height:190px}
.g-card{position:absolute;inset:0;opacity:0;transform:translateX(38px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.g-card.now{opacity:1;transform:none}
.g-card.out{opacity:0;transform:translateX(-46px)}
.g-card .qn{display:block;font-family:var(--serif);font-size:13px;letter-spacing:.14em;color:var(--accent);margin-bottom:16px}
.g-card p{font-size:clamp(19px,2.4vw,27px);line-height:1.38;color:var(--ink);font-family:var(--serif)}
:root[lang="zh-HK"] .g-card p{font-family:var(--zh-display);line-height:1.5}
.g-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.g-btn{flex:1;min-width:170px;border:1px solid var(--line);background:#fff;cursor:pointer;
  padding:16px 18px;text-align:left;font:inherit;transition:border-color .2s,background .2s,transform .2s}
.g-btn b{display:block;font-size:16px;font-weight:500}
.g-btn span{display:block;font-size:12.5px;color:var(--stone);margin-top:3px}
.g-btn:hover{transform:translateY(-2px)}
.g-yes:hover{border-color:var(--forest);background:#F3F7F5}
.g-no:hover{border-color:var(--accent);background:var(--pain)}
.g-meter{height:3px;background:var(--line);margin-top:26px;overflow:hidden}
.g-meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.g-hint{font-size:12.5px;color:var(--stone);margin-top:12px}
.g-live,.g-result,.g-gate{position:relative}
.g-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.g-score{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin:10px 0 30px}
.g-ring{width:104px;height:104px;border-radius:50%;border:2px solid var(--line);flex:none;
  display:flex;align-items:baseline;justify-content:center;gap:2px;font-family:var(--serif);
  color:var(--forest-deep);transition:border-color .4s ease}
.g-ring b{font-size:38px;line-height:1.6}
.g-ring span{font-size:13px;color:var(--stone)}
.g-ring.pass{border-color:var(--forest)}
.g-ring.warn{border-color:var(--accent)}
.g-result h3{font-size:26px;margin-bottom:10px}
.g-result p{color:#3B4742;font-size:16px}
.g-gaps{border-top:1px solid var(--line);padding-top:22px;margin-top:8px}
.g-gaps h4{font-size:14px;margin-bottom:12px}
.g-gaps ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.g-gaps li{font-size:13px;border:1px solid var(--line);border-left:2px solid var(--accent);
  padding:7px 12px;color:#3B4742}
.g-gaps li.ok{border-left-color:var(--forest);color:var(--stone)}
.g-again{margin-top:28px}

.g-gate{margin-top:34px;border-top:1px solid var(--line);padding-top:34px}
.g-gate-in{display:grid;grid-template-columns:248px 1fr;gap:38px;align-items:start}
.g-gate-copy h3{font-size:24px;margin-bottom:12px}
.g-gate-copy p{font-size:15px;color:#3B4742}
.book{margin:0;max-width:248px}
.book-art{display:block;box-shadow:0 18px 42px rgba(0,61,46,.3)}
.book-art img{display:block;width:100%;height:auto}
.book figcaption{position:absolute;inset:0;padding:9% 9% 8%;display:flex;flex-direction:column;
  color:#F4F6F4;pointer-events:none}
.book{position:relative}
.bk-org{font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#DCA765;line-height:1.5;margin-bottom:12px}
.bk-title{font-family:var(--serif);font-size:clamp(19px,2vw,26px);line-height:1.16;color:#fff;margin-bottom:10px}
:root[lang="zh-HK"] .bk-title{font-family:var(--zh-display);line-height:1.3}
.bk-sub{font-size:11px;color:#C3CEC8;line-height:1.5;margin-top:auto}
.bk-ed{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#8FA79A;margin-top:12px}
.gate-form{margin-top:20px}
.langpick{display:flex;gap:8px;margin-bottom:14px}
.langpick label{position:relative;cursor:pointer}
.langpick input{position:absolute;opacity:0;width:0;height:0}
.langpick span{display:block;font-size:13px;border:1px solid var(--line);padding:8px 16px;border-radius:2px;transition:.2s}
.langpick input:checked+span{background:var(--forest-deep);color:#fff;border-color:var(--forest-deep)}
.langpick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.gate-row{display:flex;gap:10px;flex-wrap:wrap}
.gate-row input{flex:1;min-width:200px;border:1px solid var(--line);padding:11px 13px;font:inherit;
  font-size:14px;background:#FDFCFA}
.gate-opt{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13px;color:#3B4742;cursor:pointer}
.gate-opt input{margin-top:4px}
.gate-fine{font-size:12px;color:var(--stone);margin-top:14px;max-width:64ch}
.g-done h3{font-size:26px;margin-bottom:12px}
.g-dl{margin-top:22px}
.sub-form .sub-note{width:100%;font-size:12px;color:#8FA79A;margin:0}
.g-fallback{margin-top:54px;border-top:1px solid var(--line);padding-top:34px}
.g-fallback h2{font-size:22px;margin-bottom:16px}
.g-fallback ol{padding-left:22px;font-size:15px;color:#3B4742}
.g-fallback li{margin-bottom:8px;max-width:70ch}
.g-fallback p{margin-top:16px;font-size:15px;color:var(--stone);max-width:70ch}
.js .g-fallback{display:none}
@media (max-width:760px){
  .g-gate-in{grid-template-columns:1fr}
  .book{max-width:210px}
  .g-cards{min-height:230px}
  .g-score{grid-template-columns:1fr;gap:18px}
}

/* --- footer ------------------------------------------------------------ */
.foot{background:var(--forest-dark);color:#9DA9A3;font-size:13.5px;padding:48px 0 30px}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.foot h5{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:#D8DFDA;margin:0 0 12px;font-weight:500}
.foot a{display:block;padding:3px 0}
.foot a:hover{color:#fff}
.foot .bot{margin-top:34px;padding-top:20px;border-top:1px solid rgba(157,169,163,.24);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px}
.foot .disc{margin-top:14px;font-size:12px;color:#849089;max-width:100ch}

/* --- misc -------------------------------------------------------------- */
.crumb-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{display:inline-block;font-size:11.5px;letter-spacing:.06em;border:1px solid var(--line);padding:3px 10px;color:var(--stone)}
.cta-band{background:var(--band);padding:64px 0;text-align:center}
.cta-band h2{font-size:30px;margin-bottom:14px}
.cta-band p{color:#3B4742;max-width:60ch;margin:0 auto 26px}
.cta-band .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --- motion ------------------------------------------------------------
   Only applied once JS has confirmed it is running (html.js), so the page
   is fully readable with scripting disabled. */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rise.in{opacity:1;transform:none}
.js .sec-h{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .sec-h.in{opacity:1;transform:none}
.js .std{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .std.in{opacity:1;transform:none}
.std:nth-child(4n+2){transition-delay:60ms}
.std:nth-child(4n+3){transition-delay:120ms}
.std:nth-child(4n+4){transition-delay:180ms}
.card:nth-child(3n+2),.post:nth-child(4n+2){transition-delay:70ms}
.card:nth-child(3n+3),.post:nth-child(4n+3){transition-delay:140ms}
.post:nth-child(4n+4){transition-delay:210ms}
.drift{animation:drift 34s linear infinite alternate}
@keyframes drift{from{transform:translateX(-18px)}to{transform:translateX(18px)}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .js .sec-h,.js .std{opacity:1;transform:none;transition:none}
  .orow::before{transition:none}
  .drift,.chaos span{animation:none}
  .brand .dev{animation:none}
  .post .cover img{transition:none}
}

/* --- responsive -------------------------------------------------------- */
@media (max-width:1140px){
  .head .wrap{flex-wrap:wrap}
  .nav{flex-wrap:wrap;margin-left:0}
}
@media (max-width:960px){
  :root{--pad:20px}
  section.blk{padding:56px 0}
  .grid.g3,.grid.g4,.cols4,.cols3,.flow,.foot .cols,.form .two,.contactbox .inner,
  .art-body,.caption .wrap,.sub-band .in,.refund .wrap{grid-template-columns:1fr}
  .grid.g2{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .caption .cta{justify-content:flex-start}
  .ba{grid-template-columns:1fr;gap:14px}
  .arrow{transform:rotate(90deg)}
  .chaos{height:250px}
  .gov,.gov{padding:56px 0}
}
@media (max-width:640px){
  .flow{grid-template-columns:1fr}
  body{font-size:16px}
}

/* --- print ------------------------------------------------------------- */
@media print{
  .util,.head,.foot,.sub-band,.contactbox,.totop,.prog,.gov,.cta-band{display:none}
  body{font-size:11pt;color:#000}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}