
/* ====== HKSEV Landing — scoped styles ====== */
.hksev-lp *{box-sizing:border-box;margin:0;padding:0}
.hksev-lp{
  --hk-blue:#0b5cab; --hk-blue-deep:#073b73; --hk-blue-700:#0a4e96;
  --hk-sky:#e9f2fb; --hk-sky-2:#f4f9ff; --hk-line:#d6e4f3;
  --hk-ink:#15263a; --hk-body:#3c4f63; --hk-mute:#6b7d92;
  --hk-wa:#1eb858; --hk-wa-deep:#159a48;
  --hk-warm:#f4a64b;
  --hk-radius:16px; --hk-radius-sm:12px;
  --hk-shadow:0 10px 30px rgba(11,92,171,.12);
  --hk-shadow-sm:0 4px 14px rgba(11,92,171,.10);
  font-family:"Noto Sans HK","PingFang HK","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--hk-body);
  line-height:1.75;
  font-size:16px;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
.hksev-lp img{max-width:100%;display:block}
.hksev-lp a{color:inherit;text-decoration:none}
.hksev-wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.hksev-sec{padding:54px 0}
.hksev-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.12em;
  color:var(--hk-blue);text-transform:uppercase;margin-bottom:12px;
}
.hksev-eyebrow::before{content:"";width:22px;height:2px;background:var(--hk-blue);border-radius:2px}
.hksev-h2{font-size:clamp(24px,5.4vw,36px);line-height:1.25;color:var(--hk-ink);font-weight:800;letter-spacing:-.01em}
.hksev-h2 b{color:var(--hk-blue)}
.hksev-lead{font-size:clamp(15px,3.8vw,18px);color:var(--hk-body);margin-top:14px;max-width:680px}
.hksev-center{text-align:center}
.hksev-center .hksev-lead{margin-left:auto;margin-right:auto}
.hksev-center .hksev-eyebrow::before{display:none}

/* ===== Buttons ===== */
.hksev-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:16px;font-weight:800;padding:15px 22px;border-radius:14px;
  border:2px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  line-height:1.1;white-space:nowrap;
}
.hksev-btn svg{width:20px;height:20px;flex:none}
.hksev-btn:active{transform:translateY(1px)}
.hksev-btn-call{background:var(--hk-blue);color:#fff;box-shadow:0 8px 22px rgba(11,92,171,.32)}
.hksev-btn-call:hover{background:var(--hk-blue-deep)}
.hksev-btn-wa{background:var(--hk-wa);color:#fff;box-shadow:0 8px 22px rgba(30,184,88,.30)}
.hksev-btn-wa:hover{background:var(--hk-wa-deep)}
.hksev-btn-ghost{background:#fff;color:var(--hk-blue);border-color:var(--hk-line)}
.hksev-btn-ghost:hover{border-color:var(--hk-blue);background:var(--hk-sky-2)}
.hksev-btn-lg{font-size:17px;padding:17px 26px}

/* ===== Hero ===== */
.hksev-hero{background:linear-gradient(180deg,#f4f9ff 0%,#fff 70%);border-bottom:1px solid var(--hk-line);overflow:hidden}
.hksev-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:46px 0 50px}
.hksev-area{display:inline-flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.hksev-area span{font-size:12.5px;font-weight:700;color:var(--hk-blue-700);background:#fff;border:1px solid var(--hk-line);padding:5px 11px;border-radius:999px}
.hksev-h1{font-size:clamp(27px,6.6vw,46px);line-height:1.18;color:var(--hk-ink);font-weight:900;letter-spacing:-.015em}
.hksev-h1 b{color:var(--hk-blue);font-weight:900}
.hksev-sub{font-size:clamp(15px,4vw,18px);color:var(--hk-body);margin-top:16px;max-width:540px}
.hksev-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hksev-cta-row .hksev-btn{flex:1 1 auto;min-width:0}
.hksev-trust{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:24px;list-style:none}
.hksev-trust li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--hk-ink)}
.hksev-trust li svg{width:18px;height:18px;color:var(--hk-blue);flex:none}
.hksev-hero-media{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--hk-shadow);border:1px solid var(--hk-line)}
.hksev-hero-media svg{width:100%;height:auto;display:block}

/* ===== Cards generic ===== */
.hksev-cards{display:grid;gap:16px;margin-top:32px}
.hksev-cards-3{grid-template-columns:repeat(3,1fr)}
.hksev-cards-2{grid-template-columns:repeat(2,1fr)}
.hksev-card{background:#fff;border:1px solid var(--hk-line);border-radius:var(--hk-radius);padding:22px;box-shadow:var(--hk-shadow-sm)}
.hksev-card h3{font-size:17px;color:var(--hk-ink);font-weight:800;margin-bottom:7px}
.hksev-card p{font-size:14.5px;color:var(--hk-body)}

/* ===== Symptoms ===== */
.hksev-sym-sec{background:var(--hk-sky-2)}
.hksev-sym{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.hksev-sym li{list-style:none;background:#fff;border:1px solid var(--hk-line);border-radius:14px;padding:18px 18px;display:flex;gap:13px;align-items:flex-start}
.hksev-sym .hksev-ic{width:38px;height:38px;border-radius:10px;background:var(--hk-sky);color:var(--hk-blue);display:grid;place-items:center;flex:none}
.hksev-sym .hksev-ic svg{width:21px;height:21px}
.hksev-sym b{display:block;color:var(--hk-ink);font-size:15.5px;font-weight:800;margin-bottom:3px}
.hksev-sym p{font-size:13.5px;color:var(--hk-mute);line-height:1.6}
.hksev-note{margin-top:22px;font-size:14px;color:var(--hk-mute);background:#fff;border:1px dashed var(--hk-line);border-radius:12px;padding:14px 16px;display:flex;gap:10px;align-items:flex-start}
.hksev-note svg{width:20px;height:20px;color:var(--hk-blue);flex:none;margin-top:1px}

/* ===== Why us ===== */
.hksev-why{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.hksev-why .hksev-card{display:flex;gap:15px;align-items:flex-start}
.hksev-why .hksev-ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--hk-blue),var(--hk-blue-deep));color:#fff;display:grid;place-items:center;flex:none}
.hksev-why .hksev-ic svg{width:24px;height:24px}

/* ===== Steps ===== */
.hksev-steps-sec{background:var(--hk-blue-deep);color:#fff;background-image:linear-gradient(160deg,#0a4e96,#073b73)}
.hksev-steps-sec .hksev-h2{color:#fff}
.hksev-steps-sec .hksev-h2 b{color:#bcd9ff}
.hksev-steps-sec .hksev-eyebrow{color:#bcd9ff}
.hksev-steps-sec .hksev-eyebrow::before{background:#bcd9ff}
.hksev-steps-sec .hksev-lead{color:#d4e6fb}
.hksev-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px;counter-reset:hkstep}
.hksev-step{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:20px 16px;position:relative}
.hksev-step .hksev-n{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--hk-blue-deep);font-weight:900;font-size:16px;display:grid;place-items:center;margin-bottom:12px}
.hksev-step b{display:block;color:#fff;font-size:16px;font-weight:800;margin-bottom:5px}
.hksev-step p{font-size:13.5px;color:#cfe2f8;line-height:1.6}

/* ===== Pricing ===== */
.hksev-price{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.hksev-price .hksev-card{text-align:left}
.hksev-price .hksev-amt{font-size:28px;font-weight:900;color:var(--hk-blue);letter-spacing:-.01em;margin:4px 0 8px}
.hksev-price .hksev-amt small{font-size:14px;color:var(--hk-mute);font-weight:600}
.hksev-price ul{list-style:none;margin-top:10px;display:grid;gap:8px}
.hksev-price li{display:flex;gap:9px;font-size:14px;color:var(--hk-body);align-items:flex-start}
.hksev-price li svg{width:17px;height:17px;color:var(--hk-wa);flex:none;margin-top:3px}
.hksev-price-note{margin-top:18px;background:var(--hk-sky);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--hk-blue-deep);font-weight:600;display:flex;gap:10px;align-items:flex-start}
.hksev-price-note svg{width:20px;height:20px;flex:none;color:var(--hk-blue)}

/* ===== Reviews ===== */
.hksev-rev-sec{background:var(--hk-sky-2)}
.hksev-rev{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.hksev-rev .hksev-card{display:flex;flex-direction:column;gap:10px}
.hksev-stars{display:flex;gap:2px;color:var(--hk-warm)}
.hksev-stars svg{width:18px;height:18px}
.hksev-rev q{font-size:15px;color:var(--hk-ink);line-height:1.7;quotes:none;font-style:normal}
.hksev-rev .hksev-by{font-size:13px;color:var(--hk-mute);font-weight:700;margin-top:auto}
.hksev-rev-disc{margin-top:16px;font-size:12.5px;color:var(--hk-mute);text-align:center}

/* ===== Branches ===== */
.hksev-br{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}
.hksev-br-card{background:#fff;border:1px solid var(--hk-line);border-radius:var(--hk-radius);overflow:hidden;box-shadow:var(--hk-shadow-sm);display:flex;flex-direction:column}
.hksev-br-map{width:100%;height:220px;border:0;display:block;background:var(--hk-sky)}
.hksev-br-body{padding:22px}
.hksev-br-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:999px;margin-bottom:10px}
.hksev-br-tag.day{background:var(--hk-sky);color:var(--hk-blue-deep)}
.hksev-br-tag.h24{background:#fdeede;color:#a35a12}
.hksev-br-card h3{font-size:20px;color:var(--hk-ink);font-weight:900}
.hksev-br-list{list-style:none;margin:14px 0 18px;display:grid;gap:10px}
.hksev-br-list li{display:flex;gap:11px;font-size:14.5px;color:var(--hk-body);align-items:flex-start}
.hksev-br-list svg{width:19px;height:19px;color:var(--hk-blue);flex:none;margin-top:2px}
.hksev-br-cta{display:flex;flex-wrap:wrap;gap:10px}
.hksev-br-cta .hksev-btn{flex:1 1 140px;font-size:15px;padding:13px 16px}

/* ===== FAQ ===== */
.hksev-faq{margin-top:30px;border-top:1px solid var(--hk-line)}
.hksev-faq details{border-bottom:1px solid var(--hk-line)}
.hksev-faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 4px;position:relative;font-size:16.5px;font-weight:800;color:var(--hk-ink)}
.hksev-faq summary::-webkit-details-marker{display:none}
.hksev-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;border-right:2.4px solid var(--hk-blue);border-bottom:2.4px solid var(--hk-blue);transform:translateY(-65%) rotate(45deg);transition:transform .22s ease}
.hksev-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.hksev-faq .hksev-ans{padding:0 4px 22px;font-size:15px;color:var(--hk-body);line-height:1.8}
.hksev-faq .hksev-ans a{color:var(--hk-blue);font-weight:700;text-decoration:underline}

/* ===== Final CTA ===== */
.hksev-final{background:linear-gradient(160deg,#0a4e96,#073b73);color:#fff;border-radius:24px;padding:44px 32px;text-align:center;margin:6px 0}
.hksev-final h2{font-size:clamp(23px,5.4vw,34px);font-weight:900;color:#fff;line-height:1.3}
.hksev-final p{color:#d4e6fb;font-size:16px;margin-top:12px;max-width:560px;margin-left:auto;margin-right:auto}
.hksev-final .hksev-cta-row{justify-content:center;max-width:520px;margin-left:auto;margin-right:auto}
.hksev-final .hksev-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.hksev-final .hksev-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ===== Sticky mobile CTA bar ===== */
.hksev-sticky{display:none}

@media(max-width:880px){
  .hksev-hero-grid{grid-template-columns:1fr;gap:26px;padding:30px 0 34px}
  .hksev-hero-media{order:-1}
  .hksev-cards-3,.hksev-sym,.hksev-why,.hksev-steps,.hksev-price,.hksev-rev,.hksev-br{grid-template-columns:1fr}
  .hksev-sym{grid-template-columns:repeat(2,1fr)}
  .hksev-steps{grid-template-columns:1fr 1fr}
  .hksev-sec{padding:40px 0}
  .hksev-final{border-radius:0;padding:40px 20px}
  .hksev-lp{padding-bottom:78px} /* room for sticky bar */
  .hksev-sticky{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9999;
    background:#fff;border-top:1px solid var(--hk-line);
    box-shadow:0 -6px 22px rgba(11,92,171,.16);
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:8px;
  }
  .hksev-sticky a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:12px;font-weight:800;padding:9px 4px;border-radius:12px;color:#fff;line-height:1.1;
  }
  .hksev-sticky a svg{width:21px;height:21px}
  .hksev-sticky .s-call{background:var(--hk-blue)}
  .hksev-sticky .s-wa{background:var(--hk-wa)}
  .hksev-sticky .s-map{background:var(--hk-blue-deep)}
}
@media(max-width:480px){
  .hksev-sym{grid-template-columns:1fr}
  .hksev-cta-row .hksev-btn{flex:1 1 100%}
}
