/*
Theme Name: Harvestman MM2H
Theme URI: https://mm2hharvestman.com/
Description: Child theme for Harvestman (MM2H) Sdn. Bhd. Design tokens and reusable components for the MM2H landing page. Built on the GreenShift theme with GreenShift blocks.
Author: Total Web Solutions
Author URI: https://totalwebsolutions.co/
Template: greenshift
Version: 1.1.0
Requires at least: 6.9
Tested up to: 7.1
License: GNU General Public License v2 or later
Text Domain: harvestman
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  --hm-black: #050505;
  --hm-charcoal: #171717;

  --hm-gold: #F2C614;
  --hm-antique-gold: #99742E;
  --hm-champagne: #BBA462;
  --hm-pale-gold: #E3D99E;

  --hm-ivory: #F8F6F0;
  --hm-warm: #F2EEE5;

  --hm-white: #FFFFFF;

  --hm-text: #171717;
  --hm-muted: #6B665D;
  --hm-border: #DDD7C9;

  --hm-success: #28755B;

  --hm-radius-sm: 8px;
  --hm-radius-md: 14px;
  --hm-radius-lg: 22px;

  --hm-container: 1240px;
  --hm-gutter: clamp(20px, 4vw, 48px);
  --hm-section-space: clamp(72px, 8vw, 112px);

  --hm-font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hm-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* Multilingual fallbacks (prepared, not yet active) */
  --hm-font-sc: "Manrope", "Noto Sans SC", system-ui, sans-serif;
  --hm-font-tc: "Manrope", "Noto Sans TC", system-ui, sans-serif;
  --hm-font-kr: "Manrope", "Noto Sans KR", system-ui, sans-serif;

  --hm-ease: cubic-bezier(.22,.61,.36,1);
  --hm-dur-ui: 200ms;
  --hm-dur-reveal: 640ms;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
.hm-page {
  font-family: var(--hm-font);
  color: var(--hm-text);
  background: var(--hm-ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hm-page *,
.hm-page *::before,
.hm-page *::after { box-sizing: border-box; }

.hm-page p,
.hm-page li { line-height: 1.65; }

.hm-page img { max-width: 100%; height: auto; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.hm-container {
  width: 100%;
  max-width: var(--hm-container);
  margin-inline: auto;
  padding-inline: var(--hm-gutter);
}

.hm-section {
  padding-block: var(--hm-section-space);
  background: var(--hm-ivory);
}
.hm-section--warm { background: var(--hm-warm); }
.hm-section--white { background: var(--hm-white); }

.hm-section-dark {
  padding-block: var(--hm-section-space);
  background: var(--hm-black);
  color: var(--hm-ivory);
}
.hm-section-dark p { color: #C9C4B9; }
.hm-section-dark .hm-eyebrow { color: var(--hm-champagne); }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
.hm-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hm-antique-gold);
  margin: 0 0 14px;
}

.hm-heading-xl {
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 20px;
}
.hm-heading-lg {
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 700;
  margin: 0 0 18px;
}
.hm-heading-md {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 700;
  margin: 0 0 12px;
}
.hm-body-lg {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
  color: var(--hm-muted);
  margin: 0 0 16px;
}
.hm-section-dark .hm-body-lg { color: #C9C4B9; }
.hm-small { font-size: 14px; line-height: 1.55; color: var(--hm-muted); }

.hm-quote {
  font-family: var(--hm-font-serif);
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.25;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.01em;
}

.hm-lede { max-width: 62ch; }

/* ==========================================================================
   5. GOLD ARC MOTIF  (CSS-only, no raster)
   ========================================================================== */
.hm-gold-arc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--hm-antique-gold);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
  pointer-events: none;
  opacity: .55;
}
.hm-gold-arc--hero {
  width: min(780px, 92vw);
  aspect-ratio: 1;
  border-width: 1.5px;
  border-color: var(--hm-antique-gold) var(--hm-antique-gold) transparent transparent;
  opacity: .38;
}
.hm-gold-arc--frame {
  inset: -18px -18px auto auto;
  width: 62%;
  aspect-ratio: 1;
  border-color: var(--hm-champagne) transparent transparent var(--hm-champagne);
  opacity: .8;
}

/* Numbered step marker built from the arc */
.hm-arc-num {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--hm-antique-gold);
  background: var(--hm-white);
  border-radius: 50%;
}
.hm-arc-num::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--hm-champagne);
  border-right-color: transparent;
  transform: rotate(-45deg);
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.hm-btn-primary,
.hm-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 26px;
  border-radius: var(--hm-radius-sm);
  font-family: var(--hm-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--hm-dur-ui) var(--hm-ease),
              color var(--hm-dur-ui) var(--hm-ease),
              border-color var(--hm-dur-ui) var(--hm-ease);
}
.hm-btn-primary {
  background: var(--hm-antique-gold);
  color: var(--hm-white);
  border: 1.5px solid var(--hm-antique-gold);
}
.hm-btn-primary:hover,
.hm-btn-primary:focus-visible { background: #7F5F24; border-color: #7F5F24; color: var(--hm-white); }

.hm-btn-secondary {
  background: transparent;
  color: var(--hm-text);
  border: 1.5px solid var(--hm-border);
}
.hm-btn-secondary:hover,
.hm-btn-secondary:focus-visible { border-color: var(--hm-antique-gold); color: var(--hm-antique-gold); }

.hm-section-dark .hm-btn-secondary { color: var(--hm-ivory); border-color: rgba(227,217,158,.42); }
.hm-section-dark .hm-btn-secondary:hover,
.hm-section-dark .hm-btn-secondary:focus-visible { border-color: var(--hm-pale-gold); color: var(--hm-pale-gold); }

.hm-btn-primary .hm-arrow,
.hm-btn-secondary .hm-arrow {
  transition: transform var(--hm-dur-ui) var(--hm-ease);
}
.hm-btn-primary:hover .hm-arrow,
.hm-btn-secondary:hover .hm-arrow { transform: translateX(4px); }

.hm-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.hm-card {
  background: var(--hm-white);
  border: 1px solid var(--hm-border);
  border-radius: var(--hm-radius-md);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: none;
  transition: transform var(--hm-dur-ui) var(--hm-ease),
              box-shadow var(--hm-dur-ui) var(--hm-ease),
              border-color var(--hm-dur-ui) var(--hm-ease);
}
.hm-card:hover,
.hm-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  border-color: var(--hm-champagne);
}

.hm-card-programme { display: flex; flex-direction: column; height: 100%; }
.hm-card-programme .hm-tier {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hm-antique-gold);
  margin: 0 0 10px;
}
.hm-card-programme dl { margin: 0 0 20px; }
.hm-card-programme dt {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hm-muted);
  margin-top: 14px;
}
.hm-card-programme dd {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--hm-text);
}
.hm-card-programme .hm-card-foot { margin-top: auto; padding-top: 18px; }

.hm-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.hm-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.hm-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.hm-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ==========================================================================
   8. TRUST
   ========================================================================== */
.hm-trust-badge {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(227,217,158,.34);
  border-radius: var(--hm-radius-sm);
  background: rgba(227,217,158,.06);
}
.hm-trust-badge strong { display: block; color: var(--hm-pale-gold); font-size: 15px; letter-spacing: .01em; }
.hm-trust-badge span { display: block; font-size: 13px; color: #B9B3A6; margin-top: 3px; }

.hm-trust-strip { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.hm-trust-item { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.hm-trust-item svg { flex: 0 0 22px; color: var(--hm-antique-gold); }

/* Placeholder styling — must be visually obvious before launch */
.hm-placeholder {
  border: 1px dashed var(--hm-antique-gold);
  background: repeating-linear-gradient(45deg, rgba(153,116,46,.05) 0 10px, transparent 10px 20px);
  border-radius: var(--hm-radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--hm-antique-gold);
  font-weight: 600;
}

/* ==========================================================================
   9. TIMELINE
   ========================================================================== */
.hm-timeline { display: grid; gap: 4px; }
.hm-step { display: flex; gap: 22px; padding: 22px 0; border-top: 1px solid var(--hm-border); }
.hm-step:first-child { border-top: 0; }
.hm-step-body { padding-top: 4px; }
.hm-step-body h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.hm-step-body p { margin: 0; color: var(--hm-muted); }

/* ==========================================================================
   10. TABLE / COMPARISON  (stacks on mobile)
   ========================================================================== */
.hm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hm-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--hm-white); }
.hm-table caption { text-align: left; font-size: 14px; color: var(--hm-muted); padding-bottom: 12px; }
.hm-table th, .hm-table td { padding: 14px 16px; text-align: left; border: 1px solid var(--hm-border); font-size: 15px; }
.hm-table thead th { background: var(--hm-warm); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-antique-gold); }
.hm-table tbody th { font-weight: 600; background: #FCFBF8; }

/* ==========================================================================
   11. ACCESSIBILITY
   ========================================================================== */
.hm-page a:focus-visible,
.hm-page button:focus-visible,
.hm-page summary:focus-visible,
.hm-page input:focus-visible,
.hm-page select:focus-visible,
.hm-page textarea:focus-visible {
  outline: 3px solid var(--hm-antique-gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.hm-section-dark a:focus-visible,
.hm-section-dark button:focus-visible { outline-color: var(--hm-pale-gold); }

.hm-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   12. MOTION  (fully optional — content is visible without JS)
   ========================================================================== */
/* Nothing is hidden in CSS. GSAP animates from a transparent offset at
   runtime, so if it never loads the page simply renders complete. */
.hm-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hm-reveal { opacity: 1 !important; transform: none !important; }
  .hm-card:hover { transform: none; }
  .hm-btn-primary:hover .hm-arrow,
  .hm-btn-secondary:hover .hm-arrow { transform: none; }
  .hm-page *, .hm-page *::before, .hm-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .hm-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hm-trust-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .hm-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .hm-grid--2,
  .hm-grid--3,
  .hm-grid--4 { grid-template-columns: minmax(0,1fr); }
  .hm-trust-strip { grid-template-columns: minmax(0,1fr); }
  .hm-step { gap: 16px; }
  .hm-arc-num { width: 46px; height: 46px; flex-basis: 46px; font-size: 13px; }
  .hm-btn-primary, .hm-btn-secondary { width: 100%; justify-content: center; }
  .hm-btn-row > * { flex: 1 1 100%; }
}

/* ==========================================================================
   14. FORM CONTROLS
   Explicit border-box: theme/browser defaults leave inputs as content-box,
   so width:100% + padding overflowed the column by exactly the padding.
   ========================================================================== */
.hm-page input,
.hm-page select,
.hm-page textarea,
.hm-page button {
  box-sizing: border-box;
  font: inherit;
  max-width: 100%;
}

.hm-form { display: grid; gap: 14px; }
.hm-form p { margin: 0; }

.hm-field-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 480px) {
  .hm-field-row { grid-template-columns: minmax(0, 1fr); }
}

.hm-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--hm-text);
}

.hm-input,
.hm-select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  color: var(--hm-text);
  background: var(--hm-white);
  border: 1px solid var(--hm-border);
  border-radius: var(--hm-radius-sm);
  transition: border-color var(--hm-dur-ui) var(--hm-ease);
}
.hm-input:hover,
.hm-select:hover { border-color: var(--hm-champagne); }

.hm-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 6px;
}
.hm-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 4px;
  accent-color: var(--hm-antique-gold);
}
.hm-consent label { margin: 0; }

/* ==========================================================================
   15. COMPARISON TABLE — stacked cards on small screens
   The brief asks for stacked cards rather than a wide scrolling table on
   mobile. Headers are hidden and each cell labels itself from data-label,
   so the same markup serves both layouts and stays screen-reader correct.
   ========================================================================== */
@media (max-width: 680px) {
  .hm-table-wrap { overflow-x: visible; }
  .hm-table { min-width: 0; background: transparent; }

  .hm-table thead {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  .hm-table tbody tr {
    display: block;
    background: var(--hm-white);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius-md);
    margin-bottom: 14px;
    overflow: hidden;
  }

  .hm-table tbody th,
  .hm-table tbody td {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--hm-border);
  }
  .hm-table tbody td:last-child { border-bottom: 0; }

  .hm-table tbody th {
    background: var(--hm-warm);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hm-antique-gold);
  }

  .hm-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hm-muted);
    margin-bottom: 4px;
  }
}

/* ==========================================================================
   16. HERO FIGURE
   ========================================================================== */
.hm-hero-figure {
  position: relative;
  margin: 0;
  border-radius: var(--hm-radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.hm-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--hm-radius-lg);
}
/* the arc reads as a frame over the image corner, not a ring around it */
.hm-hero-figure .hm-gold-arc--frame {
  inset: -14% -14% auto auto;
  width: 78%;
  z-index: 1;
  opacity: .9;
  border-width: 1.5px;
}

/* ==========================================================================
   17. SITE FOOTER
   ========================================================================== */
.hm-footer {
  background: var(--hm-black);
  color: #B9B3A6;
  border-top: 1px solid rgba(187,164,98,.22);
  padding-block: clamp(48px, 6vw, 76px) 0;
  font-family: var(--hm-font);
}
.hm-footer a { color: #C9C4B9; text-decoration: none; transition: color var(--hm-dur-ui) var(--hm-ease); }
.hm-footer a:hover,
.hm-footer a:focus-visible { color: var(--hm-pale-gold); }
.hm-footer a:focus-visible { outline: 3px solid var(--hm-pale-gold); outline-offset: 2px; border-radius: 3px; }

.hm-footer-grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  grid-template-columns: 1.6fr 1fr 1.4fr 1fr;
}

.hm-footer h2 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hm-antique-gold);
  margin: 0 0 16px;
}
.hm-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hm-footer li,
.hm-footer p { font-size: 14px; line-height: 1.6; margin: 0; }

/* Brand lockup */
/* The supplied mark is square with a solid black field, so it sits flush on
   the black footer. Sized by height rather than width so a future landscape
   or transparent variant drops in without re-measuring. */
.hm-footer-brand .hm-logo-slot {
  display: block;
  width: auto;
  height: 96px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 18px;
}
.hm-footer-company { color: var(--hm-ivory); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.hm-footer-licence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 13px;
  border: 1px solid rgba(187,164,98,.32);
  border-radius: var(--hm-radius-sm);
  font-size: 12.5px;
  color: var(--hm-pale-gold);
}
.hm-footer-licence svg { flex: 0 0 15px; color: var(--hm-champagne); }

/* Language selector — placeholder only, not yet wired */
.hm-lang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hm-lang span,
.hm-lang a {
  font-size: 13px;
  padding: 5px 11px;
  border: 1px solid rgba(187,164,98,.26);
  border-radius: 999px;
  line-height: 1.3;
}
.hm-lang [aria-current="true"] { background: rgba(187,164,98,.14); color: var(--hm-pale-gold); border-color: rgba(187,164,98,.5); }
.hm-lang [data-pending] { opacity: .45; cursor: default; }

/* Bottom bar */
.hm-footer-bar {
  margin-top: clamp(34px, 4vw, 52px);
  padding-block: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.hm-footer-credit { color: #8D877B; }
.hm-footer-credit a { color: #A39D90; text-decoration: underline; text-underline-offset: 2px; }
.hm-footer-credit a:hover { color: var(--hm-champagne); }

@media (max-width: 1024px) {
  .hm-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hm-footer-grid { grid-template-columns: minmax(0,1fr); }
  .hm-footer-bar { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   18. SITE HEADER
   Compact and branded: mark, licence line, one enquiry button, WhatsApp.
   Sticky so the primary action stays reachable through a long page.
   ========================================================================== */
.hm-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(5,5,5,.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(187,164,98,.2);
}
.hm-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding-block: 10px;
}
.hm-header-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.hm-header-brand img { width: 46px; height: 46px; object-fit: contain; border-radius: 6px; }
.hm-header-name {
  display: flex;
  flex-direction: column;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--hm-ivory);
  line-height: 1.15;
}
.hm-header-name small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hm-champagne);
  margin-top: 3px;
}
.hm-header-actions { display: flex; align-items: center; gap: 10px; }
.hm-header-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid rgba(227,217,158,.4);
  border-radius: var(--hm-radius-sm);
  color: var(--hm-pale-gold);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--hm-dur-ui) var(--hm-ease), color var(--hm-dur-ui) var(--hm-ease);
}
.hm-header-wa:hover, .hm-header-wa:focus-visible { border-color: var(--hm-pale-gold); color: var(--hm-white); }
.hm-header-cta { min-height: 44px; padding: 11px 20px; font-size: 15px; }

@media (max-width: 720px) {
  .hm-header-name { display: none; }
  .hm-header-wa span { display: none; }
  .hm-header-wa { padding: 10px 13px; }
  .hm-header-cta { padding: 11px 16px; font-size: 14px; }
  .hm-header-inner { min-height: 60px; }
}

/* ==========================================================================
   19. CTA BAND, WHATSAPP BUTTON, FORM REFINEMENTS
   ========================================================================== */
.hm-cta-band {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--hm-border);
  border-radius: var(--hm-radius-md);
  background: var(--hm-white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hm-cta-band p { margin: 0; font-size: 17px; font-weight: 600; }

.hm-btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: var(--hm-radius-sm);
  border: 1.5px solid #1FA855;
  background: #1FA855;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--hm-dur-ui) var(--hm-ease), border-color var(--hm-dur-ui) var(--hm-ease);
}
.hm-btn-wa:hover, .hm-btn-wa:focus-visible { background: #178f47; border-color: #178f47; color: #fff; }
.hm-btn-wa-submit { background: #1FA855; border-color: #1FA855; }
.hm-btn-wa-submit:hover, .hm-btn-wa-submit:focus-visible { background: #178f47; border-color: #178f47; }

.hm-card-desc { font-size: 14px; color: var(--hm-muted); margin: 0 0 16px; min-height: 3.2em; line-height: 1.5; }
.hm-card-programme dl { margin: 0 0 18px; }
.hm-card-programme dt { margin-top: 12px; }
.hm-card-programme dt:first-child { margin-top: 0; }
.hm-card-programme dd { font-size: 16px; }

.hm-form-intro { font-size: 14px; color: var(--hm-muted); margin: 0 0 16px; }
.hm-opt { font-weight: 500; color: var(--hm-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-left: 5px; }
.hm-form-fallback { font-size: 13px; color: var(--hm-muted); margin: 4px 0 0; text-align: center; }
.hm-form-fallback a { color: var(--hm-antique-gold); font-weight: 600; }
textarea.hm-input { min-height: 84px; resize: vertical; padding-top: 12px; }

.hm-form-error { color: #A8321F; font-size: 13px; font-weight: 600; margin: 4px 0 0; }
.hm-input[aria-invalid="true"], .hm-select[aria-invalid="true"] { border-color: #A8321F; }

@media (max-width: 600px) {
  .hm-cta-band { flex-direction: column; align-items: stretch; }
  .hm-cta-band .hm-btn-row > * { flex: 1 1 100%; }
  .hm-card-desc { min-height: 0; }
}

/* ==========================================================================
   20. ACCORDIONS
   Detail sits behind a disclosure so the main journey stays short. Content
   remains in the DOM and indexable — this only changes what is painted.
   ========================================================================== */
.hm-acc-list { display: grid; gap: 8px; margin-top: clamp(24px, 3vw, 34px); }

.hm-acc { padding: 0; overflow: hidden; }
.hm-acc summary {
  cursor: pointer;
  list-style: none;
  padding: 17px clamp(18px, 2.2vw, 24px);
  font-size: 17px;
  font-weight: 700;
  color: var(--hm-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.hm-acc summary::-webkit-details-marker { display: none; }
.hm-acc summary::after {
  content: "";
  flex: 0 0 10px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--hm-antique-gold);
  border-bottom: 2px solid var(--hm-antique-gold);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform var(--hm-dur-ui) var(--hm-ease);
}
.hm-acc[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.hm-acc > p {
  margin: 0;
  padding: 0 clamp(18px, 2.2vw, 24px) 20px;
  color: var(--hm-muted);
}
.hm-acc:hover { transform: none; box-shadow: none; border-color: var(--hm-champagne); }

/* FAQ uses the same disclosure pattern */
#faq details.hm-card { padding: 0; }
#faq details.hm-card > summary {
  padding: 17px clamp(18px, 2.2vw, 24px);
  list-style: revert;
}
#faq details.hm-card > p { margin: 0; padding: 0 clamp(18px, 2.2vw, 24px) 20px; }

/* ==========================================================================
   21. TEMPLATE-PART WRAPPERS
   WordPress wraps area:header / area:footer parts in its own <header>/<footer>
   element, which inherits the parent theme's background and spacing — that was
   painting a white band between the header and the hero. Our parts are plain
   divs inside those landmarks, so the wrapper itself carries nothing.
   ========================================================================== */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part,
header.wp-block-template-part,
footer.wp-block-template-part {
  margin: 0;
  padding: 0;
  background: var(--hm-black);
  border: 0;
}
/* the header wrapper is what actually sticks */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 60;
}
.hm-header { position: static; }

/* GreenShift/parent flow spacing must not open gaps between full-bleed bands */
.wp-site-blocks > .entry-content,
.entry-content.wp-block-post-content { margin-block: 0; }
.hm-page > section:first-child { margin-top: 0; }

/* ==========================================================================
   22. APPLICATION TIMELINE — scroll progress line
   A thin gold rule behind the step markers. The fill is transform-only
   (scaleY), so scrolling costs no layout. Without JS the track simply sits
   at rest and the steps read normally.
   ========================================================================== */
.hm-timeline { position: relative; }
.hm-timeline-track {
  position: absolute;
  left: 28px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: var(--hm-border);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}
.hm-timeline-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--hm-gold), var(--hm-antique-gold));
  border-radius: 2px;
  transform-origin: top center;
  transform: scaleY(0);
}
/* markers sit above the rule */
.hm-timeline .hm-step { position: relative; z-index: 1; }
.hm-timeline .hm-arc-num { background: var(--hm-warm); }

@media (prefers-reduced-motion: reduce) {
  .hm-timeline-fill { transform: scaleY(1); }
}
@media (max-width: 680px) {
  .hm-timeline-track { left: 22px; }
}

/* ==========================================================================
   23. EDITORIAL FIGURES
   Generated imagery is labelled as illustrative in a visible caption, so it
   can never be mistaken for evidence of the firm's actual premises.
   ========================================================================== */
.hm-figure { margin: 0 0 clamp(26px, 3vw, 38px); }
.hm-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 941;
  object-fit: cover;
  border-radius: var(--hm-radius-lg);
}
.hm-figure figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--hm-muted);
}
.hm-figure--dark { margin-block: 22px 26px; }
.hm-figure--dark img { aspect-ratio: 16 / 9; }
.hm-figure--dark figcaption { color: #8D877B; }

/* ==========================================================================
   24. HERO VIDEO
   The wrapper reserves the aspect ratio before anything loads, so swapping
   the still for footage costs no layout shift. The poster is the same frame
   the footage starts on, so the frame is never empty or black.
   ========================================================================== */
.hm-hero-media {
  position: relative;
  margin: 0;
  border-radius: var(--hm-radius-lg);
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 3 / 4;
  background: #0B0B0B;
}
.hm-hero-media video,
.hm-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  border-radius: var(--hm-radius-lg);
}
.hm-hero-media .hm-gold-arc--frame { z-index: 2; }

.hm-video-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(227,217,158,.45);
  background: rgba(5,5,5,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--hm-pale-gold);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--hm-dur-ui) var(--hm-ease), background var(--hm-dur-ui) var(--hm-ease);
}
.hm-hero-media.is-ready .hm-video-toggle { display: grid; }
.hm-video-toggle:hover,
.hm-video-toggle:focus-visible { border-color: var(--hm-pale-gold); background: rgba(5,5,5,.8); }
.hm-video-toggle .hm-icon-pause { display: none; }
.hm-video-toggle[data-state="playing"] .hm-icon-pause { display: block; }
.hm-video-toggle[data-state="playing"] .hm-icon-play { display: none; }

@media (max-width: 680px) {
  /* keep the headline and CTA ahead of the media on small screens */
  .hm-hero-media { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero-media video { display: none; }
  .hm-hero-media .hm-hero-poster { display: block; }
}

/* ==========================================================================
   25. LANGUAGE
   The switcher is a static template part shared by all three pages, so the
   current language is marked from the body class rather than duplicated
   markup. CJK stacks are applied per locale.
   ========================================================================== */
.hm-lang a {
  font-size: 13px;
  padding: 5px 11px;
  border: 1px solid rgba(187,164,98,.26);
  border-radius: 999px;
  line-height: 1.3;
  text-decoration: none;
}
.hm-lang-en      .hm-lang a[data-lang="en"],
.hm-lang-zhhans  .hm-lang a[data-lang="zhhans"],
.hm-lang-zhhant  .hm-lang a[data-lang="zhhant"],
.hm-lang-ko      .hm-lang a[data-lang="ko"] {
  background: rgba(187,164,98,.14);
  color: var(--hm-pale-gold);
  border-color: rgba(187,164,98,.5);
  cursor: default;
}

/* Simplified Chinese: Manrope keeps the Latin glyphs, Noto Sans SC the rest */
.hm-lang-zhhans .hm-page,
.hm-lang-zhhans .hm-header,
.hm-lang-zhhans .hm-footer { font-family: var(--hm-font-sc); }
.hm-lang-zhhant .hm-page,
.hm-lang-zhhant .hm-header,
.hm-lang-zhhant .hm-footer { font-family: var(--hm-font-tc); }

/* Korean runs longer than English — give headings more room to breathe */
.hm-lang-ko .hm-page,
.hm-lang-ko .hm-header,
.hm-lang-ko .hm-footer { font-family: var(--hm-font-kr); }
.hm-lang-ko .hm-heading-xl { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.22; }
.hm-lang-ko .hm-heading-lg { font-size: clamp(26px, 3.1vw, 37px); line-height: 1.3; }
.hm-lang-ko .hm-header-name { font-size: 15px; }

/* CJK reads better with slightly looser body leading and no tight tracking */
.hm-lang-zhhans .hm-body-lg,
.hm-lang-zhhant .hm-body-lg,
.hm-lang-ko .hm-body-lg { line-height: 1.8; }
.hm-lang-zhhans .hm-heading-xl,
.hm-lang-zhhans .hm-heading-lg,
.hm-lang-zhhant .hm-heading-xl,
.hm-lang-zhhant .hm-heading-lg,
.hm-lang-ko .hm-heading-xl,
.hm-lang-ko .hm-heading-lg { letter-spacing: 0; }
.hm-lang-zhhans .hm-card-desc,
.hm-lang-zhhant .hm-card-desc,
.hm-lang-ko .hm-card-desc { min-height: 0; }

/* ==========================================================================
   26. HEADER LANGUAGE SWITCHER
   A <details> disclosure so it opens and closes with no JavaScript at all.
   All three labels sit in the summary; the body class written by
   hm_body_class() reveals only the one matching the page being viewed, which
   keeps a single static template part correct in every language.
   ========================================================================== */
.hm-langsw { position: relative; }
.hm-langsw > summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: rgba(255,255,255,.82); font-size: 14px; font-weight: 500;
  letter-spacing: .01em; cursor: pointer; user-select: none;
  list-style: none; white-space: nowrap; flex: 0 0 auto;
  transition: border-color .2s ease, color .2s ease;
}
.hm-langsw > summary > svg { flex: 0 0 auto; }
.hm-langsw > summary::-webkit-details-marker,
.hm-langsw > summary::marker { display: none; content: ''; }
.hm-langsw > summary:hover,
.hm-langsw > summary:focus-visible { border-color: var(--hm-pale-gold); color: var(--hm-white); }
.hm-langsw-chev { transition: transform .2s ease; opacity: .6; }
.hm-langsw[open] > summary { border-color: var(--hm-pale-gold); color: var(--hm-white); }
.hm-langsw[open] .hm-langsw-chev { transform: rotate(180deg); }

/* Only the active language shows in the closed control. */
.hm-langsw-now { display: none; }
.hm-lang-en     .hm-langsw-now[data-lang="en"],
.hm-lang-zhhans .hm-langsw-now[data-lang="zhhans"],
.hm-lang-zhhant .hm-langsw-now[data-lang="zhhant"],
.hm-lang-ko     .hm-langsw-now[data-lang="ko"] { display: inline; }

.hm-langsw-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 168px; padding: 6px;
  background: #0d0d0d; border: 1px solid rgba(187,164,98,.32);
  border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.hm-langsw-list a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: rgba(255,255,255,.82); font-size: 14px; text-decoration: none;
  white-space: nowrap; transition: background .18s ease, color .18s ease;
}
.hm-langsw-list a:hover,
.hm-langsw-list a:focus-visible { background: rgba(255,255,255,.07); color: var(--hm-white); }

/* The page you are already on is shown as state, not as a link to nowhere. */
.hm-lang-en     .hm-langsw-list a[data-lang="en"],
.hm-lang-zhhans .hm-langsw-list a[data-lang="zhhans"],
.hm-lang-zhhant .hm-langsw-list a[data-lang="zhhant"],
.hm-lang-ko     .hm-langsw-list a[data-lang="ko"] {
  background: rgba(187,164,98,.14); color: var(--hm-pale-gold); cursor: default;
}

@media (max-width: 720px) {
  .hm-langsw > summary { padding: 10px 9px; gap: 5px; font-size: 13px; }
  .hm-langsw-list { min-width: 150px; }
}
/* On a phone the header must still fit a logo, WhatsApp and the primary CTA
   on one line, so the control falls back to the globe alone. The open menu
   still names every language in full. */
@media (max-width: 440px) {
  .hm-lang-en     .hm-langsw-now[data-lang="en"],
  .hm-lang-zhhans .hm-langsw-now[data-lang="zhhans"],
  .hm-lang-zhhant .hm-langsw-now[data-lang="zhhant"],
  .hm-lang-ko     .hm-langsw-now[data-lang="ko"] { display: none; }
  .hm-langsw-chev { display: none; }
  .hm-langsw > summary { padding: 11px; gap: 0; }
  /* The control sits mid-row on a phone, so a right-anchored menu would run
     off the left edge. Anchor it to the control's left instead. */
  .hm-langsw-list { left: 0; right: auto; }
  /* Keep the primary CTA on one line so the header stays a single row. */
  .hm-header-cta { white-space: nowrap; padding: 11px 13px; font-size: 13.5px; }
  .hm-header-actions { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-langsw-chev { transition: none; }
}

/* ==========================================================================
   27. LANGUAGE HINT
   One quiet line offering the visitor's own language, shown only when the
   browser asks for a language this site publishes and the visitor is not
   already reading it. Injected after the sticky header, so it scrolls away
   like any other content rather than following the reader down the page.
   ========================================================================== */
.hm-langhint {
  /* This sits directly inside .wp-site-blocks, where WordPress's flow layout
     adds a block gap between top-level children. Left alone that gap shows
     the white page background as a band under the header. */
  margin: 0;
  background: #0d0d0d;
  border-bottom: 1px solid rgba(187,164,98,.28);
  color: rgba(255,255,255,.82);
}
.hm-langhint-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  padding-top: 11px; padding-bottom: 11px;
}
.hm-langhint p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.hm-langhint a {
  color: var(--hm-pale-gold); font-size: 14.5px; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid rgba(227,217,158,.45);
  padding-bottom: 1px;
}
.hm-langhint a:hover, .hm-langhint a:focus-visible {
  color: var(--hm-white); border-bottom-color: var(--hm-white);
}
.hm-langhint-close {
  margin-left: auto; flex: 0 0 auto;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; color: rgba(255,255,255,.62);
  font-size: 19px; line-height: 1; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.hm-langhint-close:hover, .hm-langhint-close:focus-visible {
  border-color: var(--hm-pale-gold); color: var(--hm-white);
}
@media (max-width: 560px) {
  .hm-langhint p { flex: 1 1 100%; font-size: 14px; }
  .hm-langhint-close { position: absolute; top: 8px; right: 16px; margin-left: 0; }
  .hm-langhint-inner { position: relative; padding-right: 58px; }
}

/* ==========================================================================
   28. LEGAL PAGES
   Privacy, Terms and Disclaimer share the site's header and footer so a
   visitor who follows a footer link stays inside the brand and has a way
   back. The dark band runs full width; the reading column inside it is held
   to a narrow measure for sustained reading.
   ========================================================================== */
.hm-legal {
  /* Zero the flow gap WordPress puts between top-level blocks, which would
     otherwise show the white page background as a band under the header. */
  margin: 0;
  background: var(--hm-black);
  padding: clamp(48px, 7vw, 88px) 20px clamp(56px, 8vw, 96px);
  min-height: 60vh;
}
.hm-legal > * {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.hm-legal .wp-block-post-title {
  font-family: var(--hm-font-display, inherit);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 auto 10px;
  color: var(--hm-white);
}
.hm-legal .hm-legal-stamp {
  margin: 0 auto 44px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hm-champagne);
}
.hm-legal h2 {
  margin: 44px auto 14px;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.3;
  color: var(--hm-white);
}
.hm-legal p,
.hm-legal li {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
}
.hm-legal p { margin: 0 auto 18px; }
.hm-legal ul { margin: 0 auto 18px; padding-left: 22px; }
.hm-legal li { margin-bottom: 8px; max-width: none; }
.hm-legal a { color: var(--hm-pale-gold); }
.hm-legal a:hover, .hm-legal a:focus-visible { color: var(--hm-white); }

/* ==========================================================================
   29. ANCHOR OFFSET
   The header is sticky, so an anchor jump would otherwise land with the
   section heading sitting underneath it. Every in-page target clears it.
   ========================================================================== */
section[id] { scroll-margin-top: 84px; }

/* ==========================================================================
   30. KAKAOTALK
   Korean page only. Kakao's own yellow is mandated by their brand guidelines
   and is deliberately the one non-palette colour on the site -- a Korean
   visitor recognises it instantly, which is the entire point of the button.
   The panel lives inside the white enquiry card, so it uses the light
   surface tokens, not the dark-section ones the header button sits on.
   ========================================================================== */
.hm-header-kakao {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  background: #FEE500; color: #191600;
  border-radius: 999px; font-size: 15px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: filter .2s ease;
}
.hm-header-kakao:hover, .hm-header-kakao:focus-visible { filter: brightness(.94); color: #191600; }

.hm-kakao-panel {
  margin-top: 20px; padding: 20px;
  background: var(--hm-ivory);
  border: 1px solid var(--hm-border); border-radius: var(--hm-radius-sm);
}
/* Scoped: .hm-section-dark p sets a light colour for the dark band this
   card sits inside, and would otherwise win on specificity. */
.hm-kakao-panel .hm-kakao-lead { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--hm-text); }
.hm-kakao-text {
  width: 100%; resize: vertical; box-sizing: border-box;
  padding: 14px; border-radius: var(--hm-radius-sm);
  background: var(--hm-white); border: 1px solid var(--hm-border);
  color: var(--hm-text); font: inherit; font-size: 14.5px; line-height: 1.65;
}
.hm-kakao-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.hm-kakao-copy {
  min-height: 46px; padding: 12px 20px; cursor: pointer;
  background: var(--hm-white); border: 1px solid var(--hm-border);
  border-radius: 999px; color: var(--hm-text); font: inherit; font-weight: 600;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.hm-kakao-copy:hover, .hm-kakao-copy:focus-visible { border-color: var(--hm-antique-gold); }
.hm-kakao-copy.is-done {
  background: rgba(153,116,46,.10); border-color: var(--hm-antique-gold); color: var(--hm-antique-gold);
}
.hm-kakao-go {
  background: #FEE500; color: #191600; border-color: #FEE500;
  min-height: 46px; display: inline-flex; align-items: center;
}
.hm-kakao-go:hover, .hm-kakao-go:focus-visible { filter: brightness(.94); color: #191600; }

/* Channel-add sits below the chat actions: useful, but never competing with
   the button that carries the enquiry they just wrote. */
.hm-kakao-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hm-border); }
.hm-kakao-add {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 9px 16px;
  background: var(--hm-white); border: 1px solid #E3C200; border-radius: 999px;
  color: #6B5A00; font-size: 14.5px; font-weight: 700; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.hm-kakao-add::before { content: "+"; font-size: 17px; line-height: 1; font-weight: 700; }
.hm-kakao-add:hover, .hm-kakao-add:focus-visible { background: #FEE500; color: #191600; }
.hm-kakao-panel .hm-kakao-addnote { margin: 9px 0 0; font-size: 13px; line-height: 1.55; color: var(--hm-muted, #5d5a54); }

.hm-kakao-alt {
  display: inline-block; margin-top: 14px;
  font-size: 14px; color: var(--hm-muted, #5d5a54);
  text-decoration: underline; text-underline-offset: 3px;
}
.hm-kakao-alt:hover, .hm-kakao-alt:focus-visible { color: var(--hm-text); }

@media (max-width: 720px) {
  .hm-header-kakao span { display: none; }
  .hm-header-kakao { padding: 10px 13px; }
  .hm-kakao-row > * { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   31. FLOATING CONTACT WIDGET
   Collapsed to one 56px button at rest. Phone and directions are the reason
   it exists -- neither is reachable from the sticky header -- so the list is
   ordered by what the header cannot already do.
   ========================================================================== */
.hm-fab {
  position: fixed; z-index: 80;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transition: opacity .25s ease, transform .25s ease;
}
.hm-fab[hidden], .hm-fab.is-away {
  opacity: 0; transform: translateY(14px) scale(.9);
  pointer-events: none;
}
.hm-fab > summary {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-left: auto;
  background: var(--hm-antique-gold); color: var(--hm-black);
  border-radius: 50%; cursor: pointer; list-style: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.42);
  transition: background .2s ease, transform .2s ease;
}
.hm-fab > summary::-webkit-details-marker, .hm-fab > summary::marker { display: none; content: ''; }
.hm-fab > summary:hover { background: var(--hm-champagne); }
.hm-fab > summary:focus-visible { outline: 2px solid var(--hm-pale-gold); outline-offset: 3px; }
.hm-fab-shut { display: none; }
.hm-fab[open] > summary { background: var(--hm-black); color: var(--hm-pale-gold); }
.hm-fab[open] .hm-fab-open { display: none; }
.hm-fab[open] .hm-fab-shut { display: flex; }

.hm-fab-list {
  position: absolute; right: 0; bottom: 68px;
  display: grid; gap: 10px; justify-items: end;
}
.hm-fab-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 10px;
  background: #0d0d0d; border: 1px solid rgba(187,164,98,.34);
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  color: rgba(255,255,255,.90); font-size: 14.5px; font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  transition: border-color .18s ease, color .18s ease;
}
.hm-fab-item:hover, .hm-fab-item:focus-visible { border-color: var(--hm-pale-gold); color: var(--hm-white); }
.hm-fab-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
}
.hm-fab-wa    .hm-fab-ico { background: #25D366; color: #052e16; }
.hm-fab-kakao .hm-fab-ico { background: #FEE500; color: #191600; }
.hm-fab-call  .hm-fab-ico { background: var(--hm-champagne); color: var(--hm-black); }
.hm-fab-dir   .hm-fab-ico { background: rgba(255,255,255,.14); color: var(--hm-pale-gold); }

@media (max-width: 480px) {
  .hm-fab { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .hm-fab > summary { width: 52px; height: 52px; }
  .hm-fab-list { bottom: 62px; }
  .hm-fab-item { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-fab, .hm-fab > summary { transition: none; }
  .hm-fab.is-away { transform: none; }
}