/* ==========================================================================
   HAKIRO SPORTS GROUP  ·  v2
   --------------------------------------------------------------------------
   Rebuilt after reviewing the six agency sites the client supplied as
   references. All six use a geometric or grotesque sans; none use a
   high-contrast serif; none use a metallic gradient. v1 did the opposite of
   all three.

   The rules this version holds to:
     · Poppins for display, set LIGHT (200/300) and widely tracked.
     · Gold is FLAT. There is not one gradient in this file.
     · White leads. Black is punctuation — hero, footer, Concierge.
     · Small radii, near-invisible shadows, generous air.

   1. Fonts   2. Tokens   3. Reset   4. Layout   5. Type   6. Lockup
   7. Buttons 8. Header   9. Hero   10. Marquee  11. Pillars 12. Advisory
   13. Difference 14. About 15. Concierge invite 16. Contact 17. Footer
   18. Concierge page 19. Motion 20. Responsive
   ========================================================================== */

/* ---------- 1. Fonts ------------------------------------------------------ */

@font-face { font-family:'Poppins'; font-style:normal; font-weight:200; font-display:swap;
  src:url(../fonts/Poppins-200-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:200; font-display:swap;
  src:url(../fonts/Poppins-200-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap;
  src:url(../fonts/Poppins-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap;
  src:url(../fonts/Poppins-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/Poppins-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url(../fonts/Poppins-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family:'Inter'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(../fonts/Inter-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(../fonts/Inter-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- 2. Tokens ------------------------------------------------------ */

:root {
  --hk-paper:#FFFFFF; --hk-shell:#F6F7F9; --hk-line:#E4E6EA; --hk-line-soft:#EFF1F4;
  --hk-ink:#12141A; --hk-ink-2:#3A3F49; --hk-mute:#7C828E; --hk-mute-dark:#9BA2AE;

  --hk-gold:#A16207; --hk-gold-deep:#7C4A05; --hk-gold-lt:#C9A44C; --hk-gold-wash:#FBF6EC;
  --hk-rose:#C2416B; --hk-rose-lt:#E888AB; --hk-rose-wash:#FDF2F6;

  --hk-bg:var(--hk-paper); --hk-text:var(--hk-ink); --hk-text-muted:var(--hk-ink-2);
  --hk-text-subtle:var(--hk-mute); --hk-border:var(--hk-line); --hk-accent:var(--hk-gold);

  --hk-font-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hk-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,sans-serif;

  --hk-track-wordmark:.34em; --hk-track-desc:.52em;
  --hk-track-eyebrow:.34em;  --hk-track-btn:.20em; --hk-track-display:-.015em;

  --hk-fs-hero:clamp(2.5rem,1.1rem + 5.6vw,5.5rem);
  --hk-fs-h1:clamp(2rem,1.2rem + 3.2vw,3.5rem);
  --hk-fs-h2:clamp(1.6rem,1.1rem + 2vw,2.6rem);
  --hk-fs-h3:clamp(1.15rem,1.02rem + .6vw,1.4rem);
  --hk-fs-lead:clamp(1.02rem,.97rem + .35vw,1.2rem);

  --hk-sp-2:1rem; --hk-sp-3:1.5rem; --hk-sp-4:2.5rem;
  --hk-sp-5:4rem; --hk-sp-6:6rem;   --hk-sp-7:8.5rem;

  --hk-r-sm:2px; --hk-r-md:4px; --hk-r-lg:8px; --hk-r-pill:999px;

  --hk-ease:cubic-bezier(.22,1,.36,1);
  --hk-dur-fast:.18s; --hk-dur:.34s; --hk-dur-slow:.8s;

  --hk-shadow-1:0 1px 2px rgba(18,20,26,.05);
  --hk-shadow-2:0 8px 24px -10px rgba(18,20,26,.14);
  --hk-shadow-3:0 24px 60px -24px rgba(18,20,26,.22);

  --hk-maxw:1280px; --hk-maxw-narrow:780px; --hk-header-h:80px;
}

.hk-dark {
  --hk-bg:var(--hk-ink); --hk-text:#FFFFFF; --hk-text-muted:#C6CAD2;
  --hk-text-subtle:var(--hk-mute-dark); --hk-border:rgba(255,255,255,.12);
  --hk-accent:var(--hk-gold-lt);
}

.hk-concierge {
  --hk-bg:#0B0C0F; --hk-text:#FFFFFF; --hk-text-muted:#B9BDC6;
  --hk-text-subtle:#8A8F99; --hk-border:rgba(255,255,255,.10);
  --hk-accent:#E8D7AE; --hk-gold-lt:#E8D7AE; --hk-rose:#E8D7AE;
  --hk-track-wordmark:.44em; --hk-track-eyebrow:.44em;
  /* --shell is a light grey by default; unless it is redefined here the
     alternating sections paint a white band across the dark page. */
  --hk-shell:#12141A;

  /* Deliberately NOT overridden here: --hk-ink, --hk-paper, --hk-line,
     --hk-ink-2, --hk-mute. Those are palette primitives, not semantic tokens.
     Flipping --hk-ink to white on this page turned every element that
     legitimately needs real ink — the solid buttons, the scrolled header —
     into white-on-white. Override what a colour MEANS (--hk-text), never what
     a colour IS. */
}
.hk-concierge body,
body.hk-concierge { background:#0B0C0F; color:#fff; }

/* ---------- 3. Reset -------------------------------------------------------- */

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--hk-header-h) + 24px); -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--hk-bg); color:var(--hk-text);
  font-family:var(--hk-font-body); font-weight:400; font-size:1rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
img,svg,video { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { margin:0; padding:0; list-style:none; }
p { margin:0 0 1.1em; } p:last-child { margin-bottom:0; }
::selection { background:var(--hk-ink); color:#fff; }
:focus-visible { outline:2px solid var(--hk-gold); outline-offset:3px; border-radius:2px; }
.hk-dark :focus-visible,.hk-concierge :focus-visible { outline-color:var(--hk-gold-lt); }

.hk-skip { position:absolute; left:12px; top:-60px; z-index:200; background:var(--hk-ink);
  color:#fff; padding:10px 18px; font-size:.85rem; transition:top var(--hk-dur-fast) var(--hk-ease); }
.hk-skip:focus { top:12px; }
.screen-reader-text { position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* ---------- 4. Layout ------------------------------------------------------- */

.hk-wrap { width:min(100% - 2.5rem,var(--hk-maxw)); margin-inline:auto; }
.hk-wrap--narrow { width:min(100% - 2.5rem,var(--hk-maxw-narrow)); }

.hk-section { position:relative; padding:var(--hk-sp-7) 0; }
.hk-section--tight { padding:var(--hk-sp-6) 0; }
/* --alt is the v1 name, kept as an alias so existing templates keep working. */
.hk-section--shell,
.hk-section--alt { background:var(--hk-shell); }
.hk-section--dark  { background:var(--hk-ink); }

.hk-head { max-width:60ch; margin-bottom:var(--hk-sp-5); }
.hk-head--center { margin-inline:auto; text-align:center; }

.hk-eyebrow {
  display:inline-flex; align-items:center; gap:.9em;
  font-family:var(--hk-font-display); font-weight:400; font-size:.7rem;
  letter-spacing:var(--hk-track-eyebrow); text-transform:uppercase;
  color:var(--hk-accent); margin:0 0 1.5rem;
}
.hk-eyebrow::before { content:""; width:24px; height:1px; background:currentColor; }
.hk-head--center .hk-eyebrow::after { content:""; width:24px; height:1px; background:currentColor; }

/* ---------- 5. Type --------------------------------------------------------- */

h1,h2,h3,h4 {
  font-family:var(--hk-font-display); font-weight:200;
  line-height:1.12; letter-spacing:var(--hk-track-display);
  margin:0 0 .55em; color:var(--hk-text); text-wrap:balance;
}
h1 { font-size:var(--hk-fs-h1); }
h2 { font-size:var(--hk-fs-h2); }
h3 { font-size:var(--hk-fs-h3); font-weight:400; letter-spacing:0; }

.hk-lede { font-size:var(--hk-fs-lead); line-height:1.75; color:var(--hk-text-muted);
  font-weight:400; text-wrap:pretty; }
em,.hk-accent { font-style:normal; color:var(--hk-accent); }

.hk-prose h2 { margin-top:2em; } .hk-prose h3 { margin-top:1.6em; }
.hk-prose ul { margin:0 0 1.4em; }
.hk-prose ul li { position:relative; padding-left:1.5em; margin-bottom:.5em; color:var(--hk-text-muted); }
.hk-prose ul li::before { content:""; position:absolute; left:0; top:.78em; width:8px; height:1px; background:var(--hk-accent); }
.hk-prose a { color:var(--hk-gold); border-bottom:1px solid currentColor; }

/* ---------- 6. Lockup -------------------------------------------------------- */
/* One idea: the "I" of HAKIRO is a gold rule; the same rule is the crossbar of
   the square H used where a wordmark would be too small to read. */

.hk-lock { --lock-size:22px; display:inline-flex; align-items:center;
  gap:calc(var(--lock-size) * .62); line-height:1; color:var(--wm-ink,var(--hk-ink)); }

.hk-lock__mark { position:relative; flex:none;
  width:calc(var(--lock-size) * 1.62); height:calc(var(--lock-size) * 1.62);
  background:var(--wm-mark-bg,var(--hk-ink)); }
.hk-lock__mark::before,.hk-lock__mark::after {
  content:""; position:absolute; top:27%; height:46%;
  width:max(2px,calc(var(--lock-size) * .093)); background:var(--wm-mark-stem,#fff); }
.hk-lock__mark::before { left:30%; } .hk-lock__mark::after { right:30%; }
.hk-lock__bar { position:absolute; left:30%; right:30%; top:50%;
  height:max(2px,calc(var(--lock-size) * .093)); transform:translateY(-50%);
  background:var(--wm-accent,var(--hk-gold-lt)); }

/* inline-block so the word block shrink-wraps to the width of HAKIRO — that
   width is then what the descriptor justifies itself across. */
.hk-lock__word { display:inline-block; }
.hk-lock__name { display:flex; align-items:center;
  font-family:var(--hk-font-display); font-weight:200; font-size:var(--lock-size);
  letter-spacing:var(--hk-track-wordmark); margin-right:calc(var(--hk-track-wordmark) * -1);
  white-space:nowrap; color:var(--wm-ink,var(--hk-ink)); }
.hk-lock__rule { display:inline-block; flex:none;
  width:max(2px,calc(var(--lock-size) * .075)); height:.82em;
  background:var(--wm-accent,var(--hk-gold)); margin:0 .30em 0 .04em; }

/* SPORTS GROUP spans exactly the width of HAKIRO. Each letter is a flex item
   and space-between distributes the slack, so the two lines align on both
   edges at any size — which letter-spacing can only ever approximate. */
.hk-lock__desc { display:flex; justify-content:space-between; width:100%;
  font-family:var(--hk-font-display); font-weight:400;
  font-size:calc(var(--lock-size) * .365); letter-spacing:0;
  margin-top:calc(var(--lock-size) * .40);
  text-transform:uppercase; white-space:nowrap; color:var(--wm-desc,var(--hk-mute)); }
.hk-lock__desc i { font-style:normal; }
.hk-lock__desc i.is-space { width:calc(var(--lock-size) * .22); }

.hk-lock--stacked { flex-direction:column; gap:calc(var(--lock-size) * .72); text-align:center; }
.hk-lock--stacked .hk-lock__name { justify-content:center; margin-right:0; }
.hk-lock--stacked .hk-lock__desc { margin-right:0; text-indent:var(--hk-track-desc); }
.hk-lock--word .hk-lock__mark { display:none; }
.hk-lock--mark .hk-lock__word { display:none; }

.hk-lock.s-ink { --wm-ink:var(--hk-ink); --wm-desc:var(--hk-mute); --wm-accent:var(--hk-gold);
  --wm-mark-bg:var(--hk-ink); --wm-mark-stem:#fff; }
/* .72 not .55 — the descriptor is small, letterspaced and reversed out, which
   is already the hardest thing on the page to read. */
.hk-lock.s-light { --wm-ink:#fff; --wm-desc:rgba(255,255,255,.88); --wm-accent:var(--hk-gold-lt);
  --wm-mark-bg:transparent; --wm-mark-stem:#fff; }
.hk-lock.s-champagne { --wm-ink:#fff; --wm-desc:rgba(232,215,174,.6); --wm-accent:#E8D7AE;
  --wm-mark-bg:transparent; --wm-mark-stem:#fff; }
.hk-lock.s-champagne .hk-lock__name { letter-spacing:.44em; margin-right:-.44em; }

/* ---------- 7. Buttons -------------------------------------------------------- */

.hk-btn {
  display:inline-flex; align-items:center; gap:.8em;
  padding:1.05em 2.2em; border:1px solid var(--hk-ink); background:var(--hk-ink); color:#fff;
  font-family:var(--hk-font-display); font-weight:400; font-size:.72rem;
  letter-spacing:var(--hk-track-btn); text-transform:uppercase;
  border-radius:var(--hk-r-sm); cursor:pointer;
  transition:background-color var(--hk-dur) var(--hk-ease),
             color var(--hk-dur) var(--hk-ease),
             border-color var(--hk-dur) var(--hk-ease),
             transform var(--hk-dur-fast) var(--hk-ease);
}
.hk-btn:hover,.hk-btn:focus-visible { background:var(--hk-gold); border-color:var(--hk-gold); color:#fff; }
.hk-btn:active { transform:translateY(1px); }

.hk-btn--ghost { background:transparent; color:var(--hk-ink); border-color:var(--hk-line); }
.hk-btn--ghost:hover { background:var(--hk-ink); border-color:var(--hk-ink); color:#fff; }

/* On dark grounds the solid button inverts. The foreground is a LITERAL dark
   value, not var(--hk-ink) — a context that redefines ink would otherwise
   render white text on a white button. */
.hk-dark .hk-btn,.hk-concierge .hk-btn,.hk-hero .hk-btn,
.hk-cx-hero .hk-btn,.hk-invite .hk-btn,.hk-footer .hk-btn {
  background:#fff; border-color:#fff; color:#12141A;
}
.hk-dark .hk-btn:hover,.hk-concierge .hk-btn:hover,.hk-hero .hk-btn:hover,
.hk-cx-hero .hk-btn:hover,.hk-invite .hk-btn:hover,.hk-footer .hk-btn:hover {
  background:var(--hk-gold-lt); border-color:var(--hk-gold-lt); color:#12141A;
}
.hk-dark .hk-btn--ghost,.hk-concierge .hk-btn--ghost,.hk-hero .hk-btn--ghost,
.hk-cx-hero .hk-btn--ghost,.hk-invite .hk-btn--ghost {
  background:transparent; color:#fff; border-color:rgba(255,255,255,.4);
}
.hk-dark .hk-btn--ghost:hover,.hk-concierge .hk-btn--ghost:hover,.hk-hero .hk-btn--ghost:hover,
.hk-cx-hero .hk-btn--ghost:hover,.hk-invite .hk-btn--ghost:hover {
  background:#fff; color:#12141A; border-color:#fff;
}

.hk-btn__arrow { transition:transform var(--hk-dur) var(--hk-ease); }
.hk-btn:hover .hk-btn__arrow { transform:translateX(4px); }

.hk-link {
  display:inline-flex; align-items:center; gap:.6em; position:relative;
  font-family:var(--hk-font-display); font-weight:400; font-size:.72rem;
  letter-spacing:var(--hk-track-btn); text-transform:uppercase;
  color:var(--hk-accent); padding-bottom:.4em;
}
.hk-link::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--hk-dur) var(--hk-ease); }
.hk-link:hover::after,.hk-link:focus-visible::after { transform:scaleX(1); }

/* ---------- 8. Header --------------------------------------------------------- */

.hk-header {
  position:fixed; inset:0 0 auto; z-index:100; height:var(--hk-header-h);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:height var(--hk-dur) var(--hk-ease),background-color var(--hk-dur) var(--hk-ease),
             border-color var(--hk-dur) var(--hk-ease);
}
/* Over the video hero the header is transparent with white type; once past it,
   it becomes a solid white bar with ink type. */
.hk-header { --wm-ink:#fff; --wm-desc:rgba(255,255,255,.55); --wm-accent:var(--hk-gold-lt);
  --nav-ink:rgba(255,255,255,.78); --nav-ink-hover:#fff; }
/* Literal values, not tokens: the header sits inside <body>, so on a page that
   redefines the palette it would otherwise inherit white type onto its own
   white background the moment it sticks. */
.hk-header.is-stuck {
  height:64px; background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:#E4E6EA;
  --wm-ink:#12141A; --wm-desc:#4A505C; --wm-accent:#A16207;
  --wm-mark-bg:#12141A; --wm-mark-stem:#FFFFFF;
  --nav-ink:#3A3F49; --nav-ink-hover:#12141A;
  --hk-accent:#A16207;
}
.hk-header.is-stuck .hk-burger { color:#12141A; }
/* No width:100% here — this element also carries .hk-wrap, and a later
   width declaration overrides the wrapper's max-width and auto margins,
   which pushes the wordmark hard against the left edge of the viewport. */
.hk-header__inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.hk-header .hk-lock { --lock-size:20px; }

.hk-nav { display:flex; align-items:center; }
.hk-nav__list { display:flex; align-items:center; gap:2.6rem; list-style:none; margin:0; padding:0; }
.hk-nav__list > li { list-style:none; }
.hk-nav a {
  position:relative; font-family:var(--hk-font-display); font-weight:400; font-size:.7rem;
  letter-spacing:var(--hk-track-btn); text-transform:uppercase; color:var(--nav-ink);
  white-space:nowrap; padding:.4em 0; transition:color var(--hk-dur-fast) var(--hk-ease);
}
.hk-nav a::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--hk-accent); transform:scaleX(0); transform-origin:right;
  transition:transform var(--hk-dur) var(--hk-ease); }
.hk-nav a:hover,.hk-nav a:focus-visible,.hk-nav .current-menu-item > a { color:var(--nav-ink-hover); }
.hk-nav a:hover::after,.hk-nav .current-menu-item > a::after { transform:scaleX(1); transform-origin:left; }

.hk-header__cta { display:flex; align-items:center; gap:1.2rem; }
.hk-header__cta .hk-btn { padding:.85em 1.7em; font-size:.66rem;
  background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
.hk-header__cta .hk-btn:hover { background:#fff; border-color:#fff; color:var(--hk-ink); }
.hk-header.is-stuck .hk-header__cta .hk-btn { background:var(--hk-ink); border-color:var(--hk-ink); color:#fff; }
.hk-header.is-stuck .hk-header__cta .hk-btn:hover { background:var(--hk-gold); border-color:var(--hk-gold); }

.hk-progress { position:fixed; inset:0 0 auto; height:2px; z-index:101;
  background:var(--hk-gold); transform:scaleX(var(--p,0)); transform-origin:left; will-change:transform; }

/* All three bars share one centre and are offset from it, rather than being
   spaced by margins in flow. The flow version stacked them in a grid whose auto
   rows stretched to fill the 44px button — so the bars sat 9.2px apart, not the
   6px the margin asked for, and the ±7.5px close transform stopped short of
   converging them. The result was a chevron, which reads as "next", not "close". */
.hk-burger { display:none; position:relative; width:44px; height:44px; border:0;
  background:none; cursor:pointer; padding:0; color:currentColor; }
.hk-header .hk-burger { color:#fff; }
.hk-header.is-stuck .hk-burger { color:var(--hk-ink); }
.hk-burger span { position:absolute; top:50%; left:50%; width:22px; height:1.5px;
  margin:-.75px 0 0 -11px; background:currentColor;
  transition:transform var(--hk-dur) var(--hk-ease),opacity var(--hk-dur-fast) var(--hk-ease); }
.hk-burger span:nth-child(1) { transform:translateY(-7.5px); }
.hk-burger span:nth-child(3) { transform:translateY(7.5px); }
.hk-burger[aria-expanded="true"] span:nth-child(1) { transform:rotate(45deg); }
.hk-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.hk-burger[aria-expanded="true"] span:nth-child(3) { transform:rotate(-45deg); }

.hk-drawer { position:fixed; inset:0; z-index:99; background:var(--hk-ink);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.4rem;
  opacity:0; visibility:hidden; transition:opacity var(--hk-dur) var(--hk-ease),visibility var(--hk-dur); }
.hk-drawer.is-open { opacity:1; visibility:visible; }
.hk-drawer a { font-family:var(--hk-font-display); font-weight:200;
  font-size:clamp(1.5rem,6vw,2.2rem); letter-spacing:.06em; color:#fff;
  opacity:0; transform:translateY(14px);
  transition:opacity var(--hk-dur) var(--hk-ease) calc(var(--i,0) * 55ms),
             transform var(--hk-dur) var(--hk-ease) calc(var(--i,0) * 55ms); }
.hk-drawer.is-open a { opacity:1; transform:none; }

/* ---------- 9. Hero ----------------------------------------------------------- */

.hk-hero {
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:calc(var(--hk-header-h) + 4rem) 0 var(--hk-sp-6);
  overflow:hidden; background:var(--hk-ink); color:#fff;
  --hk-accent:var(--hk-gold-lt);
}
.hk-hero__media { position:absolute; inset:0; overflow:hidden; }
.hk-hero__media video,.hk-hero__media img {
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  /* Only a light knock-back. The scrim below does the legibility work, so the
     image itself does not need to be dimmed into a black rectangle. */
  filter:contrast(1.04) brightness(.82);
}
/* Directional scrim: heavy behind the headline on the left, clearing almost
   completely on the right so the footage is actually visible. Plus a short
   wash top and bottom for the header and the scroll cue. */
.hk-hero__media::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(18,20,26,.92) 0%,rgba(18,20,26,.74) 30%,
                             rgba(18,20,26,.34) 58%,rgba(18,20,26,.06) 85%,rgba(18,20,26,0) 100%),
             linear-gradient(0deg,rgba(18,20,26,.5) 0%,rgba(18,20,26,0) 26%,
                             rgba(18,20,26,0) 76%,rgba(18,20,26,.45) 100%);
}
.hk-hero__inner { position:relative; z-index:2; }

.hk-hero__title {
  font-family:var(--hk-font-display); font-weight:200; font-size:var(--hk-fs-hero);
  line-height:1.05; letter-spacing:var(--hk-track-display);
  margin:0 0 1.6rem; max-width:19ch; color:#fff;
}
.hk-hero__lede { max-width:56ch; margin-bottom:2.6rem; color:#C6CAD2; }
.hk-hero__actions { display:flex; flex-wrap:wrap; gap:1rem 1.4rem; align-items:center; }

/* Typewriter line — the device from the reference site. */
/* The typewriter must never change the height of its own line, or every
   element below it jumps each time a phrase is deleted. A fixed two-line
   box holds the space whatever is being typed. */
.hk-type { display:flex; align-items:flex-start; gap:.12em;
  min-height:2.6em; max-width:22ch;
  font-family:var(--hk-font-display); font-weight:300;
  font-size:clamp(1.1rem,.9rem + 1.1vw,1.9rem); letter-spacing:.02em;
  color:var(--hk-gold-lt); margin:0 0 1.4rem; }
/* The caret is rose, not gold. It is the first pink on the page, it moves, and
   it is about two pixels wide — which is the whole brief for the colour:
   present enough to register, quiet enough never to be the point. */
.hk-type__caret { display:inline-block; width:2px; height:1.05em; background:var(--hk-rose-lt);
  animation:hk-blink 1.05s steps(1) infinite; }
@keyframes hk-blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }

.hk-hero__meta { position:relative; z-index:2; margin-top:auto; padding-top:3rem;
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  font-family:var(--hk-font-display); font-size:.66rem; letter-spacing:var(--hk-track-eyebrow);
  text-transform:uppercase; color:rgba(255,255,255,.5); }
.hk-scrollcue { display:inline-flex; align-items:center; gap:.8em; }
.hk-scrollcue i { display:block; width:1px; height:34px; background:rgba(255,255,255,.5);
  animation:hk-cue 2.4s var(--hk-ease) infinite; }
@keyframes hk-cue { 0%,100% { transform:scaleY(.3); opacity:.35; } 50% { transform:scaleY(1); opacity:1; } }

/* Per-word hero reveal. Gated behind .js so the headline is never left
   invisible when scripting is off. */
.hk-split__word { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; }
.hk-split__word > span { display:inline-block; }
.js .hk-split__word > span { transform:translateY(105%);
  transition:transform .9s var(--hk-ease) calc(var(--i) * 60ms); }
.js .is-ready .hk-split__word > span { transform:none; }
.hk-split__word.is-accent > span { color:var(--hk-gold-lt); }

/* ---------- 9b. Full-bleed photographic band ------------------------------------ */

.hk-band { position:relative; margin:0; overflow:hidden; height:clamp(280px,38vw,460px); }
.hk-band__img { width:100%; height:100%; object-fit:cover; object-position:center 45%;
  filter:contrast(1.02) brightness(.94); }
/* Only enough darkening at the very bottom to carry the caption. */
.hk-band::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(18,20,26,.72) 0%,rgba(18,20,26,.12) 26%,rgba(18,20,26,0) 50%); }
.hk-band__caption { position:absolute; left:0; right:0; bottom:1.8rem; z-index:2;
  width:min(100% - 2.5rem,var(--hk-maxw)); margin-inline:auto;
  font-family:var(--hk-font-display); font-weight:400; font-size:.66rem;
  letter-spacing:var(--hk-track-eyebrow); text-transform:uppercase; color:#fff;
  display:flex; align-items:center; gap:1em; }
.hk-band__caption::before { content:""; width:26px; height:1px; background:var(--hk-gold-lt); flex:none; }

/* No band photograph supplied — a hairline rather than a grey box. */
.hk-band-rule { padding:var(--hk-sp-5) 0; }
.hk-band-rule span { display:block; width:min(100% - 2.5rem,var(--hk-maxw));
  margin-inline:auto; height:1px; background:var(--hk-line); }

/* ---------- 10. Marquee -------------------------------------------------------- */

.hk-marquee { position:relative; overflow:hidden; padding:1.5rem 0;
  border-bottom:1px solid var(--hk-line); background:var(--hk-paper);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.hk-marquee__track { display:flex; width:max-content; animation:hk-slide 52s linear infinite; }
.hk-marquee:hover .hk-marquee__track { animation-play-state:paused; }
.hk-marquee__group { display:flex; align-items:center; flex:none; }
.hk-marquee__group li { display:flex; align-items:center; gap:2.6rem; padding-right:2.6rem;
  font-family:var(--hk-font-display); font-weight:400; font-size:.7rem;
  letter-spacing:var(--hk-track-eyebrow); text-transform:uppercase;
  color:var(--hk-mute); white-space:nowrap; }
.hk-marquee__group li::after { content:""; width:3px; height:3px; background:var(--hk-gold); }
@keyframes hk-slide { to { transform:translateX(-50%); } }

/* ---------- 11. Pillars --------------------------------------------------------- */

/* Six full-bleed banners: photograph across the entire width, content in a
   panel over it, alternating side down the page. Nothing to click — it all
   reads as you scroll. */
/* Gap between banners: without it six different photographs edge to edge
   read as one continuous image. */
.hk-pillars { display:flex; flex-direction:column; gap:14px; background:var(--hk-paper); }

.hk-pillar { position:relative; display:flex; align-items:center;
  min-height:clamp(420px,52vw,600px); overflow:hidden; background:var(--hk-ink); }

.hk-pillar__media { position:absolute; inset:0; }
.hk-pillar__media img { width:100%; height:100%; object-fit:cover; object-position:center 45%;
  filter:contrast(1.04) brightness(.9);
  /* Slow drift, plus a few pixels of pointer parallax written by the script.
     Both are disabled under prefers-reduced-motion. */
  transform:scale(1.08) translate(var(--mx,0px),var(--my,0px));
  transition:transform 1.2s var(--hk-ease);
  animation:hk-kenburns 22s ease-in-out infinite alternate; }
@keyframes hk-kenburns { from { scale:1; } to { scale:1.07; } }
/* Scrim weighted to whichever side the panel sits on. */
.hk-pillar__media::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(18,20,26,.9) 0%,rgba(18,20,26,.62) 42%,
                             rgba(18,20,26,.15) 72%,rgba(18,20,26,0) 100%); }
.hk-pillar--flip .hk-pillar__media::after {
  background:linear-gradient(270deg,rgba(18,20,26,.9) 0%,rgba(18,20,26,.62) 42%,
                             rgba(18,20,26,.15) 72%,rgba(18,20,26,0) 100%); }

.hk-pillar__grid { position:relative; z-index:2; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:var(--hk-sp-5) 0; }
.hk-pillar--flip .hk-pillar__grid { direction:rtl; }
.hk-pillar--flip .hk-pillar__panel { direction:ltr; }

.hk-pillar__panel { color:#fff; max-width:52ch; }

.hk-pillar__num { display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--hk-font-display); font-weight:400; font-size:.7rem;
  letter-spacing:var(--hk-track-eyebrow); text-transform:uppercase;
  color:var(--hk-gold-lt); margin-bottom:1.4rem; }
.hk-pillar__num::before { content:""; width:22px; height:1px; background:currentColor; }
.hk-pillar__title { font-family:var(--hk-font-display); font-weight:200;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.5rem); letter-spacing:-.015em;
  line-height:1.14; margin:0 0 1rem; color:#fff; }
.hk-pillar__blurb { color:#D5D9E0; font-size:.98rem; line-height:1.75; margin-bottom:1.6rem; }

/* A ruled list, not pills. Floating capsules over a photograph looked like
   tags dropped on top rather than part of the design. */
.hk-pillar__items { display:grid; gap:0; border-top:1px solid rgba(255,255,255,.22);
  max-width:44ch; }
.hk-pillar__items li { font-size:.82rem; color:#E4E7EC; padding:.62rem 0;
  border-bottom:1px solid rgba(255,255,255,.14); display:flex;
  align-items:baseline; gap:.9em; }
.hk-pillar__items li::before { content:""; width:5px; height:1px;
  background:var(--hk-gold-lt); flex:none; transform:translateY(-.32em); }

.hk-pillar__status { display:inline-block; font-family:var(--hk-font-display);
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.4em .85em; margin-bottom:1rem; color:var(--hk-rose-lt);
  border:1px solid var(--hk-rose-lt); border-radius:var(--hk-r-pill); }

/* The concierge banner leans champagne rather than gold, matching its page. */
.hk-pillar--concierge .hk-pillar__num { color:#E8D7AE; }
.hk-pillar--concierge .hk-link { color:#E8D7AE; }

@media (max-width:860px) {
  .hk-pillar { min-height:auto; }
  .hk-pillar__grid { grid-template-columns:1fr; padding:var(--hk-sp-5) 0; direction:ltr; }
  .hk-pillar--flip .hk-pillar__grid { direction:ltr; }
  /* One-column: the panel spans the width, so the scrim must too. */
  .hk-pillar__media::after,
  .hk-pillar--flip .hk-pillar__media::after {
    background:linear-gradient(0deg,rgba(18,20,26,.94) 0%,rgba(18,20,26,.78) 55%,rgba(18,20,26,.6) 100%); }
  .hk-pillar__panel { max-width:none; }
}

/* ---------- 12. Advisory ---------------------------------------------------------- */

.hk-advisory { display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--hk-line); border:1px solid var(--hk-line); }
.hk-advisory__item { background:var(--hk-shell); padding:2.4rem 2rem;
  transition:background-color var(--hk-dur) var(--hk-ease); }
.hk-advisory__item:hover { background:var(--hk-paper); }
.hk-advisory__item h3 { font-family:var(--hk-font-display); font-weight:400; font-size:1.02rem;
  margin-bottom:.55rem; color:var(--hk-ink); }
.hk-advisory__item p { font-size:.88rem; color:var(--hk-mute); margin:0; }

/* ---------- 13. Difference --------------------------------------------------------- */

/* min(300px,100%) not a bare 300px: a bare minimum is a floor the track cannot
   go under, so below a 300px container the grid overflowed the page and gave
   the whole site a horizontal scroll at 320px. */
.hk-diff { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:1px; background:var(--hk-line); border:1px solid var(--hk-line); }
.hk-diff__item { background:var(--hk-paper); padding:2.6rem 2.2rem; }
.hk-diff__item h3 { font-family:var(--hk-font-display); font-weight:400; font-size:1.08rem;
  margin-bottom:.7rem; color:var(--hk-ink); }
.hk-diff__item h3::before { content:""; display:block; width:26px; height:2px;
  background:var(--hk-gold); margin-bottom:1.1rem; }
.hk-diff__item p { color:var(--hk-ink-2); font-size:.92rem; margin:0; }

/* ---------- 14. About -------------------------------------------------------------- */

.hk-about { display:grid; grid-template-columns:0.85fr 1fr; gap:var(--hk-sp-6); align-items:start; }
/* max-height matters: once the layout collapses to one column the 4:5 ratio
   at full width produces a ~1000px tall empty frame, which reads as a broken
   image rather than a portrait waiting to be filled. */
.hk-about__portrait { position:relative; aspect-ratio:4/5; max-height:620px; overflow:hidden;
  background:var(--hk-shell); border:1px solid var(--hk-line); display:grid; place-items:center; }
.hk-about__portrait img { width:100%; height:100%; object-fit:cover; object-position:center 22%; }
/* No opacity on the placeholder — dimming the whole lockup turned the black
   monogram a muddy grey. The mark stays solid and is simply small. */
.hk-about__placeholder { display:grid; place-items:center; }
.hk-about__caption { position:absolute; left:0; right:0; bottom:0; padding:1.2rem 1.4rem;
  background:var(--hk-ink); color:#fff; font-family:var(--hk-font-display);
  font-size:.62rem; letter-spacing:var(--hk-track-eyebrow); text-transform:uppercase;
  /* Rose keyline directly under the founder's name. */
  border-top:2px solid var(--hk-rose); }

/* The founder section is the one place rose leads instead of gold — the colour
   marks where she is, rather than being scattered for decoration. */
#about .hk-eyebrow { color:var(--hk-rose); }

.hk-founded {
  display:inline-flex; align-items:center; gap:.85em; margin:0 0 1.6rem;
  font-family:var(--hk-font-display); font-weight:400; font-size:.68rem;
  letter-spacing:var(--hk-track-eyebrow); text-transform:uppercase;
  color:var(--hk-rose);
}
.hk-founded::before { content:""; width:20px; height:2px; background:var(--hk-rose); flex:none; }
.hk-footer .hk-founded { color:var(--hk-rose-lt); margin:1.4rem 0 0; }
.hk-footer .hk-founded::before { background:var(--hk-rose-lt); }

.hk-creds { margin-top:2rem; display:grid; gap:0; border-top:1px solid var(--hk-line); }
.hk-creds li { padding:.95rem 0; border-bottom:1px solid var(--hk-line);
  font-size:.9rem; color:var(--hk-ink-2); }

/* No boxes. Four figures on one baseline, separated by hairlines and a lot of
   air — the grid of bordered cells was the boxy thing that flattened them. */
.hk-stats { display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:var(--hk-sp-6); border-top:1px solid var(--hk-line); padding-top:var(--hk-sp-4); }
.hk-stat { position:relative; padding:0 2rem; }
.hk-stat:first-child { padding-left:0; }
.hk-stat + .hk-stat::before { content:""; position:absolute; left:0; top:.35rem; bottom:.35rem;
  width:1px; background:var(--hk-line); }
.hk-stat__value { font-family:var(--hk-font-display); font-weight:200;
  font-size:clamp(3rem,6vw,4.6rem); line-height:.95; color:var(--hk-ink);
  display:block; margin-bottom:.9rem; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
/* One hairline of rose per figure — the female-led signal, carried in colour
   rather than stated in words. */
.hk-stat__value::after { content:""; display:block; width:26px; height:2px;
  background:var(--hk-rose); margin-top:1.1rem; }
/* Wider measure and tighter tracking than the eyebrow default — at .34em and
   16ch these labels broke into four ragged lines. */
.hk-stat__label { font-family:var(--hk-font-display); font-weight:400; font-size:.68rem;
  letter-spacing:.14em; line-height:1.6; text-transform:uppercase; color:var(--hk-mute);
  display:block; max-width:24ch; }

@media (max-width:860px) {
  .hk-stats { grid-template-columns:repeat(2,1fr); gap:2.4rem 0; }
  .hk-stat:nth-child(3) { padding-left:0; }
  .hk-stat:nth-child(3)::before { display:none; }
}
/* Stays 2×2 rather than collapsing to one column. The label is capped at 24ch
   (~165px) regardless, which is exactly the width of a half-column here — so a
   single column bought no extra room for the label and cost 230px of scroll to
   deliver four single-digit figures. Dividers go; the grid carries the grouping. */
@media (max-width:480px) {
  .hk-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.2rem 1.25rem; }
  .hk-stat { padding-left:0; }
  .hk-stat::before { display:none; }
}

/* ---------- 15. Concierge invite ---------------------------------------------------- */

/* The black runs edge to edge; the content stays inside the grid. Previously
   the whole block was a floating dark rectangle inside a white section, which
   read as a stray box rather than a band. */
.hk-invite-band { background:var(--hk-ink); color:#fff; padding:var(--hk-sp-7) 0;
  --hk-accent:var(--hk-gold-lt); }
.hk-invite { position:relative; display:grid; grid-template-columns:1.25fr 1fr;
  gap:var(--hk-sp-6); align-items:center; }
.hk-invite h2 { color:#fff; font-weight:200; letter-spacing:.02em; }
.hk-invite .hk-eyebrow { color:var(--hk-gold-lt); }
.hk-invite p { color:#C6CAD2; }
.hk-invite__list { display:grid; gap:0; }
.hk-invite__list li { font-family:var(--hk-font-display); font-weight:300; font-size:1rem;
  letter-spacing:.02em; color:rgba(255,255,255,.82);
  padding:.9rem 0; border-bottom:1px solid rgba(255,255,255,.14); }

/* ---------- 16. Contact ------------------------------------------------------------- */

.hk-contact { display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--hk-sp-6); align-items:start; }
.hk-contact__details { display:grid; gap:0; margin-top:2.4rem; border-top:1px solid var(--hk-line); }
.hk-contact__row { display:grid; gap:.25rem; padding:1.1rem 0; border-bottom:1px solid var(--hk-line); }
.hk-contact__row dt { font-family:var(--hk-font-display); font-size:.62rem;
  letter-spacing:var(--hk-track-eyebrow); text-transform:uppercase; color:var(--hk-mute); }
.hk-contact__row dd { margin:0; font-size:1rem; color:var(--hk-ink); }
.hk-contact__row a:hover { color:var(--hk-gold); }

.hk-form { display:grid; gap:1.4rem; }
.hk-form__row { display:grid; gap:1.4rem; grid-template-columns:1fr 1fr; }
.hk-field { display:grid; }
.hk-field label { font-family:var(--hk-font-display); font-size:.62rem;
  letter-spacing:var(--hk-track-eyebrow); text-transform:uppercase;
  color:var(--hk-mute); margin-bottom:.6rem; }
.hk-field input,.hk-field select,.hk-field textarea {
  width:100%; font:inherit; font-size:.95rem; color:var(--hk-ink);
  background:var(--hk-paper); border:1px solid var(--hk-line);
  border-radius:var(--hk-r-sm); padding:.95em 1em;
  transition:border-color var(--hk-dur-fast) var(--hk-ease),box-shadow var(--hk-dur-fast) var(--hk-ease); }
.hk-field textarea { resize:vertical; min-height:150px; }
.hk-field select { appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--hk-ink) 50%),
                   linear-gradient(135deg,var(--hk-ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.hk-field input:focus,.hk-field select:focus,.hk-field textarea:focus {
  outline:none; border-color:var(--hk-ink); box-shadow:0 0 0 3px rgba(18,20,26,.07); }
.hk-field.has-error input,.hk-field.has-error textarea { border-color:var(--hk-rose); }
.hk-field__error { font-size:.78rem; color:var(--hk-rose); margin-top:.5rem; }

.hk-hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.hk-form__foot { display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; justify-content:space-between; }
.hk-form__note { font-size:.78rem; color:var(--hk-mute); max-width:42ch; }
.hk-form__status { padding:1.1em 1.3em; font-size:.9rem; border:1px solid transparent; display:none;
  border-radius:var(--hk-r-sm); }
.hk-form__status.is-visible { display:block; }
.hk-form__status.is-ok { background:var(--hk-gold-wash); border-color:var(--hk-gold); color:var(--hk-gold-deep); }
.hk-form__status.is-fail { background:var(--hk-rose-wash); border-color:var(--hk-rose); color:#8E2B4C; }
.hk-btn[aria-busy="true"] { pointer-events:none; opacity:.6; }

/* ---------- 17. Footer --------------------------------------------------------------- */

.hk-footer { background:var(--hk-ink); color:#fff; padding:var(--hk-sp-6) 0 2.4rem;
  --hk-accent:var(--hk-gold-lt); }
.hk-footer__top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--hk-sp-5); margin-bottom:var(--hk-sp-5); }
.hk-footer__blurb { color:var(--hk-mute-dark); font-size:.9rem; margin-top:1.8rem; max-width:38ch; }
.hk-footer h4 { font-family:var(--hk-font-display); font-weight:400; font-size:.62rem;
  letter-spacing:var(--hk-track-eyebrow); text-transform:uppercase;
  color:var(--hk-gold-lt); margin-bottom:1.3rem; }
.hk-footer__links { display:grid; gap:.75rem; }
.hk-footer__links a,.hk-footer__links li { font-size:.9rem; color:#D5D9E0;
  transition:color var(--hk-dur-fast) var(--hk-ease); }
/* The link text is 17px tall — under the 24px touch-target minimum. The padding
   grows the hit area to 29px and the equal negative margin takes it back out of
   the layout, so it fills the .75rem gap exactly: bigger target, nothing moves. */
.hk-footer__links a { display:block; padding:.375rem 0; margin:-.375rem 0; }
.hk-footer__links a:hover { color:#fff; }
.hk-footer__blurb { color:#B4BAC4; }
.hk-footer__bottom { border-top:1px solid rgba(255,255,255,.14); padding-top:2rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:.74rem; color:#A8AEB9; }
.hk-footer .hk-social a,.hk-footer .hk-social .is-placeholder {
  border-color:rgba(255,255,255,.28); color:#D5D9E0; }

.hk-social { display:flex; gap:.6rem; margin-top:1.8rem; }
.hk-social a,.hk-social .is-placeholder {
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid rgba(255,255,255,.2); color:#C6CAD2; border-radius:var(--hk-r-sm);
  transition:color var(--hk-dur) var(--hk-ease),border-color var(--hk-dur) var(--hk-ease),
             background-color var(--hk-dur) var(--hk-ease); }
.hk-social__icon { width:19px; height:19px; }
.hk-social a:hover,.hk-social a:focus-visible { background:#fff; border-color:#fff; color:var(--hk-ink); }
.hk-social .is-placeholder { opacity:.32; border-style:dashed; cursor:default; }

/* ---------- 18. Concierge page --------------------------------------------------------- */

.hk-cx-hero { position:relative; min-height:88svh; display:flex; align-items:center;
  padding:calc(var(--hk-header-h) + 5rem) 0 var(--hk-sp-6); overflow:hidden; text-align:center;
  background:#0B0C0F; color:#fff; }
/* The Concierge headline is centred, so the left-weighted hero scrim would
   put the darkness in the wrong place. Centre-weighted instead, and lighter —
   this page was the worst offender for looking like a black rectangle. */
.hk-cx-hero .hk-hero__media img { filter:contrast(1.03) brightness(.78); }
.hk-cx-hero .hk-hero__media::after {
  background:radial-gradient(75% 65% at 50% 50%,rgba(11,12,15,.86) 0%,
                             rgba(11,12,15,.62) 55%,rgba(11,12,15,.25) 100%),
             linear-gradient(0deg,rgba(11,12,15,.6) 0%,rgba(11,12,15,0) 32%,
                             rgba(11,12,15,0) 74%,rgba(11,12,15,.5) 100%);
}
.hk-cx-hero__inner { position:relative; z-index:2; margin-inline:auto; }
.hk-cx-hero h1 { font-family:var(--hk-font-display); font-weight:200;
  font-size:clamp(2.4rem,7vw,5rem); letter-spacing:.10em; line-height:1.1;
  color:#fff; margin-bottom:1.6rem; text-transform:uppercase; }
.hk-cx-hero .hk-lede { margin-inline:auto; max-width:52ch; color:#B9BDC6; }
.hk-cx-hero__rule { width:60px; height:2px; background:var(--hk-gold-lt); margin:2.2rem auto; }

.hk-cx-services { display:grid; gap:1px; background:var(--hk-border);
  border-block:1px solid var(--hk-border); }
.hk-cx-service { display:grid; grid-template-columns:80px 1fr 1.1fr; gap:2.4rem;
  align-items:baseline; padding:2.8rem 1rem; background:#0B0C0F;
  transition:background-color var(--hk-dur) var(--hk-ease); }
.hk-cx-service:hover { background:#12141A; }
.hk-cx-service__num { font-family:var(--hk-font-display); font-weight:200; font-size:.85rem;
  letter-spacing:.2em; color:var(--hk-gold-lt); }
.hk-cx-service h3 { font-family:var(--hk-font-display); font-weight:300;
  font-size:clamp(1.2rem,2.2vw,1.6rem); letter-spacing:.02em; margin:0; color:#fff; }
.hk-cx-service p { color:#B9BDC6; margin:0; font-size:.92rem; }

.hk-cx-note { text-align:center; max-width:56ch; margin-inline:auto;
  font-family:var(--hk-font-display); font-weight:200;
  font-size:clamp(1.25rem,2.4vw,1.8rem); line-height:1.55; color:#fff; }

/* ---------- 19. Motion ------------------------------------------------------------------ */

.js .hk-reveal { opacity:0; transform:translateY(20px); }
.js .hk-reveal.is-in { opacity:1; transform:none;
  transition:opacity .7s var(--hk-ease) var(--d,0ms),transform .7s var(--hk-ease) var(--d,0ms); }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js .hk-reveal { opacity:1; transform:none; }
  .hk-marquee__track { animation:none; }
  .hk-type__caret { animation:none; opacity:1; }
}

/* ---------- 20. Responsive --------------------------------------------------------------- */

@media (max-width:1080px) {
  .hk-about,.hk-contact { grid-template-columns:1fr; gap:var(--hk-sp-5); }
  .hk-invite { grid-template-columns:1fr; }
  .hk-footer__top { grid-template-columns:1fr 1fr; }
  .hk-advisory { grid-template-columns:repeat(2,1fr); }
  .hk-cx-service { grid-template-columns:60px 1fr; }
  .hk-cx-service p { grid-column:2; }
}

@media (max-width:860px) {
  :root { --hk-sp-7:5rem; --hk-sp-6:3.5rem; --hk-header-h:64px; }
  .hk-nav,.hk-nav__list,.hk-header__cta .hk-btn { display:none; }
  .hk-burger { display:block; }
  .hk-hero { min-height:92svh; }
  .hk-hero__meta { flex-direction:column; align-items:flex-start; gap:1rem; }
  .hk-form__row { grid-template-columns:1fr; }
  .hk-footer__top { grid-template-columns:1fr; gap:var(--hk-sp-4); }
  /* 16px is a hard floor, not a preference: iOS Safari zooms the viewport when
     a field smaller than that takes focus, and never zooms back out. The user
     is left pinching their way around a form they were halfway through. */
  .hk-field input,.hk-field select,.hk-field textarea { font-size:1rem; }
  /* The eyebrow-sized button label is right for the brand but leaves the hit
     area at 43px — a pixel under every touch-target minimum there is. */
  .hk-btn { min-height:48px; }
}

@media (max-width:620px) {
  .hk-advisory { grid-template-columns:1fr; }
}

@media (max-width:520px) {
  .hk-wrap { width:min(100% - 1.75rem,var(--hk-maxw)); }
  .hk-pillar { padding:2.2rem 1.5rem; }
  .hk-pillar__status { position:static; display:inline-block; margin-bottom:1rem; }
  .hk-cx-service { grid-template-columns:1fr; gap:1rem; padding:2.2rem .5rem; }
}

@media print {
  .hk-header,.hk-progress,.hk-drawer,.hk-marquee,.hk-hero__media { display:none !important; }
  body { background:#fff; color:#000; }
}