.hkpv {
  --navy:#253365;
  --deep:#18224b;
  --cyan:#27c4e6;
  --pink:#d41465;
  --muted:#73839a;
  --line:#e5ebf1;
  background:#fff;
  color:var(--navy);
  overflow:clip
}
.hkpv * {
  box-sizing:border-box
}
.hkpv-wrap {
  width:min(1160px,calc(100% - 48px));
  margin-inline:auto
}
.hkpv h1,.hkpv h2,.hkpv h3,.hkpv p {
  margin:0
}
.hkpv h1,.hkpv h2 {
  line-height:1.55;
  letter-spacing:-.03em
}
.hkpv em {
  font-style:normal;
  color:var(--cyan)
}
.hkpv a {
  text-decoration:none
}
.hkpv button {
  font:inherit;
  cursor:pointer
}
.hkpv-hero {
  position:relative;
  isolation:isolate;
  background:radial-gradient(650px 300px at 88% -5%,#21bfe232,transparent 66%),linear-gradient(120deg,#1c2857,#101738);
  color:white
}
.hkpv-hero:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:radial-gradient(#ffffff12 1px,transparent 1.5px);
  background-size:26px 26px;
  mask-image:linear-gradient(#000,transparent 80%)
}
.hkpv-crumb {
  padding-top:20px;
  font-size:12px;
  color:#c9d6eb
}
.hkpv-crumb a {
  color:#a8bbd9
}
.hkpv-hero__grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:50px;
  align-items:center;
  padding:54px 0 75px
}
.hkpv-chip {
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:#31c8e51c;
  color:#a7eafa;
  border:1px solid #29c3e64d;
  border-radius:99px;
  padding:7px 13px;
  font-size:12px;
  font-weight:800
}
.hkpv-chip i {
  width:7px;
  height:7px;
  background:#26c9e8;
  border-radius:50%;
  box-shadow:0 0 0 4px #29c3e622
}
.hkpv-hero h1 {
  font-size:clamp(31px,3.5vw,47px);
  font-weight:900;
  color:#fff;
  margin:17px 0 12px
}
.hkpv-hero__copy>p {
  font-size:15px;
  line-height:2.2;
  color:#c6d4e9;
  max-width:590px
}
.hkpv-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:25px
}
.hkpv-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:54px;
  padding:13px 22px;
  border:1px solid transparent;
  border-radius:11px;
  font-size:14px;
  font-weight:850;
  transition:transform .2s,background .2s
}
.hkpv-btn:hover {
  transform:translateY(-3px)
}
.hkpv-btn--pink {
  background:var(--pink);
  color:#fff;
  box-shadow:0 12px 28px #c9096245
}
.hkpv-btn--pink:hover {
  background:#e41e70;
  color:#fff
}
.hkpv-btn--outline {
  border-color:#ffffff55;
  color:#fff;
  background:#ffffff0b
}
.hkpv-btn--outline:hover {
  color:#fff;
  background:#ffffff1b
}
.hkpv-hero__note {
  margin-top:27px;
  color:#afc2df;
  font-size:12px
}
.hkpv-hero__note span {
  color:var(--cyan);
  margin-left:7px
}
.hkpv-hero__visual {
  position:relative;
  padding:18px
}
.hkpv-hero__visual:before {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid #9ae2f028;
  border-radius:35px;
  transform:rotate(-4deg)
}
.hkpv-hero__photo {
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid #ffffff43;
  box-shadow:0 25px 65px #09112d80
}
.hkpv-hero__photo:after {
  content:"";
  position:absolute;
  inset:48% 0 0;
  background:linear-gradient(transparent,#0e193dd6)
}
.hkpv-hero__photo img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover
}
.hkpv-photo__label {
  position:absolute;
  z-index:1;
  right:19px;
  bottom:19px;
  display:flex;
  align-items:center;
  gap:10px
}
.hkpv-photo__label>span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:13px;
  background:#ffffff35;
  backdrop-filter:blur(5px)
}
.hkpv-photo__label b,.hkpv-photo__label small {
  display:block
}
.hkpv-photo__label b {
  font-size:13px
}
.hkpv-photo__label small {
  font-size:11px;
  color:#d4e4f0
}
.hkpv-hero__badge {
  position:absolute;
  left:-8px;
  top:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  color:var(--navy);
  background:#fff;
  box-shadow:0 15px 35px #08112b66
}
.hkpv-hero__badge i {
  font-style:normal;
  display:grid;
  place-items:center;
  width:37px;
  height:37px;
  border-radius:10px;
  color:#d41465;
  background:#fceaf2
}
.hkpv-hero__badge b,.hkpv-hero__badge small {
  display:block
}
.hkpv-hero__badge b {
  font-size:12px
}
.hkpv-hero__badge small {
  color:#98a4b5;
  font-size:10px
}
.hkpv-eq {
  height:34px;
  overflow:hidden;
  color:#1dc3e9;
  background:white
}
.hkpv-eq svg,.hkpv-eq canvas {
  display:block;
  width:100%;
  height:100%
}
.hkpv-section {
  padding:85px 0
}
.hkpv-heading {
  max-width:780px;
  margin-bottom:30px
}
.hkpv-heading--center {
  text-align:center;
  margin:0 auto 35px
}
.hkpv-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#1195b1;
  font-size:13px;
  font-weight:850;
  margin-bottom:10px
}
.hkpv-eyebrow:before {
  content:"";
  width:25px;
  height:3px;
  border-radius:5px;
  background:var(--cyan)
}
.hkpv h2 {
  font-size:clamp(26px,2.65vw,36px);
  font-weight:900
}
.hkpv-heading p,.hkpv-audience__grid>div>p,.hkpv-apply__copy>p {
  font-size:14px;
  line-height:2.1;
  color:var(--muted);
  margin-top:12px
}
.hkpv-benefits {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px
}
.hkpv-benefits article {
  padding:24px 20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 35px #1f325008;
  transition:transform .2s,border-color .2s
}
.hkpv-benefits article:hover {
  transform:translateY(-4px);
  border-color:#b6e7f1
}
.hkpv-benefits article>span {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:13px;
  background:#e8f8fb;
  color:#158eaa
}
.hkpv-benefits h3,.hkpv-steps h3 {
  font-size:15px;
  line-height:1.8;
  margin:17px 0 7px;
  font-weight:850
}
.hkpv-benefits p,.hkpv-steps p {
  font-size:12px;
  line-height:2;
  color:#8190a5
}
.hkpv-audience {
  padding:80px 0;
  background:#fff
}
.hkpv-audience__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:75px
}
.hkpv-inline {
  display:inline-block;
  margin-top:20px;
  color:#138ba9;
  font-size:13px;
  font-weight:850
}
.hkpv-audience__cards {
  display:grid;
  gap:11px
}
.hkpv-audience__cards>div {
  display:flex;
  align-items:center;
  gap:15px;
  padding:16px 18px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px
}
.hkpv-audience__cards>div>span,.hkpv-steps article>span {
  display:grid;
  place-items:center;
  flex:none;
  width:45px;
  height:45px;
  border-radius:12px;
  background:#e7f8fb;
  color:#1192ae;
  font-size:14px;
  font-weight:900
}
.hkpv-audience__cards p {
  margin:0
}
.hkpv-audience__cards b,.hkpv-audience__cards small {
  display:block
}
.hkpv-audience__cards b {
  font-size:14px
}
.hkpv-audience__cards small {
  font-size:12px;
  color:#8897aa;
  line-height:1.8;
  margin-top:3px
}
.hkpv-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.hkpv-steps article {
  padding:25px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff
}
.hkpv-steps article>span {
  background:#fbeaf2;
  color:#cd2065
}
.hkpv-apply {
  background:#fff;
  padding:80px 0 55px
}
.hkpv-apply__grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:65px;
  align-items:start
}
.hkpv-apply__copy {
  position:sticky;
  top:25px;
  padding-top:18px
}
.hkpv-apply__copy ul {
  list-style:none;
  padding:0;
  margin:23px 0 28px;
  display:grid;
  gap:11px
}
.hkpv-apply__copy li {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  color:#60738b
}
.hkpv-apply__copy li svg {
  color:#13a8be
}
.hkpv-contact {
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #e3eaf1;
  border-radius:14px;
  padding:15px 18px
}
.hkpv-contact>span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#e7f8fb;
  color:#1591ae
}
.hkpv-contact small,.hkpv-contact a {
  display:block
}
.hkpv-contact small {
  font-size:11px;
  color:#8797ab
}
.hkpv-contact a {
  color:var(--navy);
  font-size:17px;
  font-weight:900
}
.hkpv-form-card {
  background:#fff;
  border:1px solid #e4eaf1;
  border-radius:20px;
  padding:30px;
  box-shadow:0 20px 50px #20334e12
}
.hkpv-form__heading {
  display:flex;
  align-items:center;
  gap:13px;
  border-bottom:1px solid #edf1f5;
  padding-bottom:21px;
  margin-bottom:23px
}
.hkpv-form__heading>span {
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#fff0f6;
  color:var(--pink)
}
.hkpv-form__heading h2 {
  font-size:20px
}
.hkpv-form__heading p {
  font-size:12px;
  color:#8c99aa;
  margin-top:3px
}
.hkpv-type {
  border:0;
  padding:0;
  margin:0 0 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.hkpv-type legend {
  font-size:13px;
  font-weight:850;
  margin-bottom:9px
}
.hkpv-type legend span,.hkpv-form label>span {
  color:var(--pink)
}
.hkpv-type label {
  position:relative;
  cursor:pointer
}
.hkpv-type input {
  position:absolute;
  opacity:0
}
.hkpv-type label span {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:12px;
  border:1px solid #e1e8ef;
  border-radius:10px;
  background:#f8fafc;
  color:#70819a;
  font-size:13px;
  font-weight:800
}
.hkpv-type input:checked+span {
  border-color:#31bbd9;
  background:#eaf9fc;
  color:#1288a4
}
.hkpv-type input:focus-visible+span {
  outline:3px solid #ec79aa;
  outline-offset:2px
}
.hkpv-form__cols {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.hkpv-company-fields[hidden] {
  display:none
}
.hkpv-form__row {
  margin-bottom:17px
}
.hkpv-form__row label {
  display:block;
  font-size:13px;
  font-weight:800;
  margin-bottom:8px
}
.hkpv-form label small {
  float:left;
  color:#9ca9b8;
  font-size:11px;
  font-weight:500
}
.hkpv-form__row input,.hkpv-form__row textarea {
  display:block;
  width:100%;
  font:inherit;
  font-size:13px;
  color:#25335b;
  border:1px solid #e0e7ef;
  background:#f8fafc;
  border-radius:10px;
  padding:12px 14px;
  outline:none
}
.hkpv-form__row input {
  height:50px
}
.hkpv-form__row textarea {
  resize:vertical;
  min-height:100px;
  line-height:1.9
}
.hkpv-form__row input::placeholder,.hkpv-form__row textarea::placeholder {
  color:#a7b4c4
}
.hkpv-form__row input:focus,.hkpv-form__row textarea:focus {
  border-color:#41bfd8;
  box-shadow:0 0 0 3px #3ec8e41c;
  background:white
}
.hkpv-form__submit {
  width:100%;
  border:0
}
.hkpv-form__privacy {
  text-align:center;
  color:#93a0b2;
  font-size:11px;
  line-height:1.9;
  margin-top:12px!important
}
.hkpv-form__hp {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden
}
.hkpv-notice {
  border-radius:10px;
  padding:13px 15px;
  font-size:13px;
  line-height:2;
  margin-bottom:18px
}
.hkpv-notice--success {
  background:#e6f8f0;
  color:#117253
}
.hkpv-notice--error {
  background:#fff0f0;
  color:#a02c3f
}
.hkpv :focus-visible {
  outline:3px solid #ed80aa;
  outline-offset:3px
}
@media(max-width:900px) {
  .hkpv-benefits {
  grid-template-columns:repeat(2,1fr)
}
.hkpv-hero__grid {
  gap:20px
}
.hkpv-audience__grid {
  gap:35px
}
.hkpv-apply__grid {
  gap:28px
}

}
@media(max-width:700px) {
  .hkpv-wrap {
  width:calc(100% - 32px)
}
.hkpv-hero__grid {
  grid-template-columns:1fr;
  padding:40px 0 55px;
  gap:28px
}
.hkpv-hero h1 {
  font-size:33px
}
.hkpv-hero__copy>p {
  font-size:14px
}
.hkpv-hero__visual {
  max-width:500px;
  margin:auto
}
.hkpv-section,.hkpv-audience,.hkpv-apply {
  padding:58px 0
}
.hkpv-benefits,.hkpv-steps {
  grid-template-columns:1fr 1fr
}
.hkpv-audience__grid,.hkpv-apply__grid {
  grid-template-columns:1fr;
  gap:28px
}
.hkpv-apply__copy {
  position:static;
  padding-top:0
}
.hkpv-form-card {
  padding:22px
}

}
@media(max-width:480px) {
  .hkpv-benefits,.hkpv-steps,.hkpv-form__cols {
  grid-template-columns:1fr
}
.hkpv-form__cols {
  gap:0
}
.hkpv-actions .hkpv-btn {
  width:100%
}

}
@media(prefers-reduced-motion:reduce) {
  .hkpv * {
  transition:none!important;
  animation:none!important
}

}


.hkpv-faq { padding: 76px 0; background: #fff; }
.hkpv-faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 65px; }
.hkpv-faq__grid > div > p { color: #73839a; line-height: 2; font-size: 14px; margin-top: 12px; }
.hkpv-faq__items { display: grid; gap: 10px; }
.hkpv-faq details { background: #fff; border: 1px solid #e5ebf1; border-radius: 12px; overflow: hidden; }
.hkpv-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 850; }
.hkpv-faq summary::-webkit-details-marker { display: none; }
.hkpv-faq summary span { color: #11a5c1; font-size: 21px; font-weight: 400; }
.hkpv-faq details[open] summary span { transform: rotate(45deg); }
.hkpv-faq details p { color: #73839a; line-height: 2; font-size: 13px; padding: 0 20px 18px; }
@media (max-width: 700px) { .hkpv-faq { padding: 56px 0; } .hkpv-faq__grid { grid-template-columns: 1fr; gap: 25px; } }

/* Keep the application heading on one line in its available column. */
.hkpv .hkpv-apply__copy h2 {
  font-size: clamp(16px, 2vw, 27px);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .hkpv .hkpv-apply__copy h2 { font-size: clamp(16px, 5.2vw, 27px); }
}
