/* ============================================================
   Hong Kong Jan · premium finish layer (loaded last on every page)
   Typography, gold detailing, depth, photo grading and motion.
   ============================================================ */
:root {
  --lift-gold: linear-gradient(135deg, #F4E2AE 0%, #D9B566 38%, #C9A24E 60%, #8A6A1F 100%);
  --lift-gold-line: linear-gradient(90deg, #c9a24e00, #C9A24E, #E7CF97, #C9A24E, #c9a24e00);
  --lift-ease: cubic-bezier(.2, .8, .2, 1);
  --lift-shadow: 0 1px 1px #0a0a0c08, 0 8px 18px -10px #0a0a0c26, 0 40px 70px -48px #0a0a0c59;
  --lift-shadow-hi: 0 1px 1px #0a0a0c08, 0 18px 34px -14px #0a0a0c33, 0 60px 100px -50px #0a0a0c73;
  interpolate-size: allow-keywords;
}
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { font-feature-settings: "cv11", "ss01", "ss03"; }
::selection { background: #C9A24E; color: #0A0A0C; }
h1, h2, h3, .h2, .hero-h1 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ---------- headings: tighter, heavier presence ---------- */
.h2, .section-head h2, .hk-split h2, .cta h2 { letter-spacing: -.045em !important; }
.h2 { font-size: clamp(2.15rem, 4.6vw, 3.5rem) !important; line-height: 1.02 !important; }
.page-hero h1 { letter-spacing: -.05em; font-size: clamp(2.7rem, 7vw, 5.4rem); }
.page-hero h1 em, .on-dark .hk-quote .who, .hk-take b, .cta-band .chip {
  background: var(--lift-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-hero h1 em { background-size: 200% auto; animation: liftSheen 9s linear infinite; padding-bottom: .06em; }
@keyframes liftSheen { to { background-position: -200% center; } }
.eyebrow-dot, .eyebrow.mono-tick { letter-spacing: .24em !important; }
.eyebrow-dot::before, .eyebrow.mono-tick::before { box-shadow: 0 0 0 4px #c9a24e26, 0 0 14px #c9a24e99; }

/* ---------- page hero: grain, light sweep, gold hairline ---------- */
.page-hero { isolation: isolate; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background:
    linear-gradient(115deg, #fff0 30%, #ffffff14 45%, #fff0 60%) 0 0 / 250% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: liftSweep 11s var(--lift-ease) infinite;
}
@keyframes liftSweep { 0%, 15% { background-position: 120% 0, 0 0; } 60%, 100% { background-position: -120% 0, 0 0; } }
.page-hero .container::before {
  content: ""; position: absolute; left: 1.5rem; top: -2.4rem; width: min(22rem, 60%); height: 1px; background: var(--lift-gold-line); opacity: .7;
}
.page-hero p { color: #ffffffcc !important; }
.page-hero .crumb { letter-spacing: .04em; text-transform: uppercase; font-size: .72rem !important; }

/* ---------- dark slabs: depth + grain ---------- */
.slab-dark, .cta, .bfeature, .cta-band { isolation: isolate; }
.slab-dark::after, .bfeature::after, .cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.slab-dark > .slab-inner, .bfeature > *, .cta-band > * { position: relative; z-index: 1; }
.bfeature, .cta-band { position: relative; overflow: hidden; }
.bfeature::before, .cta-band::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--lift-gold-line); z-index: 2;
}

/* ---------- cards: layered depth, gold edge on hover ---------- */
.hk-card, .bcard, .hk-step, .atoc {
  background: linear-gradient(180deg, #fff 0%, #fcfbf9 100%);
  box-shadow: var(--lift-shadow);
  transition: transform .5s var(--lift-ease), box-shadow .5s var(--lift-ease), border-color .5s var(--lift-ease);
}
.hk-card { border-radius: 26px; }
.hk-card::after, .bcard::after, .hk-step::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: var(--lift-gold); transition: opacity .5s var(--lift-ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.bcard, .hk-step { position: relative; }
a.hk-card:hover, .hk-card--hover:hover, .bcard:hover, .hk-step:hover, .hk-grid > .hk-card:hover {
  transform: translateY(-6px); box-shadow: var(--lift-shadow-hi); border-color: transparent;
}
a.hk-card:hover::after, .bcard:hover::after, .hk-step:hover::after, .hk-grid > .hk-card:hover::after { opacity: 1; }

/* dark cards: gold rim + cursor spotlight (lift.js sets --mx/--my) */
.hk-card--dark, .hk-take, .abox:first-child {
  border: 1px solid transparent !important;
  background:
    radial-gradient(420px circle at var(--mx, 85%) var(--my, -10%), #c9a24e2e, #0000 60%) padding-box,
    linear-gradient(160deg, #15161b, #0A0A0C 60%) padding-box,
    linear-gradient(160deg, #c9a24e99, #ffffff14 40%, #c9a24e40) border-box !important;
}
.slab-dark .hk-card:not(.hk-card--dark) { background: #ffffff0a; }
.slab-dark .hk-card:not(.hk-card--dark)::after { background: linear-gradient(160deg, #c9a24e80, #ffffff10 50%, #c9a24e30); opacity: 1; }

/* icons: solid gold medallions */
.hk-icon {
  background: var(--lift-gold) !important; color: #0A0A0C !important; width: 50px; height: 50px;
  box-shadow: 0 10px 24px -10px #c9a24ecc, inset 0 1px 0 #ffffff80;
}
.hk-card:hover .hk-icon { transform: rotate(-6deg) scale(1.05); }
.hk-icon { transition: transform .5s var(--lift-ease); }

/* tags and small labels */
.hk-card .hk-tag, .bcard .btag, .hk-cal .hk-when { letter-spacing: .22em; }

/* big numbers in gold */
.hk-num, .hk-step .n, .hk-plan .price, .stat-fig .counter {
  background: var(--lift-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.hk-card--dark.hk-plan .price { -webkit-text-fill-color: transparent; }
.hk-plan .price small { -webkit-text-fill-color: #6a6775; }
.hk-card--dark.hk-plan .price small { -webkit-text-fill-color: #ffffff99; }
.stat-fig { letter-spacing: -.06em !important; }

/* numbered steps: gold rail */
.hk-step { overflow: hidden; }
.hk-step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lift-gold);
  transform: scaleY(0); transform-origin: top; transition: transform .6s var(--lift-ease);
}
.hk-step:hover::before { transform: scaleY(1); }
.hk-step .n { font-size: 3.4rem; font-weight: 600; }

/* ---------- photos: graded to sit together, full colour on hover ---------- */
.hk-photo img, .hk-svc .hk-ph img, .tile img, .car-shot img, .use-shot img, .story-shot img {
  filter: saturate(.82) contrast(1.06) brightness(.98);
  transition: filter .8s var(--lift-ease), transform 1.2s var(--lift-ease) !important;
}
.hk-svc:hover .hk-ph img, .tile:hover img, .use:hover .use-shot img, .car-item:hover .car-shot img { filter: saturate(1) contrast(1.04); transform: scale(1.05); }
.hk-photo { position: relative; }
.hk-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #0a0a0c14, inset 0 -80px 80px -60px #0a0a0c33; pointer-events: none; }

/* ---------- Jan's take: gold rim, quote mark ---------- */
.hk-take { position: relative; overflow: hidden; }
.hk-take::before {
  content: "\201C"; position: absolute; right: 1.2rem; top: -.6rem; font-size: 7rem; line-height: 1; font-weight: 700;
  color: #c9a24e1f; font-family: Georgia, serif; pointer-events: none;
}
.hk-take img { box-shadow: 0 0 0 4px #c9a24e26; }

/* notes: gold rail */
.hk-note { position: relative; border: 0; background: linear-gradient(90deg, #c9a24e1f, #c9a24e0a); padding-left: 1.7rem; }
.hk-note::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--lift-gold); }

/* ---------- tables: dark header, gold first column ---------- */
.hk-table, .atable { border: 0; box-shadow: var(--lift-shadow); border-radius: 20px; }
.hk-table th, .atable th { background: #0A0A0C; color: #E7CF97; letter-spacing: .16em; }
.hk-table td:first-child, .atable td:first-child { font-weight: 600; color: #0A0A0C; }
.hk-table tbody tr, .atable tbody tr { transition: background .3s; }
.hk-table tbody tr:hover, .atable tbody tr:hover { background: #c9a24e0f; }
.hk-table td strong { color: #8A6A1F; font-size: 1.08em; font-weight: 700; }

/* ---------- lists: refined check ---------- */
.hk-list li::before { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230a0a0c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--lift-gold); background-size: 12px, cover; background-position: center; box-shadow: 0 4px 10px -4px #c9a24eb3; }
.hk-list--dot li::before { background: var(--lift-gold); box-shadow: 0 0 10px #c9a24e99; }

/* ---------- buttons: depth + light sweep ---------- */
.btn { transition: transform .45s var(--lift-ease), box-shadow .45s var(--lift-ease), background .35s, color .35s !important; position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, #fff0, #ffffff59, #fff0); transform: skewX(-18deg); transition: left .7s var(--lift-ease);
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-2px); }
.btn-accent, .btn-gold, .btn-primary { box-shadow: 0 1px 0 #ffffff26 inset, 0 12px 28px -14px #0a0a0ccc; }
.btn-light { box-shadow: 0 12px 30px -14px #000c; }
.btn svg { transition: transform .45s var(--lift-ease); }
.btn:hover svg { transform: translateX(4px); }

/* ---------- FAQ: smooth open ---------- */
.hk-faq details::details-content { height: 0; overflow: clip; transition: height .45s var(--lift-ease), content-visibility .45s allow-discrete; }
.hk-faq details[open]::details-content { height: auto; }
.hk-faq summary { transition: color .3s; }
.hk-faq summary:hover { color: #8A6A1F; }
.hk-faq details[open] summary i { background: var(--lift-gold); border-color: transparent; box-shadow: 0 6px 16px -6px #c9a24ecc; }

/* ---------- forms ---------- */
.hk-field input, .hk-field select, .hk-field textarea, .hk-form input { transition: border-color .3s, box-shadow .3s; }
.hk-field input:focus, .hk-field select:focus, .hk-field textarea:focus, .hk-form input:focus { outline: 0 !important; border-color: #C9A24E; box-shadow: 0 0 0 4px #c9a24e2e; }

/* ---------- blog ---------- */
.bfilter button { transition: all .35s var(--lift-ease); }
.bfilter button.active { background: #0A0A0C; box-shadow: 0 10px 22px -12px #0a0a0ccc, inset 0 0 0 1px #c9a24e66; color: #E7CF97; }
.article-body > p:first-of-type { font-size: 1.22rem; line-height: 1.7; color: #0A0A0C; }
.article-body h2 { position: relative; padding-top: 1.4rem; }
.article-body h2::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--lift-gold); }
.atoc a { position: relative; transition: color .3s, padding .3s var(--lift-ease); }
.atoc a:hover { padding-left: .6rem; }
.atoc a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: #C9A24E; transition: width .3s var(--lift-ease); }
.atoc a:hover::before { width: .35rem; }

/* ---------- homepage template pieces ---------- */
.tile, .car-item .car-shot, .use-shot { box-shadow: var(--lift-shadow); }
.stats .stat { transition: transform .5s var(--lift-ease); }
.stats .stat:hover { transform: translateY(-4px); }
.pt-a { box-shadow: 0 30px 50px -28px #000c !important; }

/* ---------- motion: staggered reveal inside grids ---------- */
.hk-grid > .reveal:nth-child(2), .hk-cal > .reveal:nth-child(2), .bgrid > .reveal:nth-child(3n+2), .hk-plans > .reveal:nth-child(2), .hk-steps > .reveal:nth-child(2) { transition-delay: .08s !important; }
.hk-grid > .reveal:nth-child(3), .hk-cal > .reveal:nth-child(3), .bgrid > .reveal:nth-child(3n+3), .hk-plans > .reveal:nth-child(3), .hk-steps > .reveal:nth-child(3) { transition-delay: .16s !important; }
.hk-grid > .reveal:nth-child(4), .hk-cal > .reveal:nth-child(4), .hk-steps > .reveal:nth-child(4) { transition-delay: .24s !important; }
.hk-cal > .reveal:nth-child(5) { transition-delay: .32s !important; } .hk-cal > .reveal:nth-child(6) { transition-delay: .4s !important; }

@media (prefers-reduced-motion: reduce) {
  .page-hero::after, .page-hero h1 em { animation: none; }
  .btn::after { display: none; }
  .hk-faq details::details-content { transition: none; }
}

/* ---------- compliance timeline on dark ---------- */
.hk-cal { background: none !important; gap: 1rem !important; counter-reset: cal; }
.slab-dark .hk-cal .hk-card {
  counter-increment: cal; position: relative; overflow: hidden; padding: 1.7rem 1.7rem 1.8rem !important; border-radius: 22px;
  background: linear-gradient(160deg, #ffffff0d, #ffffff04) !important; border: 1px solid #ffffff17 !important; box-shadow: none !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.slab-dark .hk-cal .hk-card::after { opacity: 0 !important; transition: opacity .5s var(--lift-ease); }
.slab-dark .hk-cal .hk-card:hover { transform: translateY(-4px); border-color: transparent !important; }
.slab-dark .hk-cal .hk-card:hover::after { opacity: 1 !important; }
.slab-dark .hk-cal .hk-card::before {
  content: counter(cal, decimal-leading-zero); position: absolute; right: 1.4rem; top: 1.2rem;
  font-size: 2.6rem; font-weight: 600; letter-spacing: -.06em; line-height: 1; color: #ffffff0f; font-variant-numeric: tabular-nums;
}
.slab-dark .hk-cal .hk-when {
  display: inline-flex; align-items: center; gap: .6rem; color: #E7CF97 !important; font-size: .72rem; letter-spacing: .2em; margin-bottom: .9rem;
}
.slab-dark .hk-cal .hk-when::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lift-gold); box-shadow: 0 0 0 4px #c9a24e24, 0 0 14px #c9a24ecc; }
.slab-dark .hk-cal p { color: #ffffffcc !important; font-size: 1rem; line-height: 1.65; max-width: 30ch; }