:root{--legacy-0a2122:#0a2122;--legacy-0a6e62:#0a6e62;--legacy-0c2a2b:#0c2a2b;--legacy-0d2f30:#0d2f30;--legacy-0e3334:#0e3334;--legacy-0e9c8a:#0e9c8a;--legacy-143c3b:#143c3b;--legacy-42605d:#42605d;--legacy-7fa9a2:#7fa9a2;--legacy-9be3d4:#9be3d4;--legacy-a9cdc6:#a9cdc6;--legacy-b6d6cf:#b6d6cf;--legacy-c7efe6:#c7efe6;--legacy-d8c7ae:#d8c7ae;--legacy-dff0ec:#dff0ec;--legacy-e2eeeb:#e2eeeb;--legacy-e9f0ed:#e9f0ed;--legacy-ece2d2:#ece2d2;--legacy-eff4f2:#eff4f2;--legacy-f1ece3:#f1ece3}
:root{
    --porcelain:var(--legacy-e9f0ed, #E9F0ED); --porcelain-2:var(--legacy-eff4f2, #EFF4F2); --ice:var(--legacy-e2eeeb, #E2EEEB); --paper:var(--color-background, #F8FBFA); --white:var(--color-background, #fff);
    --ink:var(--legacy-0c2a2b, #0C2A2B); --ink-2:var(--legacy-143c3b, #143C3B); --ink-soft:var(--legacy-42605d, #42605D);
    --teal:var(--legacy-0e9c8a, #0E9C8A); --teal-deep:var(--legacy-0a6e62, #0A6E62); --mint:var(--legacy-9be3d4, #9BE3D4); --mint-2:var(--legacy-c7efe6, #C7EFE6);
    --limestone:var(--legacy-d8c7ae, #D8C7AE); --limestone-soft:var(--legacy-ece2d2, #ECE2D2);
    --line:rgba(12,42,43,.13); --line-2:rgba(12,42,43,.08);
    --shadow:0 1px 2px rgba(12,42,43,.04),0 14px 44px -20px rgba(12,42,43,.26);
    --shadow-sm:0 1px 2px rgba(12,42,43,.05),0 8px 24px -16px rgba(12,42,43,.22);
    --display:"Fraunces",Georgia,serif; --body:"Hanken Grotesk",-apple-system,sans-serif; --mono:"Spline Sans Mono",monospace;
  }
  .hkx *{box-sizing:border-box;margin:0;padding:0}
  .hkx{font-family:var(--body);background:var(--porcelain);color:var(--ink);line-height:1.65;font-size:17.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .hkx ::selection{background:var(--ink);color:var(--mint-2)}
  .hkx img{max-width:100%;display:block}
  .hkx a{color:var(--teal-deep);text-decoration:none}
  .hkx .progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--teal);z-index:200;transition:width .08s linear}
  .hkx .container{max-width:1140px;margin:0 auto;padding:0 26px}
  .hkx .narrow{max-width:780px}
  .hkx .center{text-align:center}
  .hkx .text-muted{color:var(--ink-soft)}
  .hkx section{padding:78px 0;position:relative}
  @media(max-width:600px){.hkx section{padding:52px 0}}
  .hkx .eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-deep);display:inline-flex;align-items:center;gap:10px}
  .hkx .eyebrow::before{content:"";width:24px;height:1px;background:var(--teal)}
  .hkx h1{font-family:var(--display);font-weight:600;font-optical-sizing:auto;font-size:clamp(2.5rem,6vw,4.4rem);line-height:1;letter-spacing:-.025em;color:var(--ink)}
  .hkx h1 .it{font-style:italic;font-weight:500;color:var(--teal-deep)}
  .hkx h2{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,4vw,2.85rem);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
  .hkx h2 .it{font-style:italic;font-weight:500;color:var(--teal-deep)}
  .hkx h3{font-family:var(--display);font-weight:600;font-size:1.22rem;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
  .hkx .lead{font-size:clamp(1.08rem,1.8vw,1.28rem);line-height:1.55;color:var(--ink-2);font-weight:400}
  .hkx .sec-head{max-width:660px;margin-bottom:42px}
  .hkx .sec-head.center{margin-left:auto;margin-right:auto}
  .hkx .sec-head h2{margin-top:16px}
  .hkx .sec-head p{margin-top:12px}
  .hkx .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .hkx .rv.in{opacity:1;transform:none}
  .hkx .btn{font-family:var(--body);font-weight:700;font-size:.96rem;padding:14px 26px;border-radius:var(--radius-pill, 999px);display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:1px solid transparent;transition:transform .18s,background .2s,box-shadow .2s,color .2s;white-space:nowrap}
  .hkx .btn.primary{background:var(--ink);color:var(--mint-2);box-shadow:var(--shadow-sm)}
  .hkx .btn.primary:hover{background:var(--teal-deep);color:var(--color-background, #fff);transform:translateY(-2px)}
  .hkx .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .hkx .btn.ghost:hover{border-color:var(--teal);color:var(--teal-deep);transform:translateY(-2px)}
  .hkx .btn svg{width:16px;height:16px}
  .hkx .cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
  .hkx .crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:14px 0 0}
  .hkx .crumb a{color:var(--ink-soft)}.hkx .crumb a:hover{color:var(--teal-deep)}
  .hkx .crumb span{color:var(--teal-deep)}
  .hkx .hero{padding:8px 0 64px}
  .hkx .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hkx .hero h1{margin:20px 0 0}
  .hkx .hero .lead{margin-top:24px;max-width:44ch}
  .hkx .hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
  .hkx .hero-tags span{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-2);background:var(--white);border:1px solid var(--line-2);padding:8px 14px;border-radius:var(--radius-pill, 999px);display:inline-flex;align-items:center;gap:7px;box-shadow:var(--shadow-sm)}
  .hkx .hero-tags span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
  .hkx .hero-fig{position:relative}
  .hkx .hero-fig img{border-radius:var(--radius-xl, 22px);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:0 30px 70px -30px rgba(12,42,43,.5);border:1px solid var(--line-2)}
  .hkx .hero-fig .ring{position:absolute;inset:-14px;border:1px solid var(--mint);border-radius:30px;z-index:-1;opacity:.6}
  .hkx .hero-chip{position:absolute;left:-18px;bottom:24px;background:var(--ink);color:var(--color-background, #fff);border-radius:var(--radius-lg, 16px);padding:14px 18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:13px}
  .hkx .hero-chip .big{font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1;color:var(--color-background, #fff)}
  .hkx .hero-chip .stars{color:var(--mint);font-size:.8rem;letter-spacing:2px}
  .hkx .hero-chip .sub{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}
  @media(max-width:860px){.hkx .hero-grid{grid-template-columns:1fr;gap:36px}.hkx .hero-fig{order:-1}.hkx .hero-chip{left:14px}}
  .hkx .intro{background:var(--ice)}
  .hkx .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
  .hkx .step{background:var(--white);border:1px solid var(--line-2);border-radius:20px;padding:32px 28px;box-shadow:var(--shadow-sm);position:relative}
  .hkx .step .num{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--color-background, #fff);background:var(--teal-deep);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px}
  .hkx .step h3{margin-bottom:8px}
  .hkx .step p{font-size:.96rem;color:var(--ink-soft)}
  @media(max-width:780px){.hkx .steps{grid-template-columns:1fr}}
  .hkx .grid{display:grid;gap:20px}
  .hkx .cols-2{grid-template-columns:repeat(2,1fr)}
  .hkx .cols-3{grid-template-columns:repeat(3,1fr)}
  .hkx .cols-4{grid-template-columns:repeat(4,1fr)}</p>
<p>  .hkx .card{background:var(--white);border:1px solid var(--line-2);border-radius:var(--radius-lg, 18px);padding:28px 26px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s}
  .hkx .card.hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(14,156,138,.35)}
  .hkx .card .ico{width:46px;height:46px;border-radius:var(--radius-md, 13px);background:var(--mint-2);display:grid;place-items:center;font-size:1.4rem;margin-bottom:16px}
  .hkx .card h3{margin-bottom:6px}
  .hkx .card p{font-size:.95rem;color:var(--ink-soft)}
  .hkx .card.center{text-align:center}
  .hkx .card.center .ico{margin-left:auto;margin-right:auto}
  .hkx .price-card{text-align:center;padding:34px 22px}
  .hkx .price-card .amt{font-family:var(--display);font-weight:600;font-size:2.6rem;color:var(--teal-deep);line-height:1}
  .hkx .price-card .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px}
  .hkx .price-note{margin-top:22px;font-family:var(--mono);font-size:13px;color:var(--ink-soft);letter-spacing:.02em}
  .hkx .price-note a{color:var(--teal-deep);border-bottom:1px solid rgba(10,110,98,.3)}
  .hkx .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}</p>
<p>  .hkx .svc{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line-2);border-radius:var(--radius-lg, 14px);padding:18px 20px;box-shadow:var(--shadow-sm);transition:transform .18s,border-color .2s,box-shadow .2s}
  .hkx .svc:hover{transform:translateY(-3px);border-color:rgba(14,156,138,.4);box-shadow:var(--shadow)}
  .hkx .svc .ico{width:40px;height:40px;border-radius:var(--radius-md, 11px);background:var(--mint-2);display:grid;place-items:center;font-size:1.15rem;flex:none}
  .hkx .svc h3{font-size:1rem;color:var(--ink)}
  .hkx .svc .arr{margin-left:auto;color:var(--teal);font-weight:700;transition:transform .2s}
  .hkx .svc:hover .arr{transform:translateX(3px)}
  .hkx .vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media(max-width:700px){.hkx .vs-grid{grid-template-columns:1fr}}
  .hkx .vs-card{border-radius:20px;padding:32px 30px;position:relative}
  .hkx .vs-diy{background:var(--white);border:1px solid var(--line-2);box-shadow:var(--shadow-sm)}
  .hkx .vs-pro{background:linear-gradient(180deg,var(--legacy-0d2f30, #0d2f30),var(--legacy-0c2a2b, #0c2a2b));color:var(--legacy-dff0ec, #dff0ec);box-shadow:0 30px 60px -30px rgba(12,42,43,.6);border:1px solid rgba(14,156,138,.4)}
  .hkx .vs-card .ico{width:48px;height:48px;border-radius:var(--radius-md, 13px);display:grid;place-items:center;font-size:1.4rem;margin-bottom:16px}
  .hkx .vs-diy .ico{background:var(--legacy-f1ece3, #f1ece3)}
  .hkx .vs-pro .ico{background:rgba(155,227,212,.18)}
  .hkx .vs-card h3{margin-bottom:8px}
  .hkx .vs-pro h3{color:var(--color-background, #fff)}
  .hkx .vs-diy p{color:var(--ink-soft);font-size:.96rem}
  .hkx .vs-pro p{color:var(--legacy-b6d6cf, #b6d6cf);font-size:.96rem}
  .hkx .vs-pro .badge{position:absolute;top:-12px;right:24px;background:var(--mint);color:var(--ink);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;border-radius:var(--radius-pill, 999px)}
  .hkx .cov-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:stretch}
  @media(max-width:820px){.hkx .cov-grid{grid-template-columns:1fr}}
  .hkx .map-wrap{border-radius:20px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow);min-height:380px}
  .hkx .map-wrap iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:saturate(.92)}
  .hkx .cities{display:flex;flex-direction:column;gap:10px}
  .hkx .city{display:flex;align-items:center;gap:11px;background:var(--white);border:1px solid var(--line-2);border-radius:var(--radius-md, 12px);padding:13px 18px;font-weight:600;font-size:.95rem;color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .16s,border-color .2s}
  .hkx .city::before{content:"📍";font-size:.95rem}
  .hkx .city:hover{transform:translateX(4px);border-color:rgba(14,156,138,.4);color:var(--teal-deep)}
  .hkx .city.all{justify-content:center;background:transparent;border-style:dashed;color:var(--teal-deep)}
  .hkx .city.all::before{content:""}
  .hkx .about{background:var(--white)}
  .hkx .about p{color:var(--ink-2);font-size:1.05rem}
  .hkx .about p+p{margin-top:14px}
  .hkx .stats-band{background:var(--ink);color:var(--legacy-dff0ec, #dff0ec);position:relative;overflow:hidden}
  .hkx .stats-band::before{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(14,156,138,.4),transparent 62%)}
  .hkx .stats-band .eyebrow{color:var(--mint)}.hkx .stats-band .eyebrow::before{background:var(--mint)}
  .hkx .stats-band h2{color:var(--color-background, #fff)}
  .hkx .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 24px;margin-top:14px;position:relative;z-index:1}
  @media(max-width:780px){.hkx .stats-grid{grid-template-columns:repeat(2,1fr)}}
  .hkx .stat .n{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,4vw,2.4rem);color:var(--color-background, #fff);line-height:1}
  .hkx .stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);margin-top:8px}
  .hkx .src{text-align:center;margin-top:26px;font-family:var(--mono);font-size:11.5px;color:var(--legacy-7fa9a2, #7fa9a2);position:relative;z-index:1}
  .hkx .faq{border-top:1px solid var(--line-2)}
  .hkx .faq details{border-bottom:1px solid var(--line-2)}
  .hkx .faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,2vw,1.25rem);color:var(--ink);line-height:1.3}
  .hkx .faq summary::-webkit-details-marker{display:none}
  .hkx .faq summary::after{content:"+";position:absolute;right:4px;top:18px;font-weight:400;font-size:1.7rem;color:var(--teal-deep);transition:transform .25s}
  .hkx .faq details[open] summary::after{transform:rotate(45deg)}
  .hkx .faq .ans{padding:0 44px 24px 0;color:var(--ink-soft);font-size:.98rem;line-height:1.6}
  .hkx .guide{display:block;height:100%}
  .hkx .guide .ico{font-size:1.5rem}
  .hkx .guide h3{font-size:1.08rem;margin-bottom:8px}
  .hkx .guide p{font-size:.92rem}
  .hkx .final{background:linear-gradient(180deg,var(--legacy-0e3334, #0e3334),var(--legacy-0a2122, #0a2122));color:var(--legacy-dff0ec, #dff0ec);text-align:center;position:relative;overflow:hidden}
  .hkx .final::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 320px at 50% -12%,rgba(14,156,138,.42),transparent 70%)}
  .hkx .final .container{position:relative;z-index:1}
  .hkx .final .eyebrow{color:var(--mint);justify-content:center}.hkx .final .eyebrow::before{background:var(--mint)}
  .hkx .final h2{color:var(--color-background, #fff);margin:14px auto 0;max-width:18ch}
  .hkx .final p{color:var(--legacy-a9cdc6, #a9cdc6);max-width:52ch;margin:18px auto 0}
  .hkx .final .cta-row{justify-content:center}
  .hkx .final .btn.ghost{color:var(--legacy-dff0ec, #dff0ec);border-color:rgba(255,255,255,.25)}
  .hkx .final .btn.ghost:hover{border-color:var(--mint);color:var(--color-background, #fff)}
  .hkx .sticky-cta{position:fixed;right:18px;bottom:18px;z-index:150;background:var(--ink);color:var(--color-background, #fff);padding:14px 22px;border-radius:var(--radius-pill, 999px);font-weight:700;font-size:.95rem;text-decoration:none;box-shadow:0 16px 36px -10px rgba(12,42,43,.6);display:inline-flex;align-items:center;gap:8px;transition:transform .2s,background .2s}
  .hkx .sticky-cta:hover{background:var(--teal-deep);transform:translateY(-2px)}
  .hkx .sticky-cta svg{width:15px;height:15px}
  @media(prefers-reduced-motion:reduce){.hkx .rv{opacity:1;transform:none;transition:none}}
  /* refined alignment + spacing */
  .hkx .svc-grid{grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}</p>
<p>  .hkx .svc{flex-direction:row;align-items:center;height:100%;gap:12px;padding:16px 18px}
  .hkx .svc .ico{width:38px;height:38px;font-size:1.1rem}
  .hkx .svc .svc-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  .hkx .svc .svc-tx h3{font-size:.98rem;line-height:1.15;margin:0}
  .hkx .svc .svc-tx p{font-size:.8rem;color:var(--ink-soft);line-height:1.35;margin:0}
  .hkx .svc .arr{align-self:center;flex:none}
  .hkx .grid.cols-3{align-items:stretch}
  .hkx .card.guide{display:flex;flex-direction:column;height:100%;padding:24px 24px}
  .hkx .card.guide .ico{margin-bottom:12px}
  .hkx .card.guide h3{margin-bottom:8px}
  .hkx .card.guide p{margin-top:auto;margin-bottom:0}
  /* reduce excessive vertical section padding on these two bands */
  .hkx section{padding:64px 0}
  @media(max-width:600px){.hkx section{padding:44px 0}}</p>
<p>  /* breakpoint fix: keep 3-up inside theme container */</p>
<p>  .hkx .card.guide{justify-content:flex-start}
  .hkx .card.guide p{margin-top:auto}</p>
<p>/* === HKX GRID CLEANUP (responsive, no empty blocks) === */
.hkx .grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important}
.hkx .grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important}
.hkx .svc-grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;gap:12px !important;align-items:stretch !important}
.hkx .svc{height:100% !important}
.hkx .grid.cols-3 .card.guide{height:100% !important}</p>