.hk-page{padding:56px 0 80px}


.hk-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;margin-bottom:76px}
.hk-title{
  font-family:'DM Serif Display',var(--ff-serif),serif;font-weight:400;
  font-size:clamp(40px,4vw,54px);line-height:1.08;
}
.hk-title .row1{display:block;color:var(--ink)}
.hk-title .row2{display:block;color:var(--gold);font-style:italic}
.hk-lead{font-size:15.5px;line-height:1.85;color:var(--ink-soft);margin:18px 0 34px;max-width:520px}

.hk-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:560px}
.hk-feat{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hk-feat svg{width:58px;height:58px;transition:transform .3s ease,filter .3s ease}
.hk-feat:hover svg{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 8px 12px rgba(177,137,47,.35))}
.hk-feat span{font-size:11px;font-weight:900;letter-spacing:.05em;color:var(--ink);line-height:1.35}

.hk-intro-img{width:100%;height:auto;display:block;border-radius:20px;box-shadow:0 8px 20px rgba(59,42,21,.10)}


.hk-vm{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:76px}
.hk-vm-card{
  position:relative;border-radius:24px;padding:34px 34px 30px;overflow:hidden;
}
.hk-vm-card .hk-vm-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hk-vm-card .hk-vm-head svg{width:54px;height:54px;flex:none}
.hk-vm-card h3{
  font-family:'DM Serif Display',var(--ff-serif),serif;font-weight:400;font-size:26px;
}
.hk-vm-card p{font-size:14px;line-height:1.8;margin:0}

.hk-vm-card.vision{
  color:#fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cpath d='M138 42c8-13 22-16 31-13-3 10-13 18-25 18-2 0-4-2-6-5z' fill='%23fff' fill-opacity='.05'/%3E%3Cpath d='M28 148c6-10 16-12 23-10-2 8-10 14-18 14-2 0-4-2-5-4z' fill='%23f2efe6' fill-opacity='.04'/%3E%3C/svg%3E"),
    linear-gradient(135deg,var(--olive) 0%,var(--olive-dark) 100%);
  box-shadow:0 12px 28px rgba(62,70,29,.30);
}
.hk-vm-card.vision h3{color:#FFFDF4}
.hk-vm-card.vision p{color:#E4E9D2}
.hk-vm-card.vision .hk-vm-head svg circle:first-of-type{fill:#FFFCF2}

.hk-vm-card.mission{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cpath d='M138 42c8-13 22-16 31-13-3 10-13 18-25 18-2 0-4-2-6-5z' fill='%23B1892F' fill-opacity='.04'/%3E%3C/svg%3E"),
    var(--cream-2);
  border:1px solid var(--line);
}
.hk-vm-card.mission h3{color:var(--ink)}
.hk-vm-card.mission p{color:var(--ink-soft)}


.hk-tl{display:flex;align-items:flex-start;margin:48px 0 76px}
.hk-ms{
  flex:0 0 172px;display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.hk-ms-ic{
  width:64px;height:64px;border-radius:50%;
  background:#fff;border:1.5px solid var(--gold);
  outline:1px solid var(--gold-light);outline-offset:3px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(177,137,47,.18);
  transition:.28s;
}
.hk-ms-ic svg{width:34px;height:34px;transition:transform .28s}
.hk-ms:hover .hk-ms-ic{
  border-color:var(--olive);outline-color:var(--olive);
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(78,87,38,.22);
}
.hk-ms:hover .hk-ms-ic svg{transform:scale(1.1)}
.hk-ms-year{
  margin-top:15px;
  font-family:'DM Serif Display',var(--ff-serif),serif;font-weight:400;
  font-size:21px;color:var(--ink);line-height:1;
}
.hk-ms h4{font-size:13.5px;font-weight:900;color:var(--gold-dark);margin:5px 0 9px}
.hk-ms p{font-size:12.5px;line-height:1.65;color:var(--ink-soft);margin:0}

.hk-dots{
  flex:1;min-width:36px;height:64px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 6px;
}
.hk-dots .ln{flex:1;max-width:64px;height:1.5px;border-radius:1px}
.hk-dots .ln.left{background:linear-gradient(to right,transparent,var(--gold-light))}
.hk-dots .ln.right{background:linear-gradient(to left,transparent,var(--gold-light))}
.hk-leaf{flex:none}


.hk-quality{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center;margin-bottom:76px}
.hk-quality-img{width:100%;height:auto;display:block;border-radius:20px;box-shadow:0 8px 20px rgba(59,42,21,.10)}
.hk-quality h2{
  font-family:'DM Serif Display',var(--ff-serif),serif;font-weight:400;
  font-size:clamp(28px,2.8vw,38px);line-height:1.12;margin-bottom:14px;
}
.hk-quality h2 .row1{display:block;color:var(--ink)}
.hk-quality h2 .row2{display:block;color:var(--gold);font-style:italic}
.hk-quality p{font-size:14.5px;line-height:1.8;color:var(--ink-soft);margin:0 0 28px;max-width:480px}
.hk-qics{display:flex;gap:26px;flex-wrap:wrap}
.hk-qic{display:flex;align-items:center;gap:12px}
.hk-qic svg{width:54px;height:54px;flex:none;transition:transform .3s ease,filter .3s ease}
.hk-qic:hover svg{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 8px 12px rgba(177,137,47,.35))}
.hk-qic span{font-size:12.5px;font-weight:900;color:var(--ink);line-height:1.35;max-width:110px}


.hk-values{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:44px}
.hk-value{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:26px 16px 22px;text-align:center;transition:.28s;
}
.hk-value:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(59,42,21,.12);border-color:var(--gold-light)}
.hk-value svg{width:56px;height:56px;margin-bottom:12px}
.hk-value h4{
  font-family:'DM Serif Display',var(--ff-serif),serif;font-weight:400;
  font-size:18px;color:var(--ink);margin-bottom:6px;
}
.hk-value p{font-size:12px;line-height:1.6;color:var(--ink-soft);margin:0}


@media (max-width:1024px){
  .hk-values{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hk-intro,.hk-quality{grid-template-columns:1fr;gap:34px}
  .hk-vm{grid-template-columns:1fr}
  .hk-feats{grid-template-columns:repeat(2,1fr)}
  .hk-tl{flex-wrap:wrap;justify-content:center;gap:30px}
  .hk-dots{display:none}
  .hk-values{grid-template-columns:1fr 1fr}
}