/* HonsHair — Orange × white, rounded composition */

:root {
 --hh-orange: #ff822d;
 --hh-orange-deep: #e86f1c;
 --hh-orange-soft: #fff3ea;
 --hh-ink: #1a120e;
 --hh-ink-soft: #4a3c34;
 --hh-muted: #7a6f67;
 --hh-paper: #ffffff;
 --hh-paper-2: #f7f5f2;
 --hh-white: #ffffff;
 --hh-line: #ebe4dc;
 --hh-dark: #ff822d;
 --hh-max: 1180px;
 /* Latin: Syne (already loaded). CJK falls through to Noto Sans TC. */
 --hh-latin: "Syne", sans-serif;
 --hh-display: "Syne", "Noto Sans TC", sans-serif;
 --hh-serif: "Noto Serif TC", "Songti TC", serif;
 --hh-sans: "Syne", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 /* Neutral digits for phone / numbers — not Syne display */
 --hh-num: "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
 --hh-ease: 220ms cubic-bezier(0.22, 1, 0.36, 1);
 --hh-radius: 14px;
 --hh-radius-sm: 10px;
 --hh-radius-lg: 22px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
 margin: 0;
 background: var(--hh-paper);
 color: var(--hh-ink);
 font-family: var(--hh-sans);
 font-size: 16px;
 line-height: 1.7;
 text-rendering: optimizeLegibility;
}
/* Sticky booking bar hidden on homepage — no bottom clearance. */
body.hh-home {
 padding-bottom: 0;
}

img { max-width: 100%; height: auto; display: block; }

a {
 color: var(--hh-ink);
 text-decoration-thickness: 1px;
 text-underline-offset: 3px;
 transition: color var(--hh-ease);
}
a:hover { color: var(--hh-orange); }

h1, h2, h3, h4 {
 font-family: var(--hh-display);
 font-weight: 700;
 line-height: 1.15;
 letter-spacing: -0.03em;
 color: var(--hh-ink);
 margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

.skip-link {
 position: absolute;
 left: -999px;
 top: 0;
 background: var(--hh-ink);
 color: var(--hh-white);
 padding: 8px 12px;
 z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

.hh-wrap {
 width: min(var(--hh-max), calc(100% - 48px));
 max-width: var(--hh-max);
 margin: 0 auto;
 box-sizing: border-box;
}

.hh-kicker {
 font-family: var(--hh-sans);
 font-size: 12px;
 font-weight: 400;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--hh-orange);
 margin: 0 0 0.75rem;
}

/* English UI labels — Syne, normal weight (not ultra-bold display) */
.hh-en-label {
 font-family: var(--hh-latin);
 font-weight: 400;
 letter-spacing: 0.05em;
 font-stretch: normal;
}

.hh-lede {
 color: var(--hh-ink-soft);
 font-size: 1.05rem;
 max-width: 40rem;
}

.hh-link {
 display: inline;
 width: fit-content;
 max-width: max-content;
 font-weight: 500;
 letter-spacing: 0.04em;
 color: var(--hh-orange);
 text-decoration: none;
 border-bottom: none;
 padding-bottom: 0.08em;
 background-image: linear-gradient(currentColor, currentColor);
 background-position: 0 100%;
 background-repeat: no-repeat;
 background-size: 0 1px;
 transition: background-size 0.28s var(--hh-ease, ease), color 0.2s ease;
}
.hh-link:hover,
.hh-link:focus-visible {
 color: var(--hh-orange-deep);
 background-size: 100% 1px;
}
.hh-link::after {
 content: none;
}
.hh-path__more {
 margin: 1.75rem 0 0;
}
.hh-path__more .hh-link {
 color: #fff;
 background-image: linear-gradient(currentColor, currentColor);
 background-size: 0 1px;
 font-weight: 400;
 letter-spacing: 0.04em;
}
.hh-path__more .hh-link:hover {
 color: #fff;
 background-size: 100% 1px;
}

/* Buttons */
.hh-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.4rem;
 padding: 0.85rem 1.35rem;
 font-family: var(--hh-sans);
 font-size: 0.95rem;
 font-weight: 700;
 letter-spacing: 0.02em;
 text-decoration: none;
 border: 2px solid transparent;
 border-radius: var(--hh-radius);
 cursor: pointer;
 transition: background var(--hh-ease), color var(--hh-ease), border-color var(--hh-ease), transform var(--hh-ease);
}
.hh-btn:hover { transform: translateY(-1px); text-decoration: none; }
.hh-btn--sm { padding: 0.55rem 0.95rem; font-size: 0.85rem; }
.hh-btn--lg { padding: 1rem 1.6rem; font-size: 1rem; }
.hh-btn--block { width: 100%; }
.hh-btn--pill { border-radius: 999px; }
.hh-btn--outline-orange {
 background: transparent;
 color: var(--hh-orange);
 border-color: var(--hh-orange);
}
.hh-btn--outline-orange:hover {
 background: var(--hh-orange-soft);
 color: var(--hh-orange-deep);
 border-color: var(--hh-orange-deep);
 box-shadow: 0 8px 20px rgba(232, 111, 28, 0.12);
}
.hh-btn--solid {
 background: var(--hh-orange);
 color: var(--hh-white);
 border-color: var(--hh-orange);
}
.hh-btn--solid:hover {
 background: var(--hh-orange-deep);
 border-color: var(--hh-orange-deep);
 color: var(--hh-white);
 box-shadow: 0 10px 24px rgba(232, 111, 28, 0.28);
}
.hh-btn--ghost {
 background: transparent;
 color: var(--hh-ink);
 border-color: var(--hh-line);
}
.hh-btn--ghost:hover {
 background: var(--hh-orange-soft);
 border-color: var(--hh-orange);
 color: var(--hh-orange-deep);
}
.hh-btn--ghost-on-dark {
 background: transparent;
 color: var(--hh-white);
 border-color: rgba(255, 255, 255, 0.45);
}
.hh-btn--ghost-on-dark:hover {
 background: rgba(255, 130, 45, 0.16);
 color: var(--hh-white);
 border-color: rgba(255, 255, 255, 0.85);
}
.hh-btn--outline-light {
 background: transparent;
 color: var(--hh-white);
 border-color: rgba(255, 255, 255, 0.55);
}
.hh-btn--outline-light:hover {
 background: rgba(255, 130, 45, 0.2);
 color: var(--hh-white);
 border-color: rgba(255, 255, 255, 0.9);
 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* Header phone — readable numerals + icon */
.hh-btn--phone {
 font-family: var(--hh-num);
 font-weight: 600;
 font-variant-numeric: tabular-nums;
 letter-spacing: 0.03em;
}
.hh-btn--phone__icon {
 width: 0.95em;
 height: 0.95em;
 flex-shrink: 0;
 display: block;
}
.hh-btn--phone__num {
 font-family: inherit;
 font-weight: inherit;
 font-variant-numeric: tabular-nums;
}

/* Top bar — removed sitewide (kept selectors inert if markup remains) */
.hh-topbar { display: none !important; }

/* Header */
.hh-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(252, 250, 247, 0.96);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border-bottom: 1px solid rgba(42, 34, 28, 0.08);
 box-shadow: none;
 opacity: 1;
 transition:
 background-color 0.2s ease,
 border-color 0.2s ease,
 box-shadow 0.2s ease,
 backdrop-filter 0.2s ease,
 opacity 0.5s ease;
}

/* Immersive only at homepage top; solid after slight scroll (see main.js) */
.hh-home .hh-header {
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 width: 100%;
}
.hh-home .hh-header.is-over-hero {
 background: transparent;
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
 border-bottom-color: transparent;
 box-shadow: none;
}
.hh-home .hh-header:not(.is-over-hero) {
 background: rgba(252, 250, 247, 0.98);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border-bottom-color: rgba(42, 34, 28, 0.1);
 box-shadow: none;
}
/* Mobile homepage: never immersive — solid cream bar sits on top of hero */
@media (max-width: 980px) {
 .hh-home .hh-header.is-over-hero {
  background: rgba(252, 250, 247, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(42, 34, 28, 0.1);
  box-shadow: none;
 }
}
/* Homepage promo video: fade header while section is mostly in view (see main.js) */
.hh-home .hh-header.is-over-promo {
 opacity: 0;
 pointer-events: none;
}
/* Hero loop: keep immersed transparent header (is-over-hero) — do not hide menu */
@media (prefers-reduced-motion: reduce) {
 .hh-header { transition: none; }
}
.hh-header__bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 min-height: 72px;
}
.hh-brand {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 text-decoration: none;
 color: var(--hh-ink);
 flex-shrink: 0;
}
.hh-brand:hover { color: var(--hh-ink); }
.hh-brand__logo {
 display: block;
 width: auto;
 height: 44px;
 max-width: min(200px, 52vw);
}
.hh-brand__mark {
 width: 28px;
 height: 28px;
 background:
 linear-gradient(135deg, var(--hh-orange) 0 38%, transparent 38% 62%, var(--hh-orange) 62%);
 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.hh-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.hh-brand__en {
 font-family: var(--hh-latin);
 font-size: 11px;
 letter-spacing: 0.06em;
 font-weight: 400;
 color: var(--hh-muted);
}
.hh-brand__zh {
 font-family: var(--hh-display);
 font-size: 1.25rem;
 font-weight: 800;
 letter-spacing: -0.02em;
}
.hh-header__nav {
 display: flex;
 align-items: center;
 gap: 1.25rem;
}
.hh-header__actions {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.hh-menu-btn {
 display: none;
 width: 44px;
 height: 44px;
 border: 0;
 background: transparent;
 padding: 10px;
 cursor: pointer;
}
.hh-menu-btn span {
 display: block;
 height: 2px;
 background: var(--hh-ink);
 margin: 5px 0;
 transition: transform var(--hh-ease);
}

/* Nav + mega (compact panel under item) */
.hh-nav__list {
 display: flex;
 align-items: center;
 gap: 0.15rem;
}
.hh-nav__link {
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 padding: 0.65rem 0.7rem;
 font-size: 0.9rem;
 font-weight: 600;
 text-decoration: none;
 color: var(--hh-ink);
 white-space: nowrap;
}
.hh-nav__link:hover,
.hh-nav__item--mega.is-mega-open > .hh-nav__link { color: var(--hh-orange); }
.hh-nav__chev {
 width: 0;
 height: 0;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-top: 5px solid currentColor;
 opacity: 0.55;
 transition: transform var(--hh-ease);
}
.hh-nav__item--mega.is-mega-open > .hh-nav__link .hh-nav__chev {
 transform: rotate(180deg);
 opacity: 0.9;
}
.hh-nav__item--mega { position: relative; }
.hh-mega {
 display: none;
 position: absolute;
 left: 0;
 right: auto;
 top: calc(100% + 6px);
 z-index: 60;
 width: max-content;
 max-width: min(560px, calc(100vw - 1.5rem));
 background: #fff;
 border: 1px solid rgba(42, 34, 28, 0.08);
 border-radius: 16px;
 box-shadow: 0 18px 40px rgba(40, 24, 12, 0.12);
 padding: 0;
 animation: hhFade 0.2s var(--hh-ease);
}
/* Invisible bridge so pointer can travel into panel without gap-close */
.hh-mega::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: -14px;
 height: 14px;
}
.hh-nav__item--mega.is-mega-open > .hh-mega,
.hh-nav__item--mega:focus-within > .hh-mega { display: block; }
.hh-header { position: sticky; }
.hh-header__bar { position: relative; }
.hh-mega__inner {
 display: flex;
 flex-wrap: nowrap;
 align-items: stretch;
 gap: 0;
 width: max-content;
 max-width: 100%;
 margin: 0;
 padding: 1.15rem 0 0.85rem;
}
.hh-mega__inner--split {
 width: 100%;
 max-width: 520px;
}
.hh-mega--care .hh-mega__col {
 flex: 1 1 50%;
 min-width: 220px;
 max-width: none;
 padding: 0 1.35rem;
}
.hh-mega__col {
 min-width: 200px;
 max-width: 248px;
 padding: 0 0.95rem;
}
.hh-mega__col + .hh-mega__col {
 border-left: 1px solid rgba(138, 110, 78, 0.22);
}
.hh-mega__heading {
 display: inline-block;
 font-family: var(--hh-serif, "Noto Serif TC", serif);
 font-size: 0.92rem;
 font-weight: 500;
 letter-spacing: 0.12em;
 text-transform: none;
 color: #8a6e4e;
 margin: 0 0 0.85rem;
 padding: 0 0 0.55rem;
 border-bottom: 1px solid rgba(138, 110, 78, 0.18);
 text-decoration: none;
}
a.hh-mega__heading:hover {
 color: var(--hh-bronze, #6e5238);
}
.hh-mega__col ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
.hh-mega__col li + li { margin-top: 0.35rem; }
.hh-mega--care .hh-mega__col > ul a {
 display: block;
 align-items: unset;
 gap: 0;
 padding: 0.42rem 0;
 margin: 0;
 text-decoration: none;
 color: #5c534a;
 font-size: 0.9rem;
 font-weight: 300;
 letter-spacing: 0.04em;
 line-height: 1.55;
 border-radius: 0;
 background: transparent;
}
.hh-mega--care .hh-mega__col > ul a::before { display: none; content: none; }
.hh-mega--care .hh-mega__col > ul a:hover {
 color: #8a6e4e;
 background: transparent;
}
.hh-mega__foot {
 margin: 0;
 padding: 0.75rem 1.35rem 1.05rem;
 border-top: 1px solid rgba(138, 110, 78, 0.16);
}
.hh-mega__foot a {
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 font-size: 0.86rem;
 font-weight: 400;
 letter-spacing: 0.08em;
 color: #8a6e4e;
 text-decoration: none;
}
.hh-mega__foot a:hover { color: var(--hh-bronze, #6e5238); }

.hh-mega__col a {
 display: flex;
 align-items: flex-start;
 gap: 0.5rem;
 padding: 0.32rem 0.35rem;
 margin: 0;
 text-decoration: none;
 font-size: 0.84rem;
 font-weight: 500;
 line-height: 1.35;
 color: var(--hh-ink-soft);
 border-radius: var(--hh-radius);
 transition: color var(--hh-ease), background-color var(--hh-ease);
}
.hh-mega__col a:hover {
 color: var(--hh-orange);
 background: var(--hh-orange-soft);
 text-decoration: none;
}
.hh-mega__col a::before {
 content: "";
 width: 1rem;
 height: 1rem;
 flex-shrink: 0;
 margin-top: 0.12rem;
 background-color: var(--hh-orange);
 opacity: 0.88;
 -webkit-mask: var(--hh-ico, var(--hh-ico-default)) center / contain no-repeat;
 mask: var(--hh-ico, var(--hh-ico-default)) center / contain no-repeat;
}
/* Icon map by destination slug */
.hh-mega__col a[href*="male-hair"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3.5'/%3E%3Cpath d='M5.5 20c1.2-3.2 3.5-4.8 6.5-4.8s5.3 1.6 6.5 4.8'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="female-hair"],
.hh-mega__col a[href*="women-hair"],
.hh-mega__col a[href*="/women/"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3.5'/%3E%3Cpath d='M12 10.5v4M9.5 20c.8-2.4 2-3.5 2.5-3.5s1.7 1.1 2.5 3.5M8 14c1.2-.8 2.5-1.2 4-1.2s2.8.4 4 1.2'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="androgenetic"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8c2-3 5-4 8-4s6 1 8 4'/%3E%3Cpath d='M4 16c2 3 5 4 8 4s6-1 8-4'/%3E%3Cpath d='M9 8v8M15 8v8'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="receding"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14c2-5 5-8 8-8 2 0 4 1 6 3'/%3E%3Cpath d='M4 18h16'/%3E%3Cpath d='M14 9l4-2'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="thinning"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5v6M12 4v8M16 5v6'/%3E%3Cpath d='M7 14c1.5 3 3.5 4.5 5 4.5s3.5-1.5 5-4.5'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="alopecia-areata"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="postpartum"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="stress"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="sudden"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.3 4.3 2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="shampoo"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c-1 2.5-3 4-3 6.5a3 3 0 0 0 6 0c0-2.5-2-4-3-6.5z'/%3E%3Cpath d='M8 14h8v2a4 4 0 0 1-8 0v-2z'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="oily"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s5 5.2 5 9.2A5 5 0 0 1 7 12.2C7 8.2 12 3 12 3z'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="dandruff"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='9' r='1.4'/%3E%3Ccircle cx='14' cy='7' r='1.2'/%3E%3Ccircle cx='16' cy='12' r='1.4'/%3E%3Ccircle cx='10' cy='14' r='1.1'/%3E%3Ccircle cx='12' cy='18' r='1.3'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="itchy"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14c2-1 3-3 3-5'/%3E%3Cpath d='M8 16c2-1 3.5-3 3.5-5.5'/%3E%3Cpath d='M12.5 17c2-1 3.5-2.8 3.5-5'/%3E%3Cpath d='M17 15c1.5-.8 2.5-2 2.5-3.5'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="sensitive"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 7.8 7 9 4-1.2 7-4.5 7-9V6l-7-3z'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="folliculitis"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="scalp-analysis"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="chinese-medicine"],
.hh-mega__col a[href*="herbal"],
.hh-mega__col a[href*="/chinese-medicine/"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3c0 4-2 6-2 9a3 3 0 0 0 6 0c0-3-2-5-2-9'/%3E%3Cpath d='M7 14c1.5 3 3.5 5 5 5s3.5-2 5-5'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="head-spa"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14c0-3 1.8-5 4-6 2.2 1 4 3 4 6'/%3E%3Cpath d='M7 17h10'/%3E%3Cpath d='M9 20h6'/%3E%3Cpath d='M12 4v2'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="plum-blossom"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M9 7h6'/%3E%3Ccircle cx='12' cy='18' r='2.5'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="post-hair-transplant"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='M8 12h8'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="men-hair"],
.hh-mega__col a[href*="/men/"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3.5'/%3E%3Cpath d='M5.5 20c1.2-3.2 3.5-4.8 6.5-4.8s5.3 1.6 6.5 4.8'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="scalp-health"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c4-2.2 7-5.4 7-10V6l-7-3-7 3v5c0 4.6 3 7.8 7 10z'/%3E%3Cpath d='M9.5 12.5 11 14l3.5-3.5'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="hair-knowledge/hair-loss"],
.hh-mega__col a[href*="hair-knowledge/scalp"],
.hh-mega__col a[href*="hair-knowledge/hair-care"],
.hh-mega__col a[href*="/hair-loss/"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h9a4 4 0 0 1 0 8H9'/%3E%3Cpath d='M9 13h5a4 4 0 0 1 0 8H5'/%3E%3Cpath d='M5 5v16'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="philosophy"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4l2.5 2.5'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="practitioners"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3.5 19c1-3 3-4.5 5.5-4.5S15 16 16 19'/%3E%3Cpath d='M14 14.2c1.4-.5 2.8-.3 4.2.8 1 1.7 1.2 3.2 1.3 4'/%3E%3C/svg%3E"); }
.hh-mega__col a[href*="/clinic/"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V9l8-5 8 5v11'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }
/* General hair-loss overview (after more specific rules) */
.hh-mega__col a[href$="/hair-loss/"],
.hh-mega__col a[href*="/concerns/hair-loss/"] { --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4c0 3-2 5-2 8a3 3 0 0 0 6 0c0-3-2-5-2-8'/%3E%3Cpath d='M14 5c0 2.5-1.5 4-1.5 6.5a2.5 2.5 0 0 0 5 0c0-2.5-1.5-4-1.5-6.5'/%3E%3Cpath d='M7 18h10'/%3E%3C/svg%3E"); }

@keyframes hhFade {
 from { opacity: 0; transform: translateY(-4px); }
 to { opacity: 1; transform: none; }
}

/* Hero — full bleed */
.hh-hero {
 position: relative;
 min-height: min(88vh, 760px);
 display: flex;
 align-items: flex-end;
 color: var(--hh-white);
 overflow: hidden;
}
.hh-hero__bg {
 position: absolute;
 inset: 0;
 overflow: hidden;
}
.hh-hero__img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 72% center;
 transform: scale(1.04);
 animation: hhHeroDrift 22s ease-in-out infinite alternate;
}
.hh-hero__bg::after {
 content: "";
 position: absolute;
 inset: 0;
 background:
 linear-gradient(105deg, rgba(18, 12, 8, 0.78) 0%, rgba(18, 12, 8, 0.42) 42%, rgba(18, 12, 8, 0.12) 68%, rgba(255, 130, 45, 0.18) 100%);
 pointer-events: none;
}
@keyframes hhHeroDrift {
 from { transform: scale(1.04) translate(0, 0); }
 to { transform: scale(1.08) translate(-1.2%, 0.8%); }
}
.hh-hero__content {
 position: relative;
 z-index: 1;
 padding: 5rem 0 4.5rem;
 max-width: 720px;
 margin-left: max(0px, calc((100% - var(--hh-max)) / 2));
 width: min(var(--hh-max), calc(100% - 40px));
 animation: hhRise 0.8s var(--hh-ease) both;
}
@keyframes hhRise {
 from { opacity: 0; transform: translateY(18px); }
 to { opacity: 1; transform: none; }
}
.hh-hero__brand {
 font-family: var(--hh-sans);
 font-size: 0.95rem;
 font-weight: 400;
 letter-spacing: 0.06em;
 margin: 0 0 1rem;
 color: #ffd2b3;
}
.hh-hero h1 {
 font-size: clamp(3rem, 8vw, 5.5rem);
 color: var(--hh-white);
 margin: 0 0 1rem;
 line-height: 0.95;
}
.hh-hero__lead {
 font-size: 1.15rem;
 color: rgba(255, 255, 255, 0.88);
 max-width: 28rem;
 margin: 0 0 1.75rem;
}
.hh-hero__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
}

/* Sections */
.hh-section {
 padding: 4.5rem 0;
}
.hh-section--tint {
 background: var(--hh-paper-2);
}
.hh-section__head { margin-bottom: 2rem; }
.hh-section__head--row {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 1rem;
 flex-wrap: wrap;
}
.hh-section__more { margin-top: 2rem; }

.hh-page-hero {
 padding: 3.5rem 0 2rem;
 background:
 linear-gradient(180deg, var(--hh-orange-soft), var(--hh-paper));
 border-bottom: 1px solid var(--hh-line);
}
.hh-page-hero h1 {
 font-size: clamp(2rem, 4vw, 3rem);
 margin-bottom: 0.35rem;
}

/* Story */
.hh-story__grid {
 display: grid;
 grid-template-columns: 1.2fr 0.8fr;
 gap: 3rem;
 align-items: center;
}
.hh-story__panel {
 background: var(--hh-orange);
 color: var(--hh-white);
 padding: 2.25rem;
 border-radius: var(--hh-radius-lg);
 position: relative;
 overflow: hidden;
}
.hh-story__panel::before {
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 width: 120px;
 height: 120px;
 background: rgba(255, 255, 255, 0.18);
 clip-path: polygon(100% 0, 0 0, 100% 100%);
 opacity: 0.9;
}
.hh-story__stat-label {
 position: relative;
 font-family: var(--hh-latin);
 font-size: 0.8rem;
 font-weight: 400;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.85);
 margin: 0 0 0.75rem;
}
.hh-story__stat {
 position: relative;
 font-family: var(--hh-display);
 font-size: 2rem;
 font-weight: 800;
 line-height: 1.15;
 margin: 0 0 1rem;
}

/* Steps — Haspero 4 stages */
.hh-steps {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1.25rem;
 counter-reset: none;
 list-style: none;
 padding: 0;
 margin: 0;
}
.hh-steps__item {
 background: var(--hh-white);
 border: 1px solid var(--hh-line);
 border-top: 3px solid var(--hh-orange);
 padding: 1.5rem 1.25rem;
 border-radius: var(--hh-radius);
 overflow: hidden;
 transition: transform var(--hh-ease), box-shadow var(--hh-ease);
}
.hh-steps__item:hover {
 transform: translateY(-4px);
 box-shadow: 0 16px 32px rgba(255, 130, 45, 0.14);
}
.hh-steps__num {
 display: block;
 font-family: var(--hh-latin);
 font-size: 0.75rem;
 font-weight: 400;
 letter-spacing: 0.05em;
 font-stretch: normal;
 color: var(--hh-orange);
 margin-bottom: 0.75rem;
}
.hh-steps__media {
 display: block;
 width: calc(100% + 2.5rem);
 margin: -1.5rem -1.25rem 1rem;
 aspect-ratio: 16 / 10;
 object-fit: cover;
 background: var(--hh-paper-2);
}
.hh-steps__item h3 {
 font-size: 1.1rem;
 margin-bottom: 0.5rem;
}
.hh-steps__item p {
 margin: 0;
 color: var(--hh-muted);
 font-size: 0.92rem;
}

/* Chips */
.hh-chip-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 0.65rem;
}
.hh-chip {
 display: inline-flex;
 padding: 0.7rem 1.1rem;
 background: var(--hh-white);
 border: 1px solid var(--hh-line);
 border-radius: 999px;
 text-decoration: none;
 font-weight: 600;
 color: var(--hh-ink);
 transition: border-color var(--hh-ease), color var(--hh-ease), background var(--hh-ease);
}
.hh-chip:hover {
 border-color: var(--hh-orange);
 color: var(--hh-orange);
 background: var(--hh-orange-soft);
}

/* Cards — interaction containers only */
.hh-card-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.25rem;
}
.hh-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hh-card {
 display: flex;
 flex-direction: column;
 background: var(--hh-white);
 border: 1px solid var(--hh-line);
 border-radius: var(--hh-radius);
 overflow: hidden;
 text-decoration: none;
 color: inherit;
 transition: transform var(--hh-ease), border-color var(--hh-ease), box-shadow var(--hh-ease);
}
.hh-card:hover {
 transform: translateY(-3px);
 border-color: var(--hh-orange);
 box-shadow: 0 14px 28px rgba(255, 130, 45, 0.14);
 color: inherit;
}
.hh-card__media {
 display: block;
 aspect-ratio: 16 / 10;
 background:
 linear-gradient(135deg, #ff9a52 0%, #ff822d 60%, #e86f1c 120%);
 background-size: cover;
 background-position: center;
 overflow: hidden;
}
.hh-card__media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.hh-card__media--case {
 background:
 linear-gradient(90deg, #fff3ea 50%, #ff822d 50%);
}
.hh-card__body {
 display: flex;
 flex-direction: column;
 gap: 0.4rem;
 padding: 1.25rem;
 flex: 1;
}
.hh-card__body h3 {
 font-size: 1.05rem;
 margin: 0;
}
.hh-card__body p {
 margin: 0;
 color: var(--hh-muted);
 font-size: 0.9rem;
 flex: 1;
}
.hh-card__more {
 margin-top: 0.75rem;
 font-size: 0.85rem;
 font-weight: 700;
 color: var(--hh-orange);
}

/* Booking preview */
.hh-booking-preview__grid {
 display: grid;
 grid-template-columns: 1.1fr 0.9fr;
 gap: 2.5rem;
 align-items: start;
}
.hh-checklist {
 margin: 1.25rem 0 0;
 padding: 0;
}
.hh-checklist li {
 position: relative;
 padding-left: 1.4rem;
 margin-bottom: 0.5rem;
 font-weight: 600;
}
.hh-checklist li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.45em;
 width: 0.55rem;
 height: 0.55rem;
 border-radius: 50%;
 background: var(--hh-orange);
}
.hh-booking-box {
 background: var(--hh-white);
 border: 1px solid var(--hh-line);
 border-top: 4px solid var(--hh-orange);
 border-radius: var(--hh-radius);
 padding: 1.75rem;
 display: grid;
 gap: 0.75rem;
}
.hh-booking-box__note {
 margin: 0;
 color: var(--hh-muted);
 font-size: 0.92rem;
}
.hh-booking-box__meta {
 margin: 0.5rem 0 0;
 font-size: 0.85rem;
 color: var(--hh-muted);
}

/* CTA band */

/* Footer */
.hh-footer {
 background: var(--hh-white);
 color: var(--hh-ink-soft);
 padding: 3.5rem 0 2rem;
 font-size: 0.92rem;
 border-top: 1px solid var(--hh-line);
}
.hh-footer a { color: var(--hh-ink-soft); text-decoration: none; }
.hh-footer a:hover { color: var(--hh-orange); }
.hh-footer .hh-brand__en { color: var(--hh-muted); margin: 0; }
.hh-footer .hh-brand__zh {
 color: var(--hh-ink);
 font-size: 1.35rem;
 margin: 0.2rem 0 0.75rem;
}
.hh-footer__logo {
 display: block;
 width: auto;
 height: 48px;
 max-width: 220px;
 margin: 0 0 0.85rem;
}
.hh-footer__grid {
 display: grid;
 grid-template-columns: 1.3fr 1fr 1fr 1fr;
 gap: 2rem;
 margin-bottom: 2.5rem;
}
.hh-footer__title {
 color: var(--hh-orange);
 font-weight: 800;
 margin: 0 0 0.85rem;
 font-size: 0.95rem;
}
.hh-footer__grid ul li + li { margin-top: 0.4rem; }
.hh-footer__meta { margin: 0.35rem 0; font-size: 0.88rem; }
.hh-footer__legal {
 border-top: 1px solid var(--hh-line);
 padding-top: 1.25rem;
 margin: 0;
 font-size: 0.8rem;
 color: var(--hh-muted);
}

/* Content helpers */
.hh-prose { max-width: 42rem; }
.hh-prose .hh-btn { text-decoration: none; margin-top: 0.5rem; }
.hh-content-split {
 display: grid;
 grid-template-columns: 1fr 280px;
 gap: 2.5rem;
 align-items: start;
}
.hh-side-cta {
 background: var(--hh-orange-soft);
 border: 1px solid #ffd2b3;
 border-top: 3px solid var(--hh-orange);
 border-radius: var(--hh-radius);
 padding: 1.5rem;
 display: grid;
 gap: 0.75rem;
 position: sticky;
 top: 96px;
}
.hh-side-cta__title {
 font-family: var(--hh-display);
 font-weight: 800;
 font-size: 1.15rem;
 margin: 0;
}
.hh-side-cta p { margin: 0; color: var(--hh-ink-soft); font-size: 0.92rem; }

.hh-case__compare {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.75rem;
 margin-bottom: 2rem;
}
.hh-case__slot {
 aspect-ratio: 4 / 3;
 background: var(--hh-orange-soft);
 border: 1px solid var(--hh-line);
 border-radius: var(--hh-radius);
 display: grid;
 place-items: center;
 color: var(--hh-muted);
 font-family: var(--hh-latin);
 font-weight: 400;
 letter-spacing: 0.05em;
}
.hh-case__slot--after { background: var(--hh-orange); color: rgba(255, 255, 255, 0.92); border-color: var(--hh-orange); }

.hh-faq { display: grid; gap: 0.75rem; max-width: 48rem; }
.hh-faq__item {
 background: var(--hh-white);
 border: 1px solid var(--hh-line);
 border-radius: var(--hh-radius-sm);
 padding: 1rem 1.15rem;
}
.hh-faq__item summary {
 font-weight: 700;
 cursor: pointer;
 list-style: none;
}
.hh-faq__item summary::-webkit-details-marker { display: none; }
.hh-faq__item[open] summary { color: var(--hh-orange); margin-bottom: 0.5rem; }
.hh-faq__item p { margin: 0; color: var(--hh-ink-soft); }

.hh-booking-layout {
 display: grid;
 grid-template-columns: 1fr 280px;
 gap: 2rem;
 align-items: start;
}
.hh-form {
 background: var(--hh-white);
 border: 1px solid var(--hh-line);
 border-radius: var(--hh-radius);
 padding: 1.75rem;
 display: grid;
 gap: 1.5rem;
}
.hh-form fieldset {
 border: 0;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 0.85rem;
}
.hh-form legend {
 font-family: var(--hh-sans);
 font-weight: 400;
 letter-spacing: 0.04em;
 font-size: 1.05rem;
 margin-bottom: 0.35rem;
 color: var(--hh-orange);
}
.hh-form label {
 display: grid;
 gap: 0.35rem;
 font-size: 0.9rem;
 font-weight: 600;
}
.hh-form input,
.hh-form select,
.hh-form textarea {
 font: inherit;
 padding: 0.7rem 0.8rem;
 border: 1px solid var(--hh-line);
 border-radius: var(--hh-radius);
 background: var(--hh-paper);
 color: var(--hh-ink);
}
.hh-form input:focus,
.hh-form select:focus,
.hh-form textarea:focus {
 outline: 2px solid var(--hh-orange);
 outline-offset: 1px;
 border-color: var(--hh-orange);
}
.hh-form__hint {
 margin: 0;
 font-size: 0.85rem;
 font-weight: 400;
 color: var(--hh-muted);
}

.hh-contact-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 2rem;
}
.hh-map-placeholder {
 min-height: 320px;
 background:
 linear-gradient(135deg, var(--hh-paper-2), var(--hh-orange-soft)),
 repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(255, 130, 45, 0.08) 24px, rgba(255, 130, 45, 0.08) 25px);
 border: 1px solid var(--hh-line);
 border-radius: var(--hh-radius);
 display: grid;
 place-items: center;
 font-family: var(--hh-display);
 font-weight: 800;
 color: var(--hh-orange);
 letter-spacing: 0.08em;
}

/* Mobile */
@media (max-width: 960px) {
 .hh-steps { grid-template-columns: 1fr 1fr; }
 .hh-card-grid,
 .hh-card-grid--3 { grid-template-columns: 1fr 1fr; }
 .hh-story__grid,
 .hh-booking-preview__grid,
 .hh-content-split,
 .hh-booking-layout,
 .hh-contact-grid,
 .hh-footer__grid {
 grid-template-columns: 1fr;
 }
 .hh-menu-btn { display: block; }
 .hh-header__nav {
 display: none;
 position: absolute;
 left: 0;
 right: 0;
 top: 100%;
 background: var(--hh-white);
 border-bottom: 1px solid var(--hh-line);
 flex-direction: column;
 align-items: stretch;
 padding: 1rem 1.25rem 1.5rem;
 max-height: min(80vh, 640px);
 overflow: auto;
 }
 .hh-header__nav.is-open { display: flex; }
 .hh-nav__list { flex-direction: column; align-items: stretch; }
 .hh-nav__item--mega { position: static; }
 .hh-mega {
 position: static;
 display: none;
 width: auto;
 max-width: none;
 left: auto;
 right: auto;
 box-shadow: none;
 border: 0;
 border-top: 0;
 padding: 0.35rem 0 0.55rem 0.35rem;
 background: #faf7f2;
 border-radius: 12px;
 animation: none;
 }
 .hh-mega::before { display: none; }
 .hh-mega__inner {
 display: block;
 width: auto;
 max-width: none;
 padding: 0.25rem 0;
 }
 .hh-mega__inner--split {
 display: grid;
 grid-template-columns: 1fr;
 max-width: none;
 }
 .hh-mega--care .hh-mega__col {
 min-width: 0;
 max-width: none;
 padding: 0.45rem 0.75rem 0.55rem;
 }
 .hh-mega__col + .hh-mega__col {
 border-left: 0;
 border-top: 1px solid rgba(138, 110, 78, 0.18);
 margin-top: 0.15rem;
 padding-top: 0.65rem;
 }
 .hh-mega__foot {
 padding: 0.65rem 0.75rem 0.85rem;
 }
 .hh-nav__item--mega.is-open > .hh-mega,
 .hh-nav__item--mega.is-mega-open > .hh-mega { display: block; }
 .hh-nav__item--mega:focus-within > .hh-mega { display: none; }
 .hh-nav__item--mega.is-open:focus-within > .hh-mega { display: block; }
 .hh-header__actions { flex-wrap: wrap; }
}

@media (max-width: 640px) {
 .hh-steps,
 .hh-card-grid,
 .hh-card-grid--3 { grid-template-columns: 1fr; }
 .hh-hero { min-height: 78vh; }
 .hh-hero__content { padding: 4rem 0 3rem; }
 .hh-case__compare { grid-template-columns: 1fr; }
}

/* —— Split header (mockup) —— */
.hh-header--split {
 background: #fff;
 border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 backdrop-filter: none;
}
.hh-header__bar--split {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: center;
 min-height: 78px;
 gap: 0.75rem;
}
.hh-nav--left {
 justify-self: start;
}
.hh-nav--left .hh-nav__link {
 font-size: 0.88rem;
 font-weight: 500;
 color: #2a2a2a;
 padding: 0.55rem 0.55rem;
}
.hh-nav__link.is-active { color: var(--hh-orange); }
.hh-brand--center {
 justify-self: center;
 flex-direction: column;
 gap: 0.15rem;
 text-align: center;
 margin-bottom: -18px;
 z-index: 2;
}
.hh-brand__mark-img {
 width: 52px;
 height: 52px;
 object-fit: contain;
 display: block;
 margin: 0 auto;
}
.hh-brand__stack {
 display: flex;
 flex-direction: column;
 line-height: 1.05;
}
.hh-brand--center .hh-brand__zh {
 font-family: var(--hh-sans);
 font-size: 1.05rem;
 font-weight: 800;
 color: var(--hh-orange);
 letter-spacing: 0.04em;
}
.hh-brand--center .hh-brand__en {
 font-family: var(--hh-latin);
 font-size: 0.62rem;
 font-weight: 600;
 letter-spacing: 0.14em;
 color: var(--hh-orange);
}
.hh-header--split .hh-header__nav {
 justify-self: end;
 gap: 0.85rem;
}
.hh-header__text-link {
 font-size: 0.88rem;
 font-weight: 500;
 color: #2a2a2a;
 text-decoration: none;
 white-space: nowrap;
}
.hh-header__text-link:hover { color: var(--hh-orange); }
.hh-nav--mobile-only { display: none; }

/* —— Home hero (mockup) —— */
/* Sticky booking bar hidden on homepage for now — no bottom clearance needed */
.hh-home { padding-bottom: 0; }

/* Homepage: hide sticky orange booking bar (預約免費頭皮檢測) for now */
.hh-home .hh-sticky-book {
 display: none !important;
 visibility: hidden !important;
 pointer-events: none !important;
}
.hh-hero-home {
 position: relative;
 background: var(--hh-paper-2);
 padding: 2.5rem 0 3.5rem;
 overflow: hidden;
}
.hh-hero-home::after {
 content: "";
 position: absolute;
 right: -8%;
 top: 10%;
 width: 42%;
 height: 80%;
 background:
 radial-gradient(ellipse at 60% 40%, rgba(255, 130, 45, 0.08), transparent 60%),
 radial-gradient(ellipse at 80% 70%, rgba(0, 0, 0, 0.04), transparent 55%);
 pointer-events: none;
}
.hh-hero-home__grid {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: minmax(140px, 0.9fr) minmax(320px, 1.4fr) auto;
 gap: 1.5rem 1.25rem;
 align-items: end;
 min-height: min(72vh, 640px);
}
.hh-hero-home__eyebrow {
 margin: 0 0 1.1rem;
 color: var(--hh-ink-soft);
 font-size: 0.95rem;
 font-weight: 400;
 letter-spacing: 0.04em;
}
.hh-hero-home__title {
 display: flex;
 flex-direction: column;
 gap: 0.12em;
 margin: 0;
 padding: 0;
 border: 0;
 font-family: var(--hh-serif);
 font-weight: 300;
 font-size: clamp(2.45rem, 4.6vw, 3.55rem);
 line-height: 1.18;
 letter-spacing: 0.14em;
 color: var(--hh-ink);
}
.hh-hero-home__title-line { display: block; }
.hh-hero-home__how {
 display: inline-flex;
 align-items: center;
 gap: 0.45rem;
 margin-top: 3.5rem;
 color: var(--hh-ink);
 font-size: 0.92rem;
 font-weight: 500;
 text-decoration: none;
}
.hh-hero-home__how:hover { color: var(--hh-orange); }
.hh-hero-home__dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--hh-orange);
}
.hh-hero-home__arrow { color: var(--hh-orange); font-size: 1.1rem; }
.hh-hero-home__stage {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding-bottom: 0.5rem;
}
.hh-hero-home__cluster {
 position: relative;
 width: min(100%, 460px);
 aspect-ratio: 1.05 / 1;
 margin: 0 auto 1.35rem;
}
.hh-hero-home__shot {
 position: absolute;
 margin: 0;
 overflow: hidden;
 border-radius: 28px;
 box-shadow: 0 18px 40px rgba(40, 24, 12, 0.12);
 background: #ddd;
}
.hh-hero-home__shot img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.hh-hero-home__shot--men {
 width: 46%;
 aspect-ratio: 3 / 4;
 left: 4%;
 top: 0;
 z-index: 2;
}
.hh-hero-home__shot--women {
 width: 48%;
 aspect-ratio: 3 / 4;
 right: 2%;
 top: 4%;
 z-index: 3;
}
.hh-hero-home__shot--care {
 width: 58%;
 aspect-ratio: 4 / 3;
 left: 21%;
 bottom: 0;
 z-index: 4;
}
.hh-hero-home__gates {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 justify-content: center;
}
.hh-hero-home__tagline {
 margin: 0.9rem 0 0;
 font-size: 0.84rem;
 color: var(--hh-muted);
 letter-spacing: 0.02em;
 text-align: center;
}
.hh-hero-home__social {
 align-self: end;
 justify-self: end;
 background: var(--hh-orange);
 color: #fff;
 border-radius: 16px;
 padding: 0.85rem 1rem 0.95rem;
 min-width: 148px;
 box-shadow: 0 12px 28px rgba(255, 130, 45, 0.28);
 margin-bottom: 0.5rem;
}
.hh-hero-home__social-label {
 margin: 0 0 0.65rem;
 font-size: 0.78rem;
 font-weight: 600;
 letter-spacing: 0.02em;
}
.hh-hero-home__social-list {
 display: flex;
 gap: 0.55rem;
 align-items: center;
}
.hh-hero-home__social-list a {
 display: grid;
 place-items: center;
 width: 28px;
 height: 28px;
 color: #fff;
 border: 1.5px solid rgba(255, 255, 255, 0.75);
 border-radius: 50%;
 text-decoration: none;
}
.hh-hero-home__social-list a:hover {
 background: rgba(255, 255, 255, 0.15);
 color: #fff;
}

/* Landing pages */
.hh-landing__hero {
 display: grid;
 grid-template-columns: 1.15fr 0.85fr;
 gap: 2rem;
 align-items: center;
}
.hh-landing__visual {
 border-radius: 28px;
 overflow: hidden;
 box-shadow: 0 16px 36px rgba(40, 24, 12, 0.1);
}
.hh-landing__visual img {
 width: 100%;
 height: 100%;
 max-height: 520px;
 object-fit: cover;
}
.hh-page-hero--landing { padding-bottom: 1rem; }

/* Sticky booking bar */
.hh-sticky-book {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 60;
 background: var(--hh-orange);
 color: #fff;
 box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12);
 opacity: 1;
 transform: translateY(0);
 transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s ease;
 visibility: visible;
 pointer-events: auto;
}
.hh-sticky-book.is-faded {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translateY(10px);
}
@media (prefers-reduced-motion: reduce) {
 .hh-sticky-book {
 transition: none;
 }
}
.hh-sticky-book__inner {
 width: min(var(--hh-max), calc(100% - 48px));
 max-width: var(--hh-max);
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1.25rem 1.75rem;
 min-height: 64px;
 padding: 0.65rem 0;
 box-sizing: border-box;
}
.hh-sticky-book__brand {
 display: none !important; /* sticky bar: no logo lockup */
}
.hh-sticky-book__prompt {
 display: inline-flex;
 align-items: center;
 gap: 0.45rem;
 margin: 0;
 min-width: 0;
 font-size: 0.92rem;
 font-weight: 500;
 letter-spacing: 0.02em;
 white-space: nowrap;
 flex: 1 1 auto;
 color: var(--hh-ink);
}
.hh-sticky-book__prompt svg { flex-shrink: 0; }
.hh-sticky-book__addr--short { display: none; }
.hh-sticky-book__form {
 margin-left: 0;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 0.75rem;
 flex-wrap: wrap;
 flex: 0 1 auto;
}
.hh-sticky-book__field {
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 color: #fff;
 font-size: 0.86rem;
}
.hh-sticky-book__field select {
 appearance: none;
 background: transparent;
 border: 0;
 color: #fff;
 font: inherit;
 padding-right: 0.9rem;
 cursor: pointer;
 background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
 background-position: calc(100% - 6px) 55%, calc(100% - 1px) 55%;
 background-size: 5px 5px, 5px 5px;
 background-repeat: no-repeat;
}
.hh-sticky-book__field select option { color: #222; }
.hh-btn--sticky-cta {
 background: var(--hh-orange);
 color: #fff;
 border-color: var(--hh-orange);
 padding: 0.65rem 1.15rem;
 font-weight: 700;
}
.hh-btn--sticky-cta:hover {
 background: var(--hh-orange-deep);
 color: #fff;
 border-color: var(--hh-orange-deep);
 box-shadow: 0 10px 24px rgba(232, 111, 28, 0.28);
}
.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;
}

@media (max-width: 1100px) {
 .hh-hero-home__grid {
 grid-template-columns: 1fr 1.3fr;
 }
 .hh-hero-home__social {
 grid-column: 2;
 justify-self: end;
 }
}

@media (max-width: 960px) {
 .hh-header__bar--split {
 grid-template-columns: auto 1fr auto;
 }
 .hh-nav--left { display: none; }
 .hh-brand--center {
 justify-self: center;
 margin-bottom: 0;
 }
 .hh-nav--mobile-only { display: block; }
 .hh-header--split .hh-header__nav {
 justify-self: stretch;
 }
 .hh-header--split .hh-header__actions {
 margin-top: 0.75rem;
 }
 .hh-landing__hero { grid-template-columns: 1fr; }
 .hh-hero-home__grid {
 grid-template-columns: 1fr;
 min-height: 0;
 gap: 1.75rem;
 }
 .hh-hero-home__copy { order: 1; }
 .hh-hero-home__stage { order: 2; }
 .hh-hero-home__social {
 order: 3;
 justify-self: start;
 grid-column: auto;
 }
 .hh-hero-home__how { margin-top: 1.5rem; }
 .hh-sticky-book__form { gap: 0.35rem; }
 .hh-sticky-book__field:nth-child(1),
 .hh-sticky-book__field:nth-child(2) { display: none; }
}

@media (max-width: 640px) {
 .hh-hero-home__cluster {
 width: 100%;
 max-width: 340px;
 }
 .hh-hero-home__shot { border-radius: 20px; }
 .hh-sticky-book__inner { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation: none !important;
 transition: none !important;
 }
}


/* Supporting visual pair */
.hh-visual-split {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem;
}
.hh-visual-split__img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 border-radius: var(--hh-radius);
}
@media (max-width: 720px) {
 .hh-visual-split { grid-template-columns: 1fr; }
}

/* ===== Site chrome 0.4 — Haspero-near fonts, atelier header/hero, booking, footer ===== */

:root {
 --hh-orange: #ff822d;
 --hh-orange-deep: #e86f1c;
 --hh-orange-soft: #fff3ea;
 --hh-bronze: #8a6a45;
 --hh-ink: #2a221c;
 --hh-ink-soft: #5a5048;
 --hh-muted: #8a8076;
 --hh-paper: #f7f4ef;
 --hh-paper-2: #f1ece5;
 --hh-cream: #faf7f2;
 --hh-taupe: #b5aa9a;
 --hh-white: #ffffff;
 --hh-line: #e8e0d6;
 --hh-dark: #ff822d;
 --hh-max: 1180px;
 --hh-latin: "Poppins", "Noto Sans TC", sans-serif;
 --hh-display: "Noto Serif TC", "Songti TC", serif;
 --hh-serif: "Noto Serif TC", "Songti TC", serif;
 --hh-sans: "Noto Sans TC", "Noto Sans HK", "PingFang TC", "Microsoft JhengHei", sans-serif;
 --hh-num: "Poppins", "Noto Sans TC", sans-serif;
 --hh-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
 font-family: var(--hh-sans);
 font-weight: 400;
 background: var(--hh-cream);
 color: var(--hh-ink);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
 font-family: var(--hh-serif);
 font-weight: 500;
 letter-spacing: 0.04em;
 color: var(--hh-ink);
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}

/* Sticky-bar clearance lives on body.hh-home only, so other pages do not keep an empty strip. */

/* —— Atelier header: logo left, tabs + CTA right —— */
.hh-header--atelier,
.hh-header--split {
 background: rgba(250, 247, 242, 0.96);
 border-bottom: 1px solid rgba(42, 34, 28, 0.06);
 backdrop-filter: blur(10px);
}
.hh-header__bar--logo-left {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 min-height: 72px;
 width: min(var(--hh-max), calc(100% - 48px));
 max-width: var(--hh-max);
 margin-inline: auto;
 box-sizing: border-box;
}
.hh-brand--left {
 display: inline-flex;
 align-items: center;
 text-decoration: none;
 flex-shrink: 0;
 z-index: 5;
}
.hh-brand__logo-img,
.hh-brand--left .hh-brand__logo-img {
 display: block;
 width: auto;
 height: 44px;
 max-width: min(168px, 42vw);
 object-fit: contain;
 filter: none !important;
}
.hh-brand--left .hh-brand__mark-img,
.hh-brand__mark-img {
 width: 44px;
 height: 44px;
 object-fit: contain;
 filter: none !important;
}
.hh-brand--left .hh-brand__stack {
 display: flex;
 flex-direction: column;
 line-height: 1.05;
 padding-top: 1px;
}
.hh-brand--left .hh-brand__zh {
 font-family: var(--hh-serif);
 font-size: 1.02rem;
 font-weight: 500;
 color: var(--hh-bronze);
 letter-spacing: 0.16em;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}
.hh-brand--left .hh-brand__en {
 font-family: var(--hh-latin);
 font-size: 0.55rem;
 font-weight: 500;
 letter-spacing: 0.2em;
 color: var(--hh-muted);
}
.hh-header--atelier .hh-header__nav {
 display: flex;
 align-items: center;
 gap: 0.35rem;
 margin-left: auto;
}
.hh-nav--desktop .hh-nav__list {
 display: flex;
 align-items: center;
 gap: 0.05rem;
}
.hh-header--atelier .hh-nav__link,
.hh-header--split .hh-nav__link {
 font-family: var(--hh-sans);
 font-size: 0.8rem;
 font-weight: 400;
 letter-spacing: 0.12em;
 color: var(--hh-ink);
 padding: 0.5rem 0.55rem;
 background: transparent;
 -webkit-font-smoothing: antialiased;
}
.hh-header--atelier .hh-nav__link:hover,
.hh-nav__item--mega.is-mega-open > .hh-nav__link {
 color: var(--hh-bronze);
}
.hh-btn--outline-ink,
.hh-header__cta {
 background: transparent !important;
 color: var(--hh-ink) !important;
 border: 1px solid rgba(42, 34, 28, 0.55) !important;
 border-radius: 999px !important;
 font-weight: 400 !important;
 letter-spacing: 0.06em;
 box-shadow: none !important;
 padding: 0.55rem 1.1rem !important;
 white-space: nowrap;
}
.hh-btn--outline-ink:hover,
.hh-header__cta:hover {
 background: var(--hh-orange-soft) !important;
 border-color: var(--hh-orange) !important;
 color: var(--hh-orange-deep) !important;
 box-shadow: 0 6px 16px rgba(232, 111, 28, 0.12);
}
.hh-mega__note {
 margin: 0.85rem 0 0;
 font-size: 0.78rem;
 line-height: 1.55;
 color: var(--hh-muted);
 font-weight: 300;
}
/* legacy split center brand hidden if leftover markup appears */
.hh-nav--left,
.hh-nav--right-desktop { display: none; }
.hh-header__bar--split .hh-nav--left { display: none; }

/* —— Atelier hero —— */
.hh-hero-home--atelier {
 --hh-hero-paper: #fcfaf7;
 --hh-hero-paper-soft: #fffcf9;
 position: relative;
 isolation: isolate;
 background-color: var(--hh-hero-paper);
 /* Static luxe marble full-bleed; wash lives on ::after. */
 background-image: url("../images/hero/hero-marble-luxe.webp");
 background-size: cover;
 background-position: center 40%;
 background-repeat: no-repeat;
 padding: 1.25rem 0 1.5rem;
 overflow: hidden;
 min-height: 0;
 display: flex;
 flex-direction: column;
 box-sizing: border-box;
}
.hh-home .hh-hero-home--atelier {
 margin-top: -78px;
 padding-top: calc(1.15rem + 78px);
 padding-bottom: clamp(1.1rem, 2.2vh, 1.75rem);
 /* Full first viewport; portraits scale with vh so marble does not leave a hollow band before VIP. */
 min-height: 100svh;
 min-height: 100dvh;
}
.hh-hero-home--atelier::before {
 content: "";
 position: absolute;
 inset: 0;
 z-index: 1;
 pointer-events: none;
 opacity: 0.12;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23d9d0c4' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M-20 80c60 20 90-30 150-10s90 40 140 10 100-20 160 20'/%3E%3Cpath d='M-10 210c50-30 110 10 160-10s95-35 150 5 110 25 140-15'/%3E%3Cpath d='M40 340c70-10 100 30 170 10s110-40 160-5'/%3E%3C/g%3E%3C/svg%3E");
 background-size: 420px 420px;
 mix-blend-mode: soft-light;
}
/* Soft paper wash for copy readability — light enough that marble glow / shafts stay visible. */
.hh-hero-home--atelier::after {
 content: "";
 position: absolute;
 inset: 0;
 right: auto;
 top: auto;
 width: auto;
 height: auto;
 z-index: 1;
 pointer-events: none;
 background: linear-gradient(100deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 250, 244, 0.10) 42%, rgba(255, 248, 240, 0.02) 100%);
}
.hh-hero-home--atelier > .hh-wrap {
 position: relative;
 z-index: 2;
 flex: 1 1 auto;
 /* Keep content on the shared .hh-wrap rail — marble stays full-bleed on the section. */
 width: min(var(--hh-max), calc(100% - 48px));
 max-width: var(--hh-max);
 margin-inline: auto;
 align-self: center;
 display: grid;
 align-content: center;
 min-height: 0;
 box-sizing: border-box;
}
.hh-hero-home__atelier {
 display: grid;
 grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
 gap: clamp(1.5rem, 2.8vw, 2.75rem);
 align-items: center;
 min-height: 0;
 padding-right: 0;
}
.hh-home .hh-hero-home--atelier .hh-hero-home__atelier {
 /* Fill the content box of the 100svh hero so left copy + portraits sit in one immersive plane. */
 min-height: calc(100svh - 78px - 2.6rem);
 min-height: calc(100dvh - 78px - 2.6rem);
}
@media (max-width: 960px) {
 .hh-hero-home--atelier {
 background-image: url("../images/hero/hero-marble-luxe-mobile.webp");
 }
 .hh-hero-home--atelier::after {
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 250, 244, 0.08) 100%);
 }
 .hh-home .hh-hero-home--atelier {
 margin-top: -72px;
 padding-top: calc(1rem + 72px);
 padding-bottom: 1.25rem;
 min-height: 100svh;
 min-height: 100dvh;
 }
 .hh-home .hh-hero-home--atelier .hh-hero-home__atelier {
 /* Stacked: let content size the band; avoid forcing empty marble under short tiles. */
 min-height: 0;
 }
}
.hh-hero-home--atelier .hh-hero-home__copy {
 position: relative;
 max-width: 34rem;
 padding-left: 0;
 animation: hhRise 0.8s var(--hh-ease) both;
}
.hh-hero-home--atelier .hh-hero-home__eyebrow {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin: 0 0 1.55rem;
 color: var(--hh-ink-soft);
 font-family: var(--hh-sans);
 font-size: 0.95rem;
 font-weight: 400;
 letter-spacing: 0.2em;
}
.hh-hero-home--atelier .hh-hero-home__eyebrow::before {
 content: "";
 display: block;
 width: 1.875rem; /* 30px */
 height: 1px;
 background: color-mix(in srgb, var(--hh-orange) 72%, transparent);
 flex-shrink: 0;
}
.hh-hero-home--atelier .hh-hero-home__title {
 display: block;
 margin: 0;
 padding: 0;
 border: 0;
 font-family: var(--hh-serif);
 font-weight: 300;
 font-size: clamp(2.15rem, 3.6vw, 3.15rem);
 line-height: 1.28;
 letter-spacing: 0.12em;
 color: var(--hh-ink);
 white-space: nowrap;
}
.hh-hero-home__title-phrase {
 display: inline;
}
.hh-hero-home__title-phrase--ink {
 color: var(--hh-ink);
}
.hh-hero-home__title-phrase--warm {
 color: color-mix(in srgb, var(--hh-ink) 52%, var(--hh-orange) 48%);
}
.hh-hero-home__title-comma {
 color: var(--hh-ink);
 font-weight: 300;
}
.hh-hero-home--atelier .hh-hero-home__lede {
 margin: 1.55rem 0 1.35rem;
 max-width: 32rem;
 font-size: 1.05rem;
 font-weight: 300;
 line-height: 1.9;
 letter-spacing: 0.03em;
 color: var(--hh-ink-soft);
}
.hh-hero-home__actions {
 position: relative;
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 align-items: center;
 padding-top: 1rem;
}
.hh-hero-home__actions::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 2rem; /* 32px */
 height: 1px;
 background: color-mix(in srgb, var(--hh-orange) 68%, transparent);
}
.hh-hero-home__action {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.85rem;
 min-height: 2.85rem;
 padding: 0.72rem 1.35rem;
 border: 1px solid var(--hh-ink);
 border-radius: 2px;
 background: transparent;
 color: var(--hh-ink);
 font-family: var(--hh-sans);
 font-size: 0.72rem;
 font-weight: 400;
 letter-spacing: 0.18em;
 line-height: 1.2;
 text-decoration: none;
 transition:
 background 0.35s var(--hh-ease),
 color 0.35s var(--hh-ease),
 border-color 0.35s var(--hh-ease),
 box-shadow 0.35s var(--hh-ease);
}
.hh-hero-home__action:hover {
 text-decoration: none;
}
.hh-hero-home__action-label {
 display: inline-block;
}
.hh-hero-home__action-arrow {
 position: relative;
 display: block;
 width: 1.05rem;
 height: 1px;
 background: currentColor;
 flex-shrink: 0;
 transition: transform 0.35s var(--hh-ease), background 0.35s var(--hh-ease);
}
.hh-hero-home__action-arrow::after {
 content: "";
 position: absolute;
 top: 50%;
 right: 0;
 width: 0.38rem;
 height: 0.38rem;
 border-right: 1px solid currentColor;
 border-top: 1px solid currentColor;
 transform: translateY(-50%) rotate(45deg);
}
.hh-hero-home__action:hover .hh-hero-home__action-arrow {
 transform: translateX(0.28rem);
}
.hh-hero-home__action--primary {
 background: var(--hh-ink);
 border-color: var(--hh-ink);
 color: #faf7f2;
}
.hh-hero-home__action--primary:hover {
 background: var(--hh-orange);
 border-color: var(--hh-orange);
 color: #fff;
 box-shadow: 0 12px 28px rgba(255, 130, 45, 0.28);
}
.hh-hero-home__action--ghost {
 background: transparent;
 border-color: color-mix(in srgb, var(--hh-ink) 42%, transparent);
 color: var(--hh-ink);
}
.hh-hero-home__action--ghost .hh-hero-home__action-arrow {
 background: var(--hh-orange);
}
.hh-hero-home__action--ghost .hh-hero-home__action-arrow::after {
 border-color: var(--hh-orange);
}
.hh-hero-home__action--ghost:hover {
 background: var(--hh-orange-soft);
 border-color: var(--hh-orange);
 color: var(--hh-orange-deep);
 box-shadow: 0 8px 20px rgba(232, 111, 28, 0.12);
}
.hh-hero-home__action--ghost:hover .hh-hero-home__action-arrow {
 background: var(--hh-orange-deep);
}
.hh-hero-home__action--ghost:hover .hh-hero-home__action-arrow::after {
 border-color: var(--hh-orange-deep);
}
.hh-hero-home--atelier .hh-hero-home__gates {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 justify-content: flex-start;
 max-width: none;
 margin-bottom: 1.5rem;
}
.hh-hero-home--atelier .hh-hero-home__gate {
 flex: 0 1 auto;
 min-width: 148px;
 padding: 0.7rem 1.2rem;
 background: transparent;
 border: 1px solid rgba(138, 106, 69, 0.45);
 border-radius: 999px;
 text-align: left;
}
.hh-hero-home--atelier .hh-hero-home__gate:hover {
 background: rgba(255, 255, 255, 0.65);
 transform: translateY(-1px);
 color: inherit;
}
.hh-hero-home--atelier .hh-hero-home__gate-title {
 font-family: var(--hh-sans);
 font-size: 0.88rem;
 font-weight: 400;
 letter-spacing: 0.12em;
 color: var(--hh-bronze);
}
.hh-hero-home--atelier .hh-hero-home__gate-desc {
 font-size: 0.7rem;
 font-weight: 300;
 letter-spacing: 0.04em;
 color: var(--hh-muted);
}
.hh-hero-home--atelier .hh-hero-home__how {
 display: inline-flex;
 align-items: center;
 gap: 0.45rem;
 color: var(--hh-ink-soft);
 font-size: 0.86rem;
 font-weight: 300;
 letter-spacing: 0.08em;
 text-decoration: none;
}
.hh-hero-home--atelier .hh-hero-home__how:hover { color: var(--hh-bronze); }
.hh-hero-home__dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--hh-bronze);
}

.hh-hero-home--atelier .hh-hero-home__stage {
 position: relative;
 display: flex;
 align-items: center;
 align-self: stretch;
 width: 100%;
 min-height: 0;
 animation: hhRise 0.95s var(--hh-ease) 0.1s both;
}
.hh-hero-home__split {
 display: grid;
 grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
 gap: 0.7rem;
 align-items: end;
 width: 100%;
 min-height: 0;
}
.hh-hero-home__panel {
 position: relative;
 display: block;
 overflow: hidden;
 text-decoration: none;
 background: #e6dfd5;
 border-radius: 2px;
 outline: none;
 box-shadow: none;
 width: 100%;
 min-width: 0;
}
.hh-hero-home__panel-stack {
 position: absolute;
 inset: 0;
 display: block;
 width: 100%;
 height: 100%;
}
.hh-hero-home__panel-img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: opacity 1.05s ease, transform 1.05s ease;
}
.hh-hero-home__panel-img--base {
 opacity: 1;
 z-index: 1;
}
.hh-hero-home__panel-img--hover {
 opacity: 0;
 z-index: 2;
}
.hh-hero-home__panel:hover .hh-hero-home__panel-img,
.hh-hero-home__panel:focus-visible .hh-hero-home__panel-img,
.hh-hero-home__panel.is-hover .hh-hero-home__panel-img {
 transform: scale(1.03);
}
.hh-hero-home__panel:hover .hh-hero-home__panel-img--hover,
.hh-hero-home__panel:focus-visible .hh-hero-home__panel-img--hover,
.hh-hero-home__panel.is-hover .hh-hero-home__panel-img--hover {
 opacity: 1;
}
.hh-hero-home__panel:hover .hh-hero-home__panel-img--base,
.hh-hero-home__panel:focus-visible .hh-hero-home__panel-img--base,
.hh-hero-home__panel.is-hover .hh-hero-home__panel-img--base {
 opacity: 0;
}
.hh-hero-home__panel--men {
 height: clamp(320px, 62svh, 620px);
}
.hh-hero-home__panel--women {
 height: clamp(400px, 78svh, 760px);
}
.hh-hero-home__panel-cap {
 position: absolute;
 left: 1rem;
 bottom: 1rem;
 z-index: 3;
 padding: 0.35rem 0.75rem;
 background: rgba(251, 247, 242, 0.9);
 color: var(--hh-bronze);
 font-size: 0.72rem;
 font-weight: 300;
 letter-spacing: 0.18em;
}
@media (prefers-reduced-motion: reduce) {
 .hh-hero-home__panel-img { transition: none; }
 .hh-hero-home__panel:hover .hh-hero-home__panel-img,
 .hh-hero-home__panel:focus-visible .hh-hero-home__panel-img,
 .hh-hero-home__panel.is-hover .hh-hero-home__panel-img {
 transform: none;
 }
 .hh-hero-home__panel-img--hover,
 .hh-hero-home__panel:hover .hh-hero-home__panel-img--hover,
 .hh-hero-home__panel:focus-visible .hh-hero-home__panel-img--hover,
 .hh-hero-home__panel.is-hover .hh-hero-home__panel-img--hover {
 opacity: 0 !important;
 }
 .hh-hero-home__panel-img--base,
 .hh-hero-home__panel:hover .hh-hero-home__panel-img--base,
 .hh-hero-home__panel:focus-visible .hh-hero-home__panel-img--base,
 .hh-hero-home__panel.is-hover .hh-hero-home__panel-img--base {
 opacity: 1 !important;
 }
}

/* Sticky bar — white mark, no bleach */


/* Encyclopedia path (4 steps) — brand terracotta + soft pattern */
.hh-path {
 --hh-path-orange: #ff822d;
 --hh-path-orange-deep: #e86f1c;
 position: relative;
 isolation: isolate;
 background:
 linear-gradient(160deg, #ff9a52 0%, #ff822d 42%, #e86f1c 100%);
 color: #fff;
 padding: 4.75rem 0 5rem;
 overflow: hidden;
}
.hh-path::before {
 content: "";
 position: absolute;
 inset: 0;
 z-index: 0;
 pointer-events: none;
 opacity: 0.22;
 background-image:
 radial-gradient(ellipse 70% 50% at 12% 18%, rgba(255, 236, 214, 0.35), transparent 55%),
 radial-gradient(ellipse 55% 45% at 88% 72%, rgba(255, 210, 170, 0.22), transparent 60%),
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M0 40c20 0 20 20 40 20s20-20 40-20 20 20 40 20'/%3E%3Cpath d='M0 80c20 0 20 20 40 20s20-20 40-20 20 20 40 20'/%3E%3Ccircle cx='20' cy='20' r='1.2' fill='%23ffffff' fill-opacity='0.18' stroke='none'/%3E%3Ccircle cx='70' cy='55' r='1' fill='%23ffffff' fill-opacity='0.14' stroke='none'/%3E%3Ccircle cx='100' cy='30' r='1.1' fill='%23ffffff' fill-opacity='0.16' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
 background-size: auto, auto, 120px 120px;
}
.hh-path > .hh-wrap {
 position: relative;
 z-index: 1;
}
.hh-path__head {
 margin-bottom: 2.5rem;
 max-width: 38rem;
}
.hh-path__head .hh-kicker {
 color: rgba(255, 255, 255, 0.78);
 font-weight: 300;
 letter-spacing: 0.2em;
}
.hh-path__head h2 {
 color: #fff;
 font-weight: 300;
 letter-spacing: 0.08em;
}
.hh-path__head .hh-lede {
 color: rgba(255, 255, 255, 0.9);
 font-weight: 300;
}
.hh-path__grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 list-style: none;
 margin: 0;
 padding: 0;
}
.hh-path__item {
 position: relative;
 display: flex;
 flex-direction: column;
 padding: 0 1.35rem 4.25rem;
 border-right: 1px solid rgba(255, 255, 255, 0.28);
 min-height: 260px;
}
.hh-path__item:first-child { padding-left: 0; }
.hh-path__item:last-child { border-right: 0; padding-right: 0; }
.hh-path__item h3 {
 color: #fff;
 font-size: 1.15rem;
 font-weight: 400;
 letter-spacing: 0.06em;
 margin: 0.65rem 0 0.55rem;
}
.hh-path__item p {
 margin: 0;
 font-size: 0.88rem;
 font-weight: 300;
 line-height: 1.7;
 color: rgba(255, 255, 255, 0.92);
}
.hh-path__step {
 display: flex;
 align-items: baseline;
 gap: 0.35rem;
}
.hh-path__step-label {
 font-family: var(--hh-latin);
 font-size: 0.65rem;
 letter-spacing: 0.16em;
 opacity: 0.8;
}
.hh-path__step-num {
 font-family: var(--hh-latin);
 font-size: 1.65rem;
 font-weight: 300;
 letter-spacing: 0.04em;
}
.hh-path__icon {
 position: absolute;
 left: 50%;
 bottom: 0.35rem;
 transform: translateX(-50%);
 width: 56px;
 height: 56px;
 color: #fff;
 opacity: 1;
}
.hh-path__more {
 margin: 2rem 0 0;
}
.hh-path__more .hh-link,
.hh-link--on-dark {
 color: #fff !important;
 background-image: linear-gradient(currentColor, currentColor) !important;
 background-size: 0 1px !important;
 background-position: 0 100%;
 background-repeat: no-repeat;
 font-weight: 400;
 letter-spacing: 0.04em;
}
.hh-path__more .hh-link:hover,
.hh-path__more .hh-link:focus-visible,
.hh-link--on-dark:hover,
.hh-link--on-dark:focus-visible {
 color: #fff !important;
 background-size: 100% 1px !important;
}

/* Booking panel */
.hh-book-panel {
 display: grid;
 grid-template-columns: 1.15fr 0.85fr;
 gap: 2rem;
 align-items: start;
}
.hh-book-panel__title {
 font-family: var(--hh-serif);
 font-weight: 400;
 letter-spacing: 0.06em;
 margin: 0 0 1.25rem;
}
.hh-book-form__step {
 border: 0;
 margin: 0 0 1.35rem;
 padding: 0;
}
.hh-book-form__step legend {
 font-size: 0.82rem;
 font-weight: 500;
 letter-spacing: 0.06em;
 margin-bottom: 0.75rem;
 color: var(--hh-bronze);
}
.hh-req { color: var(--hh-muted); font-weight: 300; }
.hh-book-form__stack,
.hh-book-form__row3,
.hh-book-form__row2 {
 display: grid;
 gap: 0.65rem;
 margin-bottom: 0.65rem;
}
.hh-book-form__row3 { grid-template-columns: repeat(3, 1fr); }
.hh-book-form__row2 { grid-template-columns: 1fr 1fr; }
.hh-book-field input,
.hh-book-field select,
.hh-book-field textarea {
 width: 100%;
 border: 1px solid var(--hh-line);
 background: #fff;
 padding: 0.75rem 0.9rem;
 font: inherit;
 font-weight: 300;
 border-radius: 2px;
}
.hh-book-form__hint,
.hh-book-form__terms {
 font-size: 0.78rem;
 color: var(--hh-muted);
 font-weight: 300;
 line-height: 1.6;
}
.hh-book-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.45rem;
 margin-bottom: 0.75rem;
}
.hh-book-chip {
 cursor: pointer;
}
.hh-book-chip input { position: absolute; opacity: 0; pointer-events: none; }
.hh-book-chip span {
 display: inline-block;
 padding: 0.45rem 0.85rem;
 border: 1px solid var(--hh-line);
 border-radius: 999px;
 font-size: 0.8rem;
 font-weight: 300;
 letter-spacing: 0.04em;
 color: var(--hh-ink-soft);
 background: #fff;
}
.hh-book-chip input:checked + span {
 border-color: var(--hh-bronze);
 color: var(--hh-bronze);
 background: var(--hh-orange-soft);
}
.hh-book-rewards {
 background: #fff;
 border: 1px solid var(--hh-line);
 padding: 1.35rem;
}
.hh-book-rewards__title {
 margin: 0 0 0.35rem;
 font-family: var(--hh-serif);
 font-weight: 400;
 color: var(--hh-bronze);
}
.hh-book-rewards__lead {
 margin: 0 0 1rem;
 font-size: 0.86rem;
 font-weight: 300;
 color: var(--hh-muted);
}
.hh-book-rewards__grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.75rem;
}
.hh-book-reward {
 position: relative;
 background: var(--hh-cream);
 padding: 0.55rem;
}
.hh-book-reward img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 display: block;
}
.hh-book-reward p {
 margin: 0.45rem 0.55rem 0;
 font-size: 0.84rem;
 font-weight: 500;
 color: var(--hh-ink);
 line-height: 1.35;
}
.hh-book-reward small {
 font-weight: 300;
 color: var(--hh-muted);
}
.hh-book-reward__badge {
 position: absolute;
 top: 0.75rem;
 left: 0.75rem;
 z-index: 1;
 background: var(--hh-bronze);
 color: #fff;
 font-size: 0.65rem;
 letter-spacing: 0.08em;
 padding: 0.2rem 0.45rem;
}

/* Editorial footer — airy four columns; plain text links, no button chrome */
.hh-footer--editorial {
 background: #f8f5f1;
 color: var(--hh-ink-soft);
 padding: clamp(3.75rem, 7vw, 5.75rem) 0 clamp(2.25rem, 4vw, 3.25rem);
}
.hh-footer__grid--editorial {
 display: grid;
 grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr) minmax(0, 1.15fr);
 gap: clamp(2.25rem, 4vw, 3.5rem) clamp(2rem, 4.5vw, 3.75rem);
 align-items: start;
 margin-bottom: 0;
}
.hh-footer__brand-col,
.hh-footer__group-col,
.hh-footer__nav,
.hh-footer__contact-col {
 min-width: 0;
 max-width: 100%;
}
.hh-footer--editorial .hh-footer__title {
 font-family: var(--hh-sans);
 font-size: 0.72rem;
 font-weight: 400;
 color: var(--hh-taupe);
 letter-spacing: 0.18em;
 text-transform: none;
 margin: 0 0 1.35rem;
}
.hh-footer--editorial ul { list-style: none; margin: 0; padding: 0; }
.hh-footer--editorial .hh-footer__nav ul li + li { margin-top: 0.85rem; }
.hh-footer__group-brands {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 1.15rem; /* ~ letter-unit clear space between lockups */
}
.hh-footer__group-link {
 display: inline-flex;
 align-items: center;
 justify-content: flex-start;
 line-height: 0;
 opacity: 0.92;
 transition: opacity 0.2s ease;
}
.hh-footer__group-link:hover {
 opacity: 1;
 color: inherit;
}
.hh-footer__group-logo {
 display: block;
 height: 2rem; /* 32px unified mark height */
 width: auto;
 max-height: 2rem;
 max-width: min(11.5rem, 100%);
 object-fit: contain;
 object-position: left center;
}
.hh-footer--editorial a {
 color: #6b6158;
 text-decoration: none;
 font-size: 0.92rem;
 font-weight: 300;
 line-height: 1.5;
 border: 0;
 background: none;
 border-radius: 0;
 padding: 0;
 box-shadow: none;
}
.hh-footer--editorial a:hover {
 color: var(--hh-bronze);
 background: none;
 border: 0;
 box-shadow: none;
}
.hh-footer__brand-lockup {
 display: inline-flex;
 align-items: center;
 text-decoration: none;
 margin-bottom: 1.25rem;
}
.hh-footer__logo-img,
.hh-footer__brand-lockup img {
 display: block;
 width: auto;
 height: 52px;
 max-width: min(190px, 72vw);
 object-fit: contain;
 filter: none !important;
}
.hh-footer__brand-lockup strong {
 display: block;
 color: var(--hh-bronze);
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: 1.05rem;
 letter-spacing: 0.12em;
}
.hh-footer__brand-lockup small {
 display: block;
 color: var(--hh-muted);
 font-family: var(--hh-latin);
 letter-spacing: 0.16em;
 font-size: 0.58rem;
 font-weight: 400;
}
.hh-footer__blurb {
 font-size: 0.9rem;
 line-height: 1.75;
 font-weight: 300;
 color: #6b6158;
 margin: 0;
 overflow-wrap: anywhere;
}
.hh-footer__meta {
 margin: 0 0 0.65rem;
 font-size: 0.88rem;
 font-weight: 300;
 line-height: 1.65;
 overflow-wrap: anywhere;
}
.hh-footer__meta + .hh-footer__meta {
 margin-bottom: 1.35rem;
}
.hh-footer__contacts {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 0.85rem;
}
.hh-footer__contact {
 display: grid;
 grid-template-columns: 1.1rem minmax(0, 1fr);
 align-items: center;
 column-gap: 0.75rem;
 margin: 0;
 font-size: 0.9rem;
 font-weight: 300;
 line-height: 1.5;
 color: inherit;
}
.hh-footer__contact-icon {
 width: 1.1rem;
 height: 1.1rem;
 display: grid;
 place-items: center;
 border: 0;
 border-radius: 0;
 background: none;
 box-shadow: none;
 color: #8a8076;
 flex-shrink: 0;
}
.hh-footer__contact-icon svg {
 display: block;
 width: 15px;
 height: 15px;
}
.hh-footer__contact-text {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.2rem 0.35rem;
 min-width: 0;
}
.hh-footer__contact-text a {
 color: inherit;
 text-decoration: none;
 border: 0;
 background: none;
 padding: 0;
 border-radius: 0;
 box-shadow: none;
}
.hh-footer__contact-text a:hover {
 color: var(--hh-bronze, #8a5a3b);
 background: none;
}
.hh-footer__contact-sep {
 color: #b0a69c;
 margin: 0 0.05rem;
}
.hh-footer__social {
 display: flex;
 gap: 1rem;
 margin: 1.5rem 0 0;
 list-style: none;
 padding: 0;
}
.hh-footer__social a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: auto;
 height: auto;
 border: 0;
 border-radius: 0;
 background: none;
 box-shadow: none;
 padding: 0;
 color: #8a8076;
}
.hh-footer__bottom {
 margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
 padding-top: clamp(1.5rem, 2.5vw, 2rem);
 border-top: 1px solid #e6ddd3;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: baseline;
 gap: 1rem 2rem;
}
.hh-footer__legal,
.hh-footer__legal-links {
 margin: 0;
 font-size: 0.78rem;
 font-weight: 300;
 color: #8a8076;
}
.hh-footer__legal-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.hh-footer__credit {
 flex: 1 0 100%;
 margin: 0.85rem 0 0;
 text-align: right;
 font-size: 0.7rem;
 font-weight: 300;
 line-height: 1.55;
 letter-spacing: 0.02em;
 color: #a89e94;
}
.hh-footer--editorial .hh-footer__credit a {
 color: inherit;
 font-size: inherit;
 font-weight: inherit;
 text-decoration: none;
}
.hh-footer--editorial .hh-footer__credit a:hover {
 color: #8a8076;
}

@media (max-width: 1100px) {
 .hh-book-panel { grid-template-columns: 1fr; }
 .hh-book-rewards { order: -1; }
 .hh-path__grid { grid-template-columns: 1fr 1fr; }
 .hh-path__item:nth-child(2) { border-right: 0; }
 .hh-path__item:nth-child(1),
 .hh-path__item:nth-child(2) {
 border-bottom: 1px solid rgba(255,255,255,0.28);
 margin-bottom: 1rem;
 padding-bottom: 1.5rem;
 }
}

.hh-nav--desktop { display: block; }
.hh-nav--mobile-only { display: none; }
.hh-nav--left,
.hh-nav--right-desktop { display: none !important; }

@media (max-width: 960px) {
 .hh-header__bar--logo-left {
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: center;
 min-height: 64px;
 }
 .hh-brand--left { grid-column: 1; justify-self: start; }
 .hh-brand__logo-img,
 .hh-brand--left .hh-brand__logo-img {
 height: 40px;
 max-width: min(148px, 58vw);
 }
 .hh-menu-btn {
 display: block;
 grid-column: 2;
 justify-self: end;
 }
 .hh-nav--desktop { display: none !important; }
 .hh-nav--mobile-only { display: block; }
 .hh-header--atelier .hh-header__nav {
 display: none;
 position: absolute;
 left: 0;
 right: 0;
 top: 100%;
 background: rgba(250, 247, 242, 0.98);
 border-bottom: 1px solid var(--hh-line);
 padding: 0.75rem 1.25rem 1.25rem;
 flex-direction: column;
 align-items: stretch;
 margin-left: 0;
 z-index: 40;
 }
 .hh-header--atelier .hh-header__nav.is-open {
 display: flex;
 }
 .hh-header--atelier .hh-header__actions {
 margin-top: 0.75rem;
 }
 .hh-hero-home__atelier {
 grid-template-columns: 1fr;
 min-height: 0;
 gap: 1.35rem;
 padding-right: 0;
 align-items: stretch;
 }
 .hh-hero-home--atelier .hh-hero-home__title {
 font-size: clamp(1.55rem, 5.8vw, 2.2rem);
 letter-spacing: 0.08em;
 white-space: nowrap;
 }
 .hh-hero-home__panel {
 outline: none;
 box-shadow: none;
 }
 .hh-hero-home__split {
 min-height: 0;
 grid-template-columns: 1fr 1fr;
 }
 .hh-hero-home__panel--men,
 .hh-hero-home__panel--women {
 /* Keep first screen readable: copy stays above the fold; portraits share remaining band. */
 height: clamp(200px, 38svh, 300px);
 }
 .hh-hero-home--atelier .hh-hero-home__eyebrow {
 margin-bottom: 1rem;
 }
 .hh-hero-home--atelier .hh-hero-home__lede {
 margin: 1.05rem 0 1rem;
 }
 .hh-book-form__row3,
 .hh-book-form__row2 { grid-template-columns: 1fr; }
 .hh-footer__grid--editorial {
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: 2.5rem 2rem;
 }
 .hh-footer__brand-col { grid-column: 1 / -1; order: 0; }
 .hh-footer__credit { text-align: left; }
}

@media (max-width: 640px) {
 .hh-brand__logo-img,
 .hh-brand--left .hh-brand__logo-img {
 height: 36px;
 max-width: min(136px, 62vw);
 }
 .hh-footer__logo-img,
 .hh-footer__brand-lockup img {
 height: 42px;
 max-width: min(160px, 72vw);
 }
 .hh-path__grid { grid-template-columns: 1fr; }
 .hh-path__item {
 border-right: 0;
 border-bottom: 1px solid rgba(255,255,255,0.28);
 min-height: 0;
 }
 .hh-path__item:last-child { border-bottom: 0; }
 .hh-book-rewards__grid { grid-template-columns: 1fr 1fr; }
 .hh-footer__grid--editorial { grid-template-columns: 1fr; }
 .hh-hero-home--atelier .hh-hero-home__title {
 font-size: clamp(1.45rem, 6.2vw, 1.95rem);
 letter-spacing: 0.06em;
 white-space: normal;
 }
 .hh-hero-home--atelier .hh-hero-home__eyebrow {
 font-size: 0.88rem;
 letter-spacing: 0.18em;
 }
 .hh-hero-home--atelier .hh-hero-home__lede {
 font-size: 0.98rem;
 }
 .hh-hero-home__actions {
 gap: 0.6rem;
 }
 .hh-hero-home__action {
 flex: 1 1 auto;
 min-width: calc(50% - 0.35rem);
 padding: 0.7rem 0.95rem;
 font-size: 0.68rem;
 letter-spacing: 0.14em;
 }
 .hh-hero-home__split { gap: 0.45rem; }
}

@media (prefers-reduced-motion: reduce) {
 .hh-hero-home__copy,
 .hh-hero-home__stage,
 .hh-hero-home__panel img { animation: none !important; transition: none !important; }
}

/* Science / technology page */
.hh-science__intro {
 display: grid;
 grid-template-columns: 1.35fr 0.85fr;
 gap: 2.5rem 3rem;
 align-items: start;
}
.hh-science__aside {
 background: var(--hh-white);
 border: 1px solid var(--hh-line);
 border-radius: var(--hh-radius-lg);
 padding: 1.75rem 1.5rem;
}
.hh-science__aside-label {
 font-family: var(--hh-latin);
 font-size: 0.72rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--hh-orange);
 margin: 0 0 1rem;
}
.hh-science__aside-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 0.9rem;
}
.hh-science__aside-list li {
 font-size: 0.95rem;
 line-height: 1.55;
 padding-bottom: 0.9rem;
 border-bottom: 1px solid var(--hh-line);
}
.hh-science__aside-list li:last-child {
 border-bottom: 0;
 padding-bottom: 0;
}
.hh-science__pillars {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
}
.hh-science__pillar {
 background: var(--hh-white);
 border: 1px solid var(--hh-line);
 border-radius: var(--hh-radius-lg);
 padding: 1.75rem 1.5rem 1.85rem;
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
}
.hh-science__pillar-mark {
 width: 3rem;
 height: 3rem;
 display: grid;
 place-items: center;
 color: var(--hh-orange);
 border: 1px solid var(--hh-line);
 border-radius: 999px;
 background: var(--hh-orange-soft);
}
.hh-science__region {
 margin: 0;
 font-family: var(--hh-latin);
 font-size: 0.72rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--hh-muted, #7a6f66);
}
.hh-science__pillar h3 {
 font-family: var(--hh-display);
 font-size: 1.35rem;
 font-weight: 600;
 line-height: 1.35;
 margin: 0;
}
.hh-science__pillar > p {
 margin: 0;
 font-size: 0.96rem;
 line-height: 1.7;
 color: var(--hh-ink);
}
.hh-science__bullets {
 margin: 0.35rem 0 0;
 padding: 0 0 0 1.1rem;
 display: grid;
 gap: 0.4rem;
}
.hh-science__bullets li {
 font-size: 0.9rem;
 line-height: 1.55;
 color: var(--hh-ink);
}
.hh-science__flow {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
}
.hh-science__flow li {
 border-top: 2px solid var(--hh-orange);
 padding-top: 1.25rem;
}
.hh-science__flow-num {
 display: block;
 font-family: var(--hh-latin);
 font-size: 0.75rem;
 letter-spacing: 0.08em;
 color: var(--hh-orange);
 margin-bottom: 0.5rem;
}
.hh-science__flow h3 {
 font-family: var(--hh-display);
 font-size: 1.2rem;
 margin: 0 0 0.5rem;
}
.hh-science__flow p {
 margin: 0 0 0.65rem;
 font-size: 0.95rem;
 line-height: 1.65;
}
@media (max-width: 960px) {
 .hh-science__intro,
 .hh-science__pillars,
 .hh-science__flow {
 grid-template-columns: 1fr;
 }
}

/* Brand orange CTAs — keep white type on solid pumpkin; outline hover uses soft wash */
.hh-btn--solid {
 color: #fff;
}
.hh-btn--solid:hover,
.hh-btn--solid:active {
 background: var(--hh-orange-deep);
 border-color: var(--hh-orange-deep);
 color: #fff;
 box-shadow: 0 10px 24px rgba(232, 111, 28, 0.28);
}
.hh-btn--outline-orange:hover,
.hh-btn--outline-orange:active {
 background: var(--hh-orange-soft);
 border-color: var(--hh-orange-deep);
 color: var(--hh-orange-deep);
}
.hh-story__panel { color: var(--hh-ink); }
.hh-story__panel .hh-story__stat-label { color: rgba(42, 34, 28, 0.78); }
.hh-story__panel h2,
.hh-story__panel h3,
.hh-story__panel p { color: inherit; }

.hh-path,
.hh-path__head h2,
.hh-path__item h3,
.hh-path__icon { color: var(--hh-ink); }
.hh-path__head .hh-kicker { color: rgba(42, 34, 28, 0.72); font-weight: 400; }
.hh-path__head .hh-lede,
.hh-path__item p { color: rgba(42, 34, 28, 0.86); font-weight: 400; }
.hh-path__item,
.hh-path__item:nth-child(n) { border-color: rgba(42, 34, 28, 0.18); }
.hh-path__more .hh-link,
.hh-path__more .hh-link:hover,
.hh-path .hh-link--on-dark,
.hh-path .hh-link--on-dark:hover { color: var(--hh-ink) !important; }

.hh-sticky-book,
.hh-sticky-book__field,
.hh-sticky-book__field select { color: var(--hh-ink); }
.hh-sticky-book__field select {
 background-image: linear-gradient(45deg, transparent 50%, var(--hh-ink) 50%), linear-gradient(135deg, var(--hh-ink) 50%, transparent 50%);
}
.hh-btn--sticky-cta,
.hh-btn--sticky-cta:hover,
.hh-btn--sticky-cta:active {
 background: var(--hh-ink);
 border-color: var(--hh-ink);
 color: #fff !important;
}
.hh-btn--sticky-cta:hover,
.hh-btn--sticky-cta:active {
 background: #000;
 border-color: #000;
}

/* About Hon's — VIP treatment room (home). Wide half-and-half; still fits 1440×900. */
.hh-vip-about {
 padding: clamp(2.85rem, 5vw, 4rem) 0;
 background: var(--hh-paper);
}
.hh-vip-about__grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: clamp(1.85rem, 2.8vw, 2.85rem);
 align-items: stretch;
}
.hh-vip-about__copy {
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 padding: 0.15rem 0 0;
 min-height: 0;
}
.hh-vip-about__eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 0.7rem;
 margin: 0 0 2.75rem;
 font-size: 0.84rem;
 font-weight: 500;
 letter-spacing: 0.16em;
 color: var(--hh-orange);
}
.hh-vip-about__rule {
 display: inline-block;
 width: 2rem;
 height: 1px;
 background: var(--hh-orange);
}
.hh-vip-about__title {
 margin: 0 0 2.85rem;
 font-family: var(--hh-serif);
 font-size: clamp(1.85rem, 2.35vw, 2.35rem);
 font-weight: 400;
 line-height: 1.42;
 letter-spacing: 0.03em;
 color: var(--hh-ink);
}
.hh-vip-about__title-line { display: block; }
.hh-vip-about__lede {
 margin: 0;
 max-width: 32em;
 font-size: 1.02rem;
 line-height: 2;
 color: var(--hh-ink-soft);
}
.hh-vip-about__body {
 margin: 0;
 font-size: 1.02rem;
 line-height: 1.7;
 color: var(--hh-muted);
}
.hh-vip-about__features {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1rem 1.25rem;
 margin: 3.35rem 0 0;
 padding: 2.15rem 0 0;
 list-style: none;
 border-top: 1px solid var(--hh-line);
 align-items: start;
}
.hh-vip-about__feature {
 display: grid;
 grid-template-rows: auto auto auto;
 align-content: start;
 gap: 0.85rem;
 min-width: 0;
}
.hh-vip-about__feature-num {
 font-family: var(--hh-serif);
 font-size: 0.84rem;
 font-weight: 400;
 letter-spacing: 0.08em;
 line-height: 1.2;
 color: var(--hh-orange);
}
.hh-vip-about__feature-title {
 font-family: var(--hh-serif);
 font-size: 1.02rem;
 font-weight: 500;
 line-height: 1.35;
 min-height: 1.35em;
 color: var(--hh-ink);
}
.hh-vip-about__feature-text {
 font-size: 0.88rem;
 line-height: 1.65;
 color: var(--hh-muted);
}
.hh-vip-about__media {
 position: relative;
 margin: 0;
 min-height: 0;
 height: auto;
 align-self: stretch;
 border-radius: 1.35rem;
 overflow: hidden;
 background: var(--hh-line);
 box-shadow: 0 18px 42px rgba(42, 34, 28, 0.1);
}
.hh-vip-about__img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 42% 72%;
}
.hh-vip-about__caption {
 position: absolute;
 left: 1.05rem;
 bottom: 1.05rem;
 display: flex;
 flex-direction: column;
 gap: 0.12rem;
 max-width: calc(100% - 2.1rem);
 padding: 0.62rem 0.85rem 0.58rem;
 background: rgba(255, 252, 248, 0.94);
 border-radius: 0.8rem;
 box-shadow: 0 8px 22px rgba(42, 34, 28, 0.08);
 backdrop-filter: blur(8px);
}
.hh-vip-about__caption-label {
 font-family: var(--hh-serif);
 font-size: 0.64rem;
 letter-spacing: 0.2em;
 line-height: 1.2;
 text-transform: uppercase;
 color: var(--hh-orange);
}
.hh-vip-about__caption-text {
 font-size: 0.8rem;
 font-weight: 500;
 line-height: 1.35;
 color: var(--hh-ink);
}
@media (max-width: 900px) {
 .hh-vip-about {
 padding: 2.35rem 0 2.6rem;
 }
 .hh-vip-about__grid {
 grid-template-columns: 1fr;
 gap: 1.15rem;
 }
 .hh-vip-about__media {
 order: -1;
 align-self: auto;
 width: 100%;
 min-height: 0;
 height: auto;
 aspect-ratio: 4 / 3;
 }
 .hh-vip-about__copy { padding: 0; }
 .hh-vip-about__eyebrow { margin-bottom: 1rem; }
 .hh-vip-about__title { margin-bottom: 1.15rem; }
 .hh-vip-about__features {
 margin: 1.35rem 0 0;
 padding-top: 1.05rem;
 }
}
@media (max-width: 560px) {
 .hh-vip-about__features {
 grid-template-columns: 1fr;
 gap: 0.55rem;
 }
 .hh-vip-about__feature {
 display: grid;
 grid-template-columns: 2rem 1fr;
 column-gap: 0.4rem;
 row-gap: 0.05rem;
 }
 .hh-vip-about__feature-text { grid-column: 2; }
 .hh-vip-about__caption {
 left: 0.85rem;
 bottom: 0.85rem;
 }
}

/* Full-bleed VIP Spa promo between about + signature */
.hh-promo-video {
 margin: 0;
 padding: 0;
 width: 100%;
 background: var(--hh-paper-2);
 border-block: 1px solid color-mix(in srgb, var(--hh-line) 70%, transparent);
}
.hh-promo-video__frame {
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
 overflow: hidden;
 background: #1a120e;
}
.hh-promo-video__el {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
}
@media (max-width: 720px) {
 .hh-promo-video__frame {
 aspect-ratio: 16 / 9;
 }
}

/* ===== Homepage upgrade 0.5.1 — path/science/signature/cases/booking/sticky (do not edit VIP/hero/header) ===== */

.hh-path--lux {
 background:
 linear-gradient(
 160deg,
 color-mix(in srgb, var(--hh-orange) 72%, #fff) 0%,
 var(--hh-orange) 46%,
 var(--hh-orange-deep) 100%
 );
 padding: clamp(4.5rem, 8vw, 6.25rem) 0;
}
.hh-path--lux .hh-path__head {
 max-width: 42rem;
 margin-bottom: 2.75rem;
}
.hh-path--lux .hh-path__item {
 min-height: 280px;
 padding-bottom: 4.5rem;
}
.hh-path--lux .hh-path__item h3 {
 font-family: var(--hh-serif);
 font-weight: 500;
 letter-spacing: 0.04em;
}
@media (max-width: 960px) {
 .hh-path--lux .hh-path__grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1.5rem 0;
 }
 .hh-path--lux .hh-path__item {
 min-height: 0;
 padding: 0 1rem 2.5rem;
 border-right: 0;
 border-bottom: 1px solid rgba(42, 34, 28, 0.14);
 }
 .hh-path--lux .hh-path__item:nth-child(odd) { padding-left: 0; }
 .hh-path--lux .hh-path__item:nth-child(even) { padding-right: 0; border-left: 1px solid rgba(42, 34, 28, 0.14); }
 .hh-path--lux .hh-path__item:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 600px) {
 .hh-path--lux .hh-path__grid { grid-template-columns: 1fr; }
 .hh-path--lux .hh-path__item,
 .hh-path--lux .hh-path__item:nth-child(even) {
 border-left: 0;
 border-right: 0;
 border-bottom: 1px solid rgba(42, 34, 28, 0.14);
 padding: 0 0 1.75rem;
 }
 .hh-path--lux .hh-path__item:last-child { border-bottom: 0; padding-bottom: 0; }
}

.hh-science-strip {
 padding: clamp(2.75rem, 5vw, 3.75rem) 0;
 background: var(--hh-cream, #faf7f2);
 border-top: 1px solid var(--hh-line);
 border-bottom: 1px solid var(--hh-line);
}
.hh-science-strip__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1.75rem 2.5rem;
 flex-wrap: wrap;
}
.hh-science-strip__copy {
 flex: 1 1 18rem;
 max-width: 40rem;
}
.hh-science-strip__copy h2 {
 margin: 0 0 0.65rem;
 font-family: var(--hh-serif);
 font-weight: 400;
 font-size: clamp(1.35rem, 2.4vw, 1.85rem);
 letter-spacing: 0.06em;
 line-height: 1.35;
}
.hh-science-strip__copy .hh-lede {
 margin: 0;
 font-size: 0.95rem;
 line-height: 1.8;
}

.hh-section--signature,
.hh-section--cases {
 padding-top: clamp(3.75rem, 7vw, 5.5rem);
 padding-bottom: clamp(3.75rem, 7vw, 5.5rem);
}
.hh-section--cases .hh-section__head h2 {
 font-family: var(--hh-serif);
 font-weight: 400;
 letter-spacing: 0.05em;
}
.hh-card--signature {
 transition: transform 280ms var(--hh-ease), border-color 280ms var(--hh-ease);
}
.hh-card--signature:hover {
 transform: translateY(-3px);
}
.hh-section--cases .hh-card--case .hh-card__body p {
 color: var(--hh-muted);
 font-size: 0.92rem;
}

.hh-booking-preview--panel {
 padding-top: clamp(3.5rem, 6vw, 5rem);
 padding-bottom: clamp(4rem, 7vw, 5.5rem);
 background:
 linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--hh-orange-soft) 55%, #fff) 100%);
}
.hh-book-panel {
 border: 1px solid var(--hh-line);
 background: rgba(255, 255, 255, 0.92);
}
.hh-book-panel__title {
 font-family: var(--hh-serif);
 font-weight: 400;
 letter-spacing: 0.06em;
}
.hh-book-rewards__title {
 font-family: var(--hh-serif);
 font-weight: 400;
 letter-spacing: 0.08em;
}

.hh-sticky-book__prompt {
 font-family: var(--hh-serif);
 letter-spacing: 0.04em;
 font-weight: 500;
}
.hh-sticky-book__form {
 gap: 0.55rem;
}
@media (max-width: 720px) {
 .hh-sticky-book__inner {
 gap: 0.45rem;
 flex-wrap: nowrap;
 }
 .hh-sticky-book__prompt {
 display: inline-flex;
 font-size: clamp(0.68rem, 3.15vw, 0.82rem);
 letter-spacing: 0;
 }
 .hh-sticky-book__addr--full { display: none; }
 .hh-sticky-book__addr--short { display: inline; }
 .hh-sticky-book__form { flex-wrap: nowrap; flex-shrink: 0; }
 .hh-btn--sticky-cta {
 padding: 0.45rem 0.7rem;
 font-size: clamp(0.68rem, 3.15vw, 0.82rem);
 white-space: nowrap;
 }
}

.hh-footer--editorial .hh-footer__blurb {
 max-width: 26rem;
 line-height: 1.75;
}

/* Homepage science strip — shorter band, one glance on desktop */
.hh-science-strip {
 padding: clamp(0.85rem, 1.6vw, 1.2rem) 0;
}
.hh-science-strip__inner {
 flex-wrap: nowrap;
 align-items: center;
 gap: 0.85rem 1.75rem;
}
.hh-science-strip__copy {
 flex: 1 1 auto;
 max-width: none;
 min-width: 0;
}
.hh-science-strip__copy .hh-kicker {
 margin-bottom: 0.28rem;
}
.hh-science-strip__copy h2 {
 margin: 0 0 0.22rem;
 font-size: clamp(1.15rem, 1.65vw, 1.48rem);
 font-weight: 400;
 line-height: 1.35;
 letter-spacing: 0.03em;
}
.hh-science-strip__copy .hh-lede {
 max-width: 46rem;
 font-size: 0.9rem;
 line-height: 1.55;
}
.hh-science-strip .hh-btn {
 flex: 0 0 auto;
 align-self: center;
}
@media (max-width: 760px) {
 .hh-science-strip__inner {
 flex-wrap: wrap;
 align-items: flex-start;
 }
 .hh-science-strip__copy h2 {
 font-size: 1.18rem;
 }
}

/* Homepage signature treatments — editorial cards, same row of three */
.hh-section--signature {
 padding-top: clamp(2.1rem, 3.6vw, 2.85rem);
 padding-bottom: clamp(2.1rem, 3.6vw, 2.85rem);
}
.hh-section--signature .hh-section__head {
 margin-bottom: 1.15rem;
 padding-bottom: 0.85rem;
 border-bottom: 1px solid var(--hh-line);
}
.hh-section--signature .hh-section__head .hh-kicker {
 margin-bottom: 0.4rem;
}
.hh-section--signature .hh-section__head h2 {
 margin-bottom: 0.35rem;
}
.hh-section--signature .hh-section__head .hh-lede {
 margin-bottom: 0;
 font-size: 0.95rem;
 line-height: 1.6;
}
.hh-section--signature .hh-card-grid--3 {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1.35rem 1.25rem;
 align-items: stretch;
}
.hh-section--signature .hh-card--signature {
 background: transparent;
 border: 0;
 border-radius: 0;
 overflow: visible;
 box-shadow: none;
 transform: none;
}
.hh-section--signature .hh-card--signature:hover {
 transform: none;
 border-color: transparent;
 box-shadow: none;
 color: inherit;
}
.hh-section--signature .hh-card__media {
 aspect-ratio: 2.2 / 1;
 border-radius: 2px;
 background: var(--hh-paper-2);
}
.hh-section--signature .hh-card__media img {
 transition: transform 520ms var(--hh-ease);
}
.hh-section--signature .hh-card--signature:hover .hh-card__media img {
 transform: scale(1.03);
}
.hh-section--signature .hh-card__body {
 position: relative;
 z-index: 1;
 gap: 0;
 margin: -1.15rem 0.65rem 0;
 padding: 0.95rem 1.05rem 0.9rem;
 background: var(--hh-white);
 border: 1px solid var(--hh-line);
 box-shadow: 0 10px 22px rgba(42, 34, 28, 0.04);
 transition: border-color 280ms var(--hh-ease), box-shadow 280ms var(--hh-ease);
}
.hh-section--signature .hh-card--signature:hover .hh-card__body {
 border-color: color-mix(in srgb, var(--hh-ink) 22%, var(--hh-line));
 box-shadow: 0 12px 26px rgba(42, 34, 28, 0.07);
}
.hh-sig__eyebrow {
 display: flex;
 align-items: baseline;
 gap: 0.55rem;
 margin: 0 0 0.35rem;
}
.hh-sig__index {
 font-family: var(--hh-serif);
 font-weight: 400;
 font-size: 0.78rem;
 letter-spacing: 0.14em;
 color: var(--hh-muted);
}
.hh-sig__label {
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.12em;
 color: var(--hh-orange);
}
.hh-section--signature .hh-card__body h3 {
 margin: 0;
 font-family: var(--hh-serif);
 font-weight: 400;
 font-size: 1.12rem;
 line-height: 1.35;
 letter-spacing: 0.04em;
}
.hh-sig__rule {
 display: block;
 width: 1.65rem;
 height: 1px;
 margin: 0.5rem 0 0.55rem;
 background: var(--hh-orange);
}
.hh-section--signature .hh-card__body p {
 margin: 0;
 flex: 0 1 auto;
 font-size: 0.86rem;
 line-height: 1.65;
 color: var(--hh-ink-soft);
}
.hh-sig__facts {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.15rem 0;
 margin: 0.7rem 0 0;
 padding: 0.55rem 0 0;
 border-top: 1px solid var(--hh-line);
 list-style: none;
}
.hh-sig__facts li {
 font-size: 0.72rem;
 line-height: 1.45;
 letter-spacing: 0.02em;
 color: var(--hh-ink-soft);
}
.hh-sig__facts li:not(:last-child)::after {
 content: "";
 display: inline-block;
 width: 3px;
 height: 3px;
 margin: 0 0.4rem 0.12rem;
 border-radius: 50%;
 background: var(--hh-taupe, #b5aa9a);
 vertical-align: middle;
}
.hh-section--signature .hh-card__more {
 margin-top: 0.7rem;
 font-weight: 500;
 letter-spacing: 0.08em;
 color: var(--hh-orange);
}
@media (max-width: 860px) {
 .hh-section--signature .hh-card-grid--3 {
 grid-template-columns: 1fr;
 max-width: 34rem;
 }
}
@media (prefers-reduced-motion: reduce) {
 .hh-section--signature .hh-card__media img,
 .hh-section--signature .hh-card--signature:hover .hh-card__media img {
 transition: none;
 transform: none;
 }
}

/* Homepage science strip — shorter band, one glance on desktop */
.hh-science-strip {
 padding: clamp(0.85rem, 1.6vw, 1.2rem) 0;
}
.hh-science-strip__inner {
 flex-wrap: nowrap;
 align-items: center;
 gap: 0.85rem 1.75rem;
}
.hh-science-strip__copy {
 flex: 1 1 auto;
 max-width: none;
 min-width: 0;
}
.hh-science-strip__copy .hh-kicker {
 margin-bottom: 0.28rem;
}
.hh-science-strip__copy h2 {
 margin: 0 0 0.22rem;
 font-size: clamp(1.15rem, 1.65vw, 1.48rem);
 font-weight: 400;
 line-height: 1.35;
 letter-spacing: 0.03em;
}
.hh-science-strip__copy .hh-lede {
 max-width: 46rem;
 font-size: 0.9rem;
 line-height: 1.55;
}
.hh-science-strip .hh-btn {
 flex: 0 0 auto;
 align-self: center;
}
@media (max-width: 760px) {
 .hh-science-strip__inner {
 flex-wrap: wrap;
 align-items: flex-start;
 }
 .hh-science-strip__copy h2 {
 font-size: 1.18rem;
 }
}

/* Homepage signature treatments — editorial cards, same row of three */
.hh-section--signature {
 padding-top: clamp(2.1rem, 3.6vw, 2.85rem);
 padding-bottom: clamp(2.1rem, 3.6vw, 2.85rem);
}
.hh-section--signature .hh-section__head {
 margin-bottom: 1.15rem;
 padding-bottom: 0.85rem;
 border-bottom: 1px solid var(--hh-line);
}
.hh-section--signature .hh-section__head .hh-kicker {
 margin-bottom: 0.4rem;
}
.hh-section--signature .hh-section__head h2 {
 margin-bottom: 0.35rem;
}
.hh-section--signature .hh-section__head .hh-lede {
 margin-bottom: 0;
 font-size: 0.95rem;
 line-height: 1.6;
}
.hh-section--signature .hh-card-grid--3 {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1.35rem 1.25rem;
 align-items: stretch;
}
.hh-section--signature .hh-card--signature {
 background: transparent;
 border: 0;
 border-radius: 0;
 overflow: visible;
 box-shadow: none;
 transform: none;
}
.hh-section--signature .hh-card--signature:hover {
 transform: none;
 border-color: transparent;
 box-shadow: none;
 color: inherit;
}
.hh-section--signature .hh-card__media {
 aspect-ratio: 2.2 / 1;
 border-radius: 2px;
 background: var(--hh-paper-2);
}
.hh-section--signature .hh-card__media img {
 transition: transform 520ms var(--hh-ease);
}
.hh-section--signature .hh-card--signature:hover .hh-card__media img {
 transform: scale(1.03);
}
.hh-section--signature .hh-card__body {
 position: relative;
 z-index: 1;
 gap: 0;
 margin: -1.15rem 0.65rem 0;
 padding: 0.95rem 1.05rem 0.9rem;
 background: var(--hh-white);
 border: 1px solid var(--hh-line);
 box-shadow: 0 10px 22px rgba(42, 34, 28, 0.04);
 transition: border-color 280ms var(--hh-ease), box-shadow 280ms var(--hh-ease);
}
.hh-section--signature .hh-card--signature:hover .hh-card__body {
 border-color: color-mix(in srgb, var(--hh-ink) 22%, var(--hh-line));
 box-shadow: 0 12px 26px rgba(42, 34, 28, 0.07);
}
.hh-sig__eyebrow {
 display: flex;
 align-items: baseline;
 gap: 0.55rem;
 margin: 0 0 0.35rem;
}
.hh-sig__index {
 font-family: var(--hh-serif);
 font-weight: 400;
 font-size: 0.78rem;
 letter-spacing: 0.14em;
 color: var(--hh-muted);
}
.hh-sig__label {
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.12em;
 color: var(--hh-orange);
}
.hh-section--signature .hh-card__body h3 {
 margin: 0;
 font-family: var(--hh-serif);
 font-weight: 400;
 font-size: 1.12rem;
 line-height: 1.35;
 letter-spacing: 0.04em;
}
.hh-sig__rule {
 display: block;
 width: 1.65rem;
 height: 1px;
 margin: 0.5rem 0 0.55rem;
 background: var(--hh-orange);
}
.hh-section--signature .hh-card__body p {
 margin: 0;
 flex: 0 1 auto;
 font-size: 0.86rem;
 line-height: 1.65;
 color: var(--hh-ink-soft);
}
.hh-sig__facts {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.15rem 0;
 margin: 0.7rem 0 0;
 padding: 0.55rem 0 0;
 border-top: 1px solid var(--hh-line);
 list-style: none;
}
.hh-sig__facts li {
 font-size: 0.72rem;
 line-height: 1.45;
 letter-spacing: 0.02em;
 color: var(--hh-ink-soft);
}
.hh-sig__facts li:not(:last-child)::after {
 content: "";
 display: inline-block;
 width: 3px;
 height: 3px;
 margin: 0 0.4rem 0.12rem;
 border-radius: 50%;
 background: var(--hh-taupe, #b5aa9a);
 vertical-align: middle;
}
.hh-section--signature .hh-card__more {
 margin-top: 0.7rem;
 font-weight: 500;
 letter-spacing: 0.08em;
 color: var(--hh-orange);
}
@media (max-width: 860px) {
 .hh-section--signature .hh-card-grid--3 {
 grid-template-columns: 1fr;
 max-width: 34rem;
 }
}
@media (prefers-reduced-motion: reduce) {
 .hh-section--signature .hh-card__media img,
 .hh-section--signature .hh-card--signature:hover .hh-card__media img {
 transition: none;
 transform: none;
 }
}


/* ===== 0.5.4 / 0.5.50 — orange CTAs; prestigious hover (deepen / soft wash, no invert) ===== */

.hh-btn--solid,
.hh-btn--sticky-cta,
.hh-audience .hh-btn--solid {
 background: var(--hh-orange) !important;
 border: 1px solid var(--hh-orange) !important;
 color: #fff !important;
 border-radius: 999px !important;
 font-weight: 600 !important;
 letter-spacing: 0.04em;
 padding: 0.9rem 1.55rem !important;
 box-shadow: none;
 transition:
 background var(--hh-ease),
 color var(--hh-ease),
 border-color var(--hh-ease),
 box-shadow var(--hh-ease),
 transform var(--hh-ease);
}
.hh-btn--solid:hover,
.hh-btn--solid:active,
.hh-btn--sticky-cta:hover,
.hh-btn--sticky-cta:active,
.hh-audience .hh-btn--solid:hover,
.hh-audience .hh-btn--solid:active {
 background: var(--hh-orange-deep) !important;
 border-color: var(--hh-orange-deep) !important;
 color: #fff !important;
 box-shadow: 0 10px 24px rgba(232, 111, 28, 0.28);
}
a.hh-btn--outline-ink:not(.hh-header__cta),
.hh-btn--outline-orange,
.hh-btn--ghost,
.hh-audience .hh-btn--outline-orange,
.hh-audience .hh-btn--ghost {
 background: transparent !important;
 color: var(--hh-orange) !important;
 border: 1px solid var(--hh-orange) !important;
 border-radius: 999px !important;
 font-weight: 600 !important;
 letter-spacing: 0.04em;
 padding: 0.9rem 1.55rem !important;
 box-shadow: none;
 transition:
 background var(--hh-ease),
 color var(--hh-ease),
 border-color var(--hh-ease),
 box-shadow var(--hh-ease),
 transform var(--hh-ease);
}
a.hh-btn--outline-ink:not(.hh-header__cta):hover,
a.hh-btn--outline-ink:not(.hh-header__cta):active,
.hh-btn--outline-orange:hover,
.hh-btn--outline-orange:active,
.hh-btn--ghost:hover,
.hh-btn--ghost:active,
.hh-audience .hh-btn--outline-orange:hover,
.hh-audience .hh-btn--outline-orange:active,
.hh-audience .hh-btn--ghost:hover,
.hh-audience .hh-btn--ghost:active {
 background: var(--hh-orange-soft) !important;
 border-color: var(--hh-orange-deep) !important;
 color: var(--hh-orange-deep) !important;
 box-shadow: 0 8px 20px rgba(232, 111, 28, 0.12);
}

.hh-btn--outline-light {
 color: #fff !important;
 background: transparent !important;
 border-radius: 999px !important;
 font-weight: 600 !important;
 border-color: rgba(255, 255, 255, 0.72) !important;
}
.hh-btn--outline-light:hover,
.hh-btn--outline-light:active {
 background: rgba(255, 130, 45, 0.22) !important;
 border-color: rgba(255, 255, 255, 0.92) !important;
 color: #fff !important;
 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.hh-sticky-book {
 background: #faf7f2;
 color: var(--hh-ink);
 border-top: 1px solid var(--hh-line);
 box-shadow: 0 -10px 28px rgba(42, 34, 28, 0.08);
}
.hh-sticky-book__prompt,
.hh-sticky-book__field,
.hh-sticky-book__field select {
 color: var(--hh-ink);
}
.hh-sticky-book__field select {
 background-image:
 linear-gradient(45deg, transparent 50%, var(--hh-ink) 50%),
 linear-gradient(135deg, var(--hh-ink) 50%, transparent 50%);
}

.hh-path.hh-path--lux {
 background-color: #f7f4ef;
 background-image:
 linear-gradient(180deg, rgba(252, 250, 247, 0.9) 0%, rgba(247, 244, 239, 0.94) 100%),
 url("../images/hero/hero-marble-warm.webp");
 background-size: cover;
 background-position: center;
 color: var(--hh-ink);
 padding: clamp(4.75rem, 8vw, 6.75rem) 0;
}
.hh-path.hh-path--lux::before {
 display: none;
}
.hh-path.hh-path--lux .hh-path__head {
 max-width: 40rem;
 margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.hh-path.hh-path--lux .hh-path__head .hh-kicker {
 display: inline-flex;
 align-items: center;
 gap: 0.75rem;
 margin: 0 0 1rem;
 color: var(--hh-orange);
 font-weight: 500;
 letter-spacing: 0.2em;
}
.hh-path.hh-path--lux .hh-path__head .hh-kicker::before {
 content: "";
 width: 2.25rem;
 height: 1px;
 background: var(--hh-orange);
}
.hh-path.hh-path--lux .hh-path__head h2 {
 margin: 0 0 0.85rem;
 color: var(--hh-ink);
 font-family: var(--hh-serif);
 font-weight: 300;
 letter-spacing: 0.06em;
 line-height: 1.35;
}
.hh-path.hh-path--lux .hh-path__head .hh-lede {
 margin: 0;
 color: var(--hh-ink-soft);
 font-weight: 400;
 line-height: 1.85;
}
.hh-path.hh-path--lux .hh-path__grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 0;
 border-top: 1px solid rgba(42, 34, 28, 0.16);
 border-bottom: 1px solid rgba(42, 34, 28, 0.16);
}
.hh-path.hh-path--lux .hh-path__item {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 0.9rem;
 min-height: 0;
 margin: 0;
 padding: 1.85rem 1.45rem 2rem;
 border-right: 1px solid rgba(42, 34, 28, 0.14);
 border-bottom: 0;
 border-left: 0;
}
.hh-path.hh-path--lux .hh-path__item:last-child {
 border-right: 0;
 padding-right: 1.45rem;
}
.hh-path.hh-path--lux .hh-path__item:first-child {
 padding-left: 1.45rem;
}
.hh-path.hh-path--lux .hh-path__meta {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 0.75rem;
}
.hh-path.hh-path--lux .hh-path__step {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 0.2rem;
}
.hh-path.hh-path--lux .hh-path__step-label {
 color: var(--hh-orange);
 font-size: 0.68rem;
 font-weight: 500;
 letter-spacing: 0.22em;
 opacity: 1;
}
.hh-path.hh-path--lux .hh-path__step-num {
 color: var(--hh-ink);
 font-family: var(--hh-serif);
 font-size: clamp(2.35rem, 3.2vw, 3.1rem);
 font-weight: 300;
 line-height: 0.95;
 letter-spacing: 0.02em;
}
.hh-path.hh-path--lux .hh-path__icon {
 position: static;
 left: auto;
 bottom: auto;
 transform: none;
 width: 58px;
 height: 58px;
 margin: 0.15rem 0 0;
 flex: 0 0 auto;
 color: var(--hh-ink);
 opacity: 0.82;
}
.hh-path.hh-path--lux .hh-path__item h3 {
 margin: 0;
 color: var(--hh-ink);
 font-family: var(--hh-serif);
 font-size: 1.2rem;
 font-weight: 500;
 letter-spacing: 0.04em;
 line-height: 1.4;
}
.hh-path.hh-path--lux .hh-path__item p {
 margin: 0;
 color: var(--hh-ink-soft);
 font-size: 0.94rem;
 font-weight: 400;
 line-height: 1.8;
}
.hh-path.hh-path--lux .hh-path__more {
 margin: 2.25rem 0 0;
}
@media (max-width: 980px) {
 .hh-path.hh-path--lux .hh-path__grid {
 grid-template-columns: 1fr 1fr;
 }
 .hh-path.hh-path--lux .hh-path__item,
 .hh-path.hh-path--lux .hh-path__item:nth-child(even) {
 min-height: 0;
 border-left: 0;
 border-right: 1px solid rgba(42, 34, 28, 0.14);
 border-bottom: 1px solid rgba(42, 34, 28, 0.14);
 padding: 1.6rem 1.25rem 1.75rem;
 }
 .hh-path.hh-path--lux .hh-path__item:nth-child(2n) {
 border-right: 0;
 }
 .hh-path.hh-path--lux .hh-path__item:nth-last-child(-n + 2) {
 border-bottom: 0;
 }
}
@media (max-width: 680px) {
 .hh-path.hh-path--lux .hh-path__grid {
 grid-template-columns: 1fr;
 }
 .hh-path.hh-path--lux .hh-path__item,
 .hh-path.hh-path--lux .hh-path__item:nth-child(even),
 .hh-path.hh-path--lux .hh-path__item:nth-child(2n) {
 border-right: 0;
 border-bottom: 1px solid rgba(42, 34, 28, 0.14);
 padding: 1.5rem 0 1.6rem;
 }
 .hh-path.hh-path--lux .hh-path__item:last-child {
 border-bottom: 0;
 padding-bottom: 0;
 }
}

.hh-booking-preview--panel {
 background: #faf7f2;
}
.hh-book-panel--simple {
 display: block;
 max-width: 40rem;
 margin-inline: auto;
 padding: clamp(2rem, 4.5vw, 3rem) clamp(1.35rem, 4vw, 2.75rem);
 background: rgba(255, 255, 255, 0.92);
 border: 1px solid rgba(42, 34, 28, 0.08);
}
.hh-book-rewards {
 display: none !important;
}
.hh-book-panel--simple .hh-book-panel__title {
 margin: 0 0 0.45rem;
 font-family: var(--hh-serif);
 font-size: clamp(1.7rem, 3vw, 2.15rem);
 font-weight: 400;
 letter-spacing: 0.08em;
 color: var(--hh-ink);
}
.hh-book-form__place {
 margin: 0 0 1.85rem;
 font-size: 0.86rem;
 line-height: 1.6;
 color: var(--hh-muted);
 letter-spacing: 0.02em;
}
.hh-book-panel--simple .hh-book-form__stack {
 display: grid;
 grid-template-columns: 1fr;
 gap: 1.25rem;
 margin: 0 0 1.15rem;
}
.hh-book-panel--simple .hh-book-field {
 display: grid;
 gap: 0.45rem;
}
.hh-book-panel--simple .hh-book-field > span,
.hh-book-form__gender legend {
 font-size: 0.84rem;
 font-weight: 500;
 letter-spacing: 0.06em;
 color: var(--hh-ink-soft);
}
.hh-book-form__gender {
 border: 0;
 margin: 0;
 padding: 0;
}
.hh-book-form__gender legend {
 padding: 0;
 margin: 0 0 0.5rem;
}
.hh-book-panel--simple .hh-book-field input,
.hh-book-panel--simple .hh-book-field select,
.hh-book-panel--simple .hh-book-field textarea {
 width: 100%;
 padding: 0.95rem 1rem;
 border: 1px solid rgba(42, 34, 28, 0.14);
 border-radius: 12px;
 background: #fff;
 color: var(--hh-ink);
 font-weight: 400;
}
.hh-book-panel--simple .hh-book-field textarea {
 min-height: 7.5rem;
 resize: vertical;
}
.hh-book-panel--simple .hh-book-field input:focus,
.hh-book-panel--simple .hh-book-field select:focus,
.hh-book-panel--simple .hh-book-field textarea:focus {
 outline: 2px solid color-mix(in srgb, var(--hh-orange) 40%, #fff);
 border-color: var(--hh-orange);
}
.hh-book-choices {
 display: flex;
 flex-wrap: wrap;
 gap: 0.55rem;
}
.hh-book-choice {
 position: relative;
 cursor: pointer;
}
.hh-book-choice input {
 position: absolute;
 opacity: 0;
 pointer-events: none;
}
.hh-book-choice span {
 display: inline-flex;
 align-items: center;
 min-height: 2.75rem;
 padding: 0.5rem 1.15rem;
 border: 1px solid rgba(42, 34, 28, 0.14);
 border-radius: 999px;
 background: #fff;
 color: var(--hh-ink);
 font-weight: 500;
}
.hh-book-choice input:checked + span {
 border-color: var(--hh-orange);
 background: var(--hh-orange-soft);
 color: var(--hh-orange);
}
.hh-book-choice input:focus-visible + span {
 outline: 2px solid var(--hh-orange);
 outline-offset: 2px;
}
.hh-book-panel--simple .hh-book-form__hint,
.hh-book-panel--simple .hh-book-form__terms {
 font-size: 0.75rem;
 line-height: 1.7;
 color: var(--hh-muted);
}
.hh-book-panel--simple .hh-book-form__hint {
 margin: 0 0 1.35rem;
}
.hh-book-panel--simple .hh-book-form__terms {
 margin: 1rem 0 0;
}

/* Sticky bar: keep the address and the booking button on one line */
.hh-sticky-book .hh-btn--sticky-cta,
.hh-sticky-book .hh-btn--sticky-cta:hover,
.hh-sticky-book .hh-btn--sticky-cta:active {
 padding: 0.62rem 1.05rem !important;
 color: #fff !important;
 white-space: nowrap;
}
@media (max-width: 720px) {
 .hh-sticky-book__inner {
 width: min(var(--hh-max), calc(100% - 24px));
 gap: 0.4rem;
 }
 .hh-sticky-book .hh-btn--sticky-cta,
 .hh-sticky-book .hh-btn--sticky-cta:hover,
 .hh-sticky-book .hh-btn--sticky-cta:active {
 padding: 0.42rem 0.62rem !important;
 font-size: 0.75rem !important;
 letter-spacing: 0 !important;
 }
}

/* ===== 0.5.6 — sticky bar back to brand orange; ink CTA so it stays distinct ===== */
.hh-sticky-book {
 background: var(--hh-orange);
 color: #fff;
 border-top: 0;
 box-shadow: 0 -8px 28px rgba(42, 34, 28, 0.16);
}
.hh-sticky-book__prompt,
.hh-sticky-book__field,
.hh-sticky-book__field select {
 color: #fff;
}
.hh-sticky-book__field select {
 -webkit-text-fill-color: #fff;
 background-image:
 linear-gradient(45deg, transparent 50%, #fff 50%),
 linear-gradient(135deg, #fff 50%, transparent 50%);
}
.hh-sticky-book__field select option {
 color: #222;
 -webkit-text-fill-color: #222;
}
.hh-sticky-book .hh-btn--sticky-cta,
.hh-sticky-book .hh-btn--sticky-cta:hover,
.hh-sticky-book .hh-btn--sticky-cta:active {
 background: var(--hh-ink) !important;
 border-color: var(--hh-ink) !important;
 color: #fff !important;
}
.hh-sticky-book .hh-btn--sticky-cta:hover,
.hh-sticky-book .hh-btn--sticky-cta:active {
 background: #1a120e !important;
 border-color: #1a120e !important;
}

/* ===== 0.5.7 — booking section as one horizontal CTA (desktop); stack on small screens ===== */
.hh-section.hh-booking-preview--panel {
 padding: 0.85rem 0 1.05rem;
 background: #faf7f2;
}
.hh-book-bar {
 display: grid;
 grid-template-columns: max-content minmax(0, 1fr) auto;
 align-items: center;
 gap: 0.75rem 1.1rem;
 margin: 0;
 padding: 0.72rem 0.9rem 0.72rem 1.15rem;
 background: #fff;
 border: 1px solid rgba(42, 34, 28, 0.08);
 border-radius: 16px;
}
.hh-book-bar__lead {
 min-width: 0;
}
.hh-book-bar .hh-book-panel__title {
 margin: 0 0 0.12rem;
 font-family: var(--hh-serif);
 font-size: 1.22rem;
 font-weight: 500;
 letter-spacing: 0.04em;
 line-height: 1.25;
 color: var(--hh-ink);
}
.hh-book-bar .hh-book-form__place {
 margin: 0;
 font-size: 0.75rem;
 line-height: 1.35;
 letter-spacing: 0.01em;
 color: var(--hh-muted);
 white-space: nowrap;
}
.hh-book-bar__fields {
 display: grid;
 grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.25fr);
 gap: 0.5rem;
 min-width: 0;
 align-items: end;
}
.hh-book-bar .hh-book-field {
 display: grid;
 gap: 0.2rem;
 min-width: 0;
}
.hh-book-bar .hh-book-field > span {
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.03em;
 line-height: 1.2;
 color: var(--hh-ink-soft);
 white-space: nowrap;
}
.hh-book-bar .hh-book-field input {
 width: 100%;
 min-width: 0;
 height: 2.45rem;
 padding: 0 0.7rem;
 border: 1px solid rgba(42, 34, 28, 0.14);
 border-radius: 10px;
 background: #fff;
 color: var(--hh-ink);
 font-size: 0.88rem;
 font-weight: 400;
}
.hh-book-bar .hh-book-field input:focus {
 outline: 2px solid color-mix(in srgb, var(--hh-orange) 40%, #fff);
 border-color: var(--hh-orange);
}
.hh-book-bar .hh-book-bar__submit.hh-btn--solid,
.hh-book-bar .hh-book-bar__submit.hh-btn--solid:hover,
.hh-book-bar .hh-book-bar__submit.hh-btn--solid:active {
 align-self: end;
 height: 2.45rem;
 margin: 0;
 padding: 0 1.05rem !important;
 background: var(--hh-orange) !important;
 border: 1px solid var(--hh-orange) !important;
 color: #fff !important;
 border-radius: 999px !important;
 font-weight: 600 !important;
 letter-spacing: 0.02em;
 white-space: nowrap;
 box-shadow: none;
}
.hh-book-bar .hh-book-bar__submit.hh-btn--solid:hover,
.hh-book-bar .hh-book-bar__submit.hh-btn--solid:active {
 background: var(--hh-orange-deep) !important;
 border-color: var(--hh-orange-deep) !important;
 color: #fff !important;
 box-shadow: 0 10px 24px rgba(232, 111, 28, 0.28);
}
@media (max-width: 980px) {
 .hh-book-bar {
 grid-template-columns: 1fr;
 align-items: stretch;
 padding: 0.95rem 1rem 1rem;
 }
 .hh-book-bar .hh-book-form__place,
 .hh-book-bar .hh-book-field > span {
 white-space: normal;
 }
 .hh-book-bar__fields {
 grid-template-columns: 1fr;
 gap: 0.7rem;
 }
 .hh-book-bar .hh-book-bar__submit.hh-btn--solid,
 .hh-book-bar .hh-book-bar__submit.hh-btn--solid:hover,
 .hh-book-bar .hh-book-bar__submit.hh-btn--solid:active {
 width: 100%;
 align-self: stretch;
 }
}

/* ===== 0.5.43 — science spread fits a 1440×900 glance ===== */
.hh-sci-home {
 --hh-sci-header: 72px;
 --hh-sci-bar: 5.5rem;
 padding: 1.15rem 0 1rem;
 background: var(--hh-cream, #faf7f2);
 border-top: 1px solid var(--hh-line);
 border-bottom: 1px solid var(--hh-line);
 color: var(--hh-ink);
}
.hh-sci-home__head {
 width: 100%;
 max-width: none;
 margin: 0 auto 0.75rem;
 text-align: center;
}
.hh-sci-home__head .hh-kicker {
 margin-bottom: 0.28rem;
 color: var(--hh-orange);
}
.hh-sci-home__head h2 {
 margin: 0 auto 0.35rem;
 max-width: 100%;
 font-family: var(--hh-serif);
 font-weight: 400;
 font-size: clamp(1.45rem, 2.05vw, 1.9rem);
 letter-spacing: 0.02em;
 line-height: 1.3;
 color: var(--hh-ink);
 white-space: nowrap;
}
.hh-sci-home__keep {
 white-space: nowrap;
}
.hh-sci-home__lede {
 margin: 0 auto;
 max-width: 40rem;
 color: var(--hh-ink-soft);
 font-size: 0.92rem;
 line-height: 1.55;
}
.hh-sci-home__spread {
 display: grid;
 grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
 grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
 gap: 0.65rem;
 height: min(32rem, calc(100vh - var(--hh-sci-header) - var(--hh-sci-bar) - 11.6rem));
 min-height: 23rem;
 margin: 0;
 padding: 0;
 list-style: none;
}
.hh-sci-home__item {
 min-width: 0;
 min-height: 0;
}
.hh-sci-home__item--italy {
 grid-column: 1;
 grid-row: 1 / span 2;
}
.hh-sci-home__item--spain {
 grid-column: 2;
 grid-row: 1;
}
.hh-sci-home__item--japan {
 grid-column: 2;
 grid-row: 2;
}
.hh-sci-home__card {
 position: relative;
 display: block;
 height: 100%;
 overflow: hidden;
 border-radius: 4px;
 border: 1px solid var(--hh-line);
 background: #efe8df;
 color: var(--hh-ink);
 text-decoration: none;
}
.hh-sci-home__card:hover,
.hh-sci-home__card:focus-visible {
 color: var(--hh-ink);
 text-decoration: none;
}
.hh-sci-home__card:focus-visible {
 outline: 2px solid var(--hh-ink);
 outline-offset: 3px;
}
.hh-sci-home__media {
 position: absolute;
 inset: 0;
 margin: 0;
 overflow: hidden;
 border-radius: 0;
 background: #efe8df;
}
.hh-sci-home__media img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 max-width: none;
 object-fit: cover;
 object-position: center 46%;
 transition: transform 720ms var(--hh-ease);
}
.hh-sci-home__item--italy .hh-sci-home__media img {
 object-position: center 54%;
}
.hh-sci-home__item--spain .hh-sci-home__media img {
 object-position: center 30%;
}
.hh-sci-home__item--japan .hh-sci-home__media img {
 object-position: center 50%;
}
.hh-sci-home__item--japan .hh-sci-home__card {
 border-radius: 2px;
}
.hh-sci-home__card:hover .hh-sci-home__media img,
.hh-sci-home__card:focus-visible .hh-sci-home__media img {
 transform: scale(1.035);
}
.hh-sci-home__copy {
 position: absolute;
 z-index: 1;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 0.48rem 0.95rem 0.55rem;
 border: 0;
 border-top: 1px solid rgba(42, 34, 28, 0.14);
 border-radius: 0;
 box-shadow: none;
 background: #faf7f2;
 color: var(--hh-ink);
}
.hh-sci-home__item--italy .hh-sci-home__copy {
 padding: 0.55rem 1.05rem 0.62rem;
 background: #f7f2ea;
 border-top: 1px solid #a86b4a;
}
.hh-sci-home__item--spain .hh-sci-home__copy {
 background: #f8f4ec;
 border-top: 1px solid #b8894a;
}
.hh-sci-home__item--japan .hh-sci-home__copy {
 padding: 0.55rem 1.05rem 0.6rem;
 background: #fbfaf8;
 border-top: 1px solid rgba(42, 34, 28, 0.22);
}
.hh-sci-home__place {
 display: flex;
 align-items: baseline;
 gap: 0.55rem;
 margin: 0 0 0.12rem;
 line-height: 1;
 text-decoration: none;
}
.hh-sci-home__latin {
 font-family: Poppins, var(--hh-latin), sans-serif;
 font-size: 0.62rem;
 font-weight: 400;
 letter-spacing: 0.22em;
 line-height: 1;
 color: var(--hh-muted);
 text-decoration: none;
}
.hh-sci-home__item--italy .hh-sci-home__latin { color: #8d5340; }
.hh-sci-home__item--spain .hh-sci-home__latin { color: #8a6233; }
.hh-sci-home__item--japan .hh-sci-home__latin {
 color: #6d645c;
 letter-spacing: 0.28em;
}
.hh-sci-home__zh,
.hh-sci-home__card:hover .hh-sci-home__zh,
.hh-sci-home__card:focus-visible .hh-sci-home__zh {
 font-family: var(--hh-serif);
 font-size: 0.75rem;
 font-weight: 500;
 letter-spacing: 0.14em;
 line-height: 1;
 color: var(--hh-orange);
 text-decoration: none;
}
.hh-sci-home__card h3,
.hh-sci-home__card h3:hover {
 margin: 0 0 0.14rem;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: 1.05rem;
 letter-spacing: 0.04em;
 line-height: 1.3;
 color: var(--hh-ink);
 text-decoration: none;
}
.hh-sci-home__item--italy .hh-sci-home__card h3 {
 font-size: 1.22rem;
}
.hh-sci-home__copy p:last-child {
 margin: 0;
 color: var(--hh-ink-soft);
 font-size: 0.875rem;
 line-height: 1.5;
 text-decoration: none;
}
.hh-sci-home__item--italy .hh-sci-home__copy p:last-child {
 max-width: 28rem;
 font-size: 0.9rem;
 line-height: 1.5;
}
.hh-sci-home__cta {
 margin: 0.85rem 0 0;
 text-align: center;
}
.hh-sci-home__more,
.hh-sci-home__more:hover,
.hh-sci-home__more:focus-visible {
 display: inline-block;
 font-family: var(--hh-serif);
 font-size: 0.92rem;
 font-weight: 500;
 letter-spacing: 0.16em;
 line-height: 1.4;
 color: var(--hh-ink);
 text-decoration: none;
 border-bottom: 1px solid rgba(42, 34, 28, 0.4);
 padding-bottom: 0.12em;
}
.hh-sci-home__more:hover,
.hh-sci-home__more:focus-visible {
 border-bottom-color: var(--hh-ink);
}
@media (max-width: 860px) {
 .hh-sci-home__head h2 {
 font-size: clamp(1.2rem, 4.5vw, 1.42rem);
 letter-spacing: 0.012em;
 }
 .hh-sci-home__spread {
 grid-template-columns: 1fr;
 grid-template-rows: none;
 height: auto;
 gap: 0.9rem;
 max-width: 32rem;
 margin-inline: auto;
 }
 .hh-sci-home__item--italy,
 .hh-sci-home__item--spain,
 .hh-sci-home__item--japan {
 grid-column: auto;
 grid-row: auto;
 }
 .hh-sci-home__card {
 height: auto;
 aspect-ratio: 4 / 5;
 }
 .hh-sci-home__item--italy .hh-sci-home__card h3,
 .hh-sci-home__card h3 {
 font-size: 1.2rem;
 }
 .hh-sci-home__item--italy .hh-sci-home__copy,
 .hh-sci-home__item--spain .hh-sci-home__copy,
 .hh-sci-home__item--japan .hh-sci-home__copy,
 .hh-sci-home__copy {
 left: 0;
 right: 0;
 bottom: 0;
 border-radius: 0;
 box-shadow: none;
 padding: 0.7rem 0.95rem 0.75rem;
 }
}
@media (max-width: 560px) {
 .hh-sci-home__head h2 {
 white-space: normal;
 font-size: 1.28rem;
 letter-spacing: 0.01em;
 }
}
@media (prefers-reduced-motion: reduce) {
 .hh-sci-home__media img,
 .hh-sci-home__card:hover .hh-sci-home__media img,
 .hh-sci-home__card:focus-visible .hh-sci-home__media img {
 transition: none;
 transform: none;
 }
}

/* Sticky address stays dark on the orange bar; the booking button stays white */
.hh-sticky-book__prompt,
.hh-sticky-book__field,
.hh-sticky-book__field select {
 color: var(--hh-ink);
}
.hh-sticky-book__field select {
 -webkit-text-fill-color: var(--hh-ink);
 background-image:
 linear-gradient(45deg, transparent 50%, var(--hh-ink) 50%),
 linear-gradient(135deg, var(--hh-ink) 50%, transparent 50%);
}

/* Care mega — men charcoal / women warm rose / pro sage (3-col) */
.hh-mega--care {
 --hh-mega-safe: 1rem;
 left: 50%;
 right: auto;
 width: min(54rem, calc(100vw - (var(--hh-mega-safe) * 2)));
 max-width: min(54rem, calc(100vw - (var(--hh-mega-safe) * 2)));
 translate: -50% 0;
 overflow: hidden;
 background: #fbf8f5;
 border: 1px solid rgba(42, 34, 28, 0.08);
 border-radius: 16px;
 box-shadow:
 0 1px 1px rgba(36, 24, 16, 0.04),
 0 10px 28px rgba(36, 24, 16, 0.1);
}
.hh-nav__item--mega:has(> .hh-mega--care)::after {
 content: "";
 position: absolute;
 z-index: 55;
 left: 50%;
 top: 100%;
 width: min(54rem, calc(100vw - 2rem));
 height: 10px;
 translate: -50% 0;
}
.hh-mega--care .hh-mega__inner,
.hh-mega--care .hh-mega__inner--split,
.hh-mega--care .hh-mega__inner--tri {
 display: flex;
 align-items: stretch;
 width: 100%;
 max-width: none;
 margin: 0;
 padding: 0;
 gap: 0;
}
.hh-mega--care .hh-mega__col {
 display: flex;
 flex-direction: column;
 flex: 1 1 0;
 min-width: 0;
 max-width: none;
 padding: 0 0 0.35rem;
}
.hh-mega--care .hh-mega__col + .hh-mega__col {
 border-left: 0;
 margin: 0;
}
.hh-mega--care .hh-mega__col > a.hh-mega__heading {
 display: flex;
 align-items: center;
 gap: 0.45rem;
 width: 100%;
 min-height: 2.85rem;
 margin: 0 0 0.35rem;
 padding: 0.7rem 1.15rem;
 border: 0;
 border-radius: 0;
 box-shadow: none;
 font-family: var(--hh-serif, "Noto Serif TC", serif);
 font-size: 0.84rem;
 font-weight: 500;
 letter-spacing: 0.16em;
 line-height: 1.2;
 text-decoration: none;
}
.hh-mega--care .hh-mega__col > a.hh-mega__heading::before {
 content: "";
 display: block;
 width: 0.85rem;
 height: 0.85rem;
 flex: 0 0 0.85rem;
 margin: 0;
 opacity: 1;
 -webkit-mask: var(--hh-ico, none) center / contain no-repeat;
 mask: var(--hh-ico, none) center / contain no-repeat;
}
.hh-mega--care .hh-mega__col > ul {
 margin: 0;
 padding: 0.2rem 0.7rem 0.65rem calc(1.15rem + 0.85rem + 0.45rem - 0.4rem);
}
.hh-mega--care .hh-mega__col li + li { margin-top: 0.08rem; }
.hh-mega--care .hh-mega__col > ul a {
 display: flex;
 align-items: center;
 min-height: 2.15rem;
 margin: 0;
 padding: 0.4rem 0.55rem;
 border-radius: 8px;
 background: transparent;
 font-size: 0.9rem;
 font-weight: 400;
 letter-spacing: 0.03em;
 line-height: 1.45;
 text-decoration: none;
 transition: color 180ms ease, background-color 180ms ease;
}
.hh-mega--care .hh-mega__col > ul a::before { display: none; content: none; }

.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/men/"]) {
 background: #f3f0ea;
}
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/men/"]) > .hh-mega__heading {
 background: #e4ddd3;
 color: #2a241f;
}
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/men/"]) > .hh-mega__heading::before {
 background-color: #e08a3a;
}
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/men/"]) > .hh-mega__heading:hover,
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/men/"]) > .hh-mega__heading:focus-visible {
 background: #d9d2c8;
 color: #1c1815;
}
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/men/"]) > ul a {
 color: #2c2622;
}
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/men/"]) > ul a:hover,
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/men/"]) > ul a:focus-visible {
 color: #1c1815;
 background: #e6e0d6;
}

.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/women/"]) {
 background: #f4e4dc;
}
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/women/"]) > .hh-mega__heading {
 background: #e7cdc3;
 color: #6a463f;
}
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/women/"]) > .hh-mega__heading::before {
 background-color: #c48980;
}
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/women/"]) > .hh-mega__heading:hover,
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/women/"]) > .hh-mega__heading:focus-visible {
 background: #e6c9bf;
 color: #5c3833;
}
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/women/"]) > ul a {
 color: #4e3a35;
}
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/women/"]) > ul a:hover,
.hh-mega--care .hh-mega__col:has(> .hh-mega__heading[href*="/women/"]) > ul a:focus-visible {
 color: #7a4248;
 background: #e9d0c7;
}

.hh-mega--care .hh-mega__col--pro {
 background: #ebe8e1;
}
.hh-mega--care .hh-mega__col--pro > .hh-mega__heading {
 background: #ddd8ce;
 color: #3a342c;
 --hh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 7.8 7 9 4-1.2 7-4.5 7-9V6l-7-3z'/%3E%3Cpath d='M9.5 12.5 11 14l3.5-3.5'/%3E%3C/svg%3E");
}
.hh-mega--care .hh-mega__col--pro > .hh-mega__heading::before {
 background-color: #8a7a62;
}
.hh-mega--care .hh-mega__col--pro > .hh-mega__heading:hover,
.hh-mega--care .hh-mega__col--pro > .hh-mega__heading:focus-visible {
 background: #d4cfc4;
 color: #2a241f;
}
.hh-mega--care .hh-mega__col--pro > ul a {
 color: #3a342c;
}
.hh-mega--care .hh-mega__col--pro > ul a:hover,
.hh-mega--care .hh-mega__col--pro > ul a:focus-visible {
 color: #2a241f;
 background: #e0dbd2;
}

.hh-mega--care > .hh-mega__foot {
 margin: 0;
 padding: 0.82rem 1.2rem 0.9rem 2.45rem;
 background: #fbf8f5;
 border-top: 1px solid rgba(42, 34, 28, 0.08);
}
.hh-mega--care > .hh-mega__foot a {
 color: #6e5238;
 font-size: 0.84rem;
 font-weight: 400;
 letter-spacing: 0.1em;
 text-decoration: none;
}
.hh-mega--care > .hh-mega__foot a:hover,
.hh-mega--care > .hh-mega__foot a:focus-visible {
 color: #3f342c;
}

/* Care-share magazine cards — before / after */
.hh-share-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 1.5rem;
}
.hh-share[hidden] {
 display: none !important;
}
.hh-share {
 display: flex;
 flex-direction: column;
 min-width: 0;
 background: var(--hh-paper);
 border: 1px solid var(--hh-line);
 border-radius: 20px;
 overflow: hidden;
 box-shadow: 0 18px 42px rgba(26, 18, 14, 0.06);
 transition: transform 0.72s ease, box-shadow 0.72s ease;
}
.hh-share:hover,
.hh-share:has(.hh-share__stage:focus-visible) {
 transform: translateY(-4px);
 box-shadow: 0 24px 50px rgba(26, 18, 14, 0.1);
}
.hh-share__stage {
 position: relative;
 display: block;
 width: 100%;
 margin: 0;
 padding: 0;
 border: 0;
 aspect-ratio: 3 / 4;
 overflow: hidden;
 cursor: pointer;
 background: #2a221c;
 color: inherit;
 font: inherit;
 text-align: left;
}
.hh-share__stage:focus-visible {
 outline: 2px solid var(--hh-orange);
 outline-offset: -3px;
}
.hh-share__img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 18%;
}
.hh-share__img--after {
 opacity: 0;
 transition: opacity 0.72s ease;
}
.hh-share:hover .hh-share__img--after,
.hh-share:has(.hh-share__stage:focus-visible) .hh-share__img--after,
.hh-share.is-after .hh-share__img--after,
.hh-share.is-peek .hh-share__img--after {
 opacity: 1;
}
.hh-share__sweep {
 position: absolute;
 inset: 0;
 z-index: 2;
 pointer-events: none;
 background: linear-gradient(
 105deg,
 transparent 32%,
 rgba(255, 255, 255, 0.42) 50%,
 transparent 68%
 );
 transform: translateX(-130%);
 opacity: 0;
}
.hh-share:hover .hh-share__sweep,
.hh-share:has(.hh-share__stage:focus-visible) .hh-share__sweep,
.hh-share.is-sweep .hh-share__sweep {
 animation: hh-share-sweep 0.72s ease;
}
@keyframes hh-share-sweep {
 0% { transform: translateX(-130%); opacity: 0; }
 18% { opacity: 1; }
 100% { transform: translateX(130%); opacity: 0; }
}
.hh-share__stage::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 1;
 height: 32%;
 pointer-events: none;
 background: linear-gradient(to top, rgba(18, 14, 11, 0.62), transparent);
}
.hh-share__mark {
 position: absolute;
 z-index: 3;
 left: 0.8rem;
 bottom: 0.75rem;
 max-width: calc(100% - 1.6rem);
 color: #fff;
 font-size: 0.7rem;
 line-height: 1.45;
 letter-spacing: 0.03em;
}
.hh-share__copy {
 display: flex;
 flex-direction: column;
 gap: 0.35rem;
 padding: 1.15rem 1.2rem 1.35rem;
}
.hh-share__copy h3 {
 margin: 0;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: 1.14rem;
 letter-spacing: 0.04em;
 line-height: 1.4;
}
.hh-share__copy p {
 margin: 0;
 color: var(--hh-ink-soft);
 font-size: 0.92rem;
 line-height: 1.75;
}
@media (min-width: 961px) {
 .hh-share-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1.2rem;
 }
}
@media (prefers-reduced-motion: reduce) {
 .hh-share,
 .hh-share__img--after {
 transition: none;
 }
 .hh-share:hover,
 .hh-share:has(.hh-share__stage:focus-visible) {
 transform: none;
 }
 .hh-share__img--before { opacity: 0; }
 .hh-share__img--after { opacity: 1; }
 .hh-share__sweep { display: none; }
}

a.hh-share__stage,
a.hh-share__hit {
 display: flex;
 flex-direction: column;
 flex: 1;
 text-decoration: none;
 color: inherit;
}
.hh-share__copy h2,
.hh-share__copy h3 {
 margin: 0;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: 1.14rem;
 letter-spacing: 0.04em;
 line-height: 1.4;
}
.hh-share__copy h2 a,
.hh-share__copy h3 a {
 color: inherit;
 text-decoration: none;
}
.hh-share__copy h2 a:hover,
.hh-share__copy h3 a:hover,
.hh-share__copy h2 a:focus-visible,
.hh-share__copy h3 a:focus-visible {
 color: var(--hh-orange);
}
.hh-results-page .hh-results-board {
 padding-top: 1.05rem;
 padding-bottom: 3.25rem;
}
.hh-results-intro h1 {
 margin: 0 0 0.15rem;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: clamp(1.65rem, 2.5vw, 2.15rem);
 letter-spacing: 0.04em;
 line-height: 1.25;
}
.hh-results-note {
 margin: 0 0 0.75rem;
 color: var(--hh-muted);
 font-size: 0.8rem;
 line-height: 1.5;
}
.hh-share-filters {
 display: flex;
 flex-wrap: wrap;
 gap: 0.45rem;
 margin: 0 0 0.95rem;
}
.hh-share-filters .hh-chip {
 font: inherit;
 font-size: 0.92rem;
 font-weight: 600;
 cursor: pointer;
 appearance: none;
 -webkit-appearance: none;
}
.hh-share-filters .hh-chip[aria-checked="true"] {
 background: var(--hh-orange);
 border-color: var(--hh-orange);
 color: #fff;
}
.hh-share-filters .hh-chip:focus:not(:focus-visible) {
 outline: none;
}
.hh-share-filters .hh-chip:focus-visible {
 outline: 2px solid var(--hh-orange);
 outline-offset: 3px;
}
.hh-share-status {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}
.hh-share-empty {
 margin: 0.4rem 0 0;
 color: var(--hh-ink-soft);
}
.hh-case-page {
 padding: 1.35rem 0 0;
 background:
 linear-gradient(180deg, var(--hh-orange-soft), var(--hh-paper-2) 220px);
}
.hh-case-sheet {
 background: var(--hh-paper);
 border: 1px solid var(--hh-line);
 border-radius: 22px;
 padding: 1.35rem 1.35rem 1.5rem;
}
.hh-crumb {
 display: flex;
 flex-wrap: wrap;
 gap: 0.35rem 0.45rem;
 margin: 0 0 0.85rem;
 color: var(--hh-muted);
 font-size: 0.85rem;
}
.hh-crumb a {
 color: inherit;
 text-decoration: none;
}
.hh-crumb a:hover,
.hh-crumb a:focus-visible {
 color: var(--hh-orange);
}
.hh-case-page h1 {
 margin: 0 0 0.45rem;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: clamp(1.55rem, 2.4vw, 2rem);
 letter-spacing: 0.03em;
 line-height: 1.35;
}
.hh-case-disclaimer {
 margin: 0 0 1.15rem;
 padding: 0.55rem 0.8rem;
 border-left: 3px solid var(--hh-orange);
 background: var(--hh-orange-soft);
 color: var(--hh-ink);
 font-size: 0.92rem;
 line-height: 1.6;
}
.hh-case-layout {
 display: grid;
 grid-template-columns: minmax(280px, 0.96fr) minmax(0, 1.12fr);
 gap: 1.75rem 2rem;
 align-items: start;
}
.hh-case-pair {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.7rem;
 margin: 0;
 position: sticky;
 top: 1rem;
}
.hh-case-pair figure {
 margin: 0;
}
.hh-case-pair img {
 width: 100%;
 aspect-ratio: 3 / 4;
 object-fit: cover;
 object-position: center 18%;
 border-radius: 14px;
 background: var(--hh-paper-2);
}
.hh-case-pair figcaption {
 margin-top: 0.45rem;
 font-family: var(--hh-serif);
 font-size: 0.78rem;
 letter-spacing: 0.08em;
 color: var(--hh-muted);
}
.hh-case-pair__note {
 grid-column: 1 / -1;
 margin: 0.15rem 0 0;
 font-size: 0.75rem;
 color: var(--hh-muted);
}
.hh-case-lead {
 margin: 0 0 0.25rem;
 color: var(--hh-ink-soft);
 line-height: 1.8;
}
.hh-case-block {
 margin-top: 0.15rem;
 padding-top: 0.95rem;
 border-top: 1px solid var(--hh-line);
}
.hh-case-block h2 {
 margin: 0 0 0.4rem;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: 1.12rem;
 letter-spacing: 0.04em;
 color: var(--hh-ink);
}
.hh-case-block p {
 margin: 0;
 color: var(--hh-ink-soft);
 line-height: 1.85;
}
.hh-case-page .hh-visit-cta {
 margin-top: 1.75rem;
}
.hh-case-links {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem 1.25rem;
 margin-top: 1.6rem;
}
.hh-case-links a {
 font-weight: 700;
 color: var(--hh-orange);
 text-decoration: none;
}
.hh-case-links a:hover,
.hh-case-links a:focus-visible {
 text-decoration: underline;
}
@media (max-width: 800px) {
 .hh-case-layout,
 .hh-case-pair {
 grid-template-columns: 1fr;
 position: static;
 }
 .hh-case-pair {
 max-width: 22rem;
 }
}

@media (max-width: 960px) {
 .hh-nav__item--mega:has(> .hh-mega--care)::after { content: none; }
 .hh-mega--care {
 left: auto;
 right: auto;
 width: auto;
 max-width: none;
 margin: 0.35rem 0 0.15rem;
 padding: 0;
 translate: none;
 border-radius: 14px;
 box-shadow: none;
 background: #fbf8f5;
 }
 .hh-mega--care .hh-mega__inner,
 .hh-mega--care .hh-mega__inner--split,
 .hh-mega--care .hh-mega__inner--tri {
 display: flex;
 flex-direction: column;
 width: auto;
 max-width: none;
 padding: 0;
 }
 .hh-mega--care .hh-mega__col {
 min-width: 0;
 max-width: none;
 padding: 0 0 0.3rem;
 }
 .hh-mega--care .hh-mega__col + .hh-mega__col {
 border-left: 0;
 border-top: 0;
 margin-top: 0;
 padding-top: 0;
 }
 .hh-mega--care > .hh-mega__foot {
 padding: 0.75rem 1rem 0.85rem 2.45rem;
 }
}

/* ===== 0.5.24 — shared visit CTA (science marble banner) ===== */
.hh-visit-cta {
 padding: clamp(4.5rem, 9vw, 7.5rem) 0;
 background-color: #fcfaf7;
 background-image:
 linear-gradient(90deg, rgba(252, 250, 247, 0.96) 0%, rgba(252, 250, 247, 0.82) 48%, rgba(252, 250, 247, 0.05) 100%),
 url("../images/science/science-spa-texture.webp");
 background-size: cover;
 background-position: right center;
 border-top: 1px solid rgba(42, 34, 28, 0.12);
}
.hh-visit-cta__inner > * { max-width: 36rem; }
.hh-visit-cta__eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 0.65rem;
 margin: 0 0 1.25rem;
 font-family: var(--hh-sans);
 font-size: 0.7rem;
 font-weight: 400;
 letter-spacing: 0.24em;
 color: var(--hh-ink-soft);
}
.hh-visit-cta__dot {
 width: 0.3rem;
 height: 0.3rem;
 border-radius: 50%;
 background: var(--hh-orange);
 flex-shrink: 0;
}
.hh-visit-cta__title,
.hh-audience .hh-visit-cta__title,
.hh-ab .hh-visit-cta__title,
.hh-ct .hh-visit-cta__title,
.hh-sci .hh-visit-cta__title {
 max-width: 36rem;
 margin: 0 0 1.1rem;
 font-family: var(--hh-serif);
 font-weight: 300;
 font-size: clamp(1.65rem, 2.8vw, 2.35rem);
 line-height: 1.4;
 letter-spacing: 0.1em;
 color: var(--hh-ink);
}
.hh-visit-cta__line { display: inline-block; }
.hh-visit-cta__text {
 margin: 0 0 2rem;
 font-size: 0.92rem;
 font-weight: 300;
 line-height: 2;
 color: var(--hh-ink-soft);
}
.hh-visit-cta__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.85rem;
 max-width: none;
}
.hh-visit-cta__actions .hh-btn {
 padding: 0.85rem 1.6rem !important;
 font-size: 0.86rem !important;
 font-weight: 500 !important;
 letter-spacing: 0.08em !important;
 border-radius: 999px !important;
 border-width: 1.5px !important;
 white-space: nowrap;
}
.hh-visit-cta__actions .hh-btn--solid {
 background: var(--hh-orange) !important;
 color: #fff !important;
 border-color: var(--hh-orange) !important;
}
.hh-visit-cta__actions .hh-btn--solid:hover,
.hh-visit-cta__actions .hh-btn--solid:active {
 background: var(--hh-orange-deep) !important;
 border-color: var(--hh-orange-deep) !important;
 color: #fff !important;
 box-shadow: 0 10px 24px rgba(232, 111, 28, 0.28);
}
.hh-visit-cta__actions .hh-btn--outline-orange {
 background: transparent !important;
 color: var(--hh-orange) !important;
 border-color: var(--hh-orange) !important;
}
.hh-visit-cta__actions .hh-btn--outline-orange:hover,
.hh-visit-cta__actions .hh-btn--outline-orange:active {
 background: var(--hh-orange-soft) !important;
 border-color: var(--hh-orange-deep) !important;
 color: var(--hh-orange-deep) !important;
 box-shadow: 0 8px 20px rgba(232, 111, 28, 0.12);
}
.hh-visit-cta__meta {
 margin: 1.75rem 0 0;
 max-width: none;
 font-size: 0.76rem;
 letter-spacing: 0.08em;
 color: var(--hh-muted);
}

/* Clinic-style hours stack: plain lines + green appointment note */
.hh-hours {
 display: grid;
 gap: 0.35rem;
 margin: 0;
}
.hh-hours p {
 margin: 0;
 font-size: inherit;
 font-weight: 300;
 line-height: 1.7;
 color: inherit;
 letter-spacing: inherit;
}
.hh-hours__addr {
 margin-bottom: 0.15rem !important;
}
.hh-hours__note {
 margin-top: 0.55rem !important;
 font-weight: 600 !important;
 color: #1b6b52 !important;
 letter-spacing: 0.06em;
}
.hh-hours__wa {
 margin-top: 0.35rem !important;
}
.hh-hours__wa a {
 color: inherit;
 text-decoration: underline;
 text-underline-offset: 0.18em;
}
.hh-hours__wa a:hover {
 color: var(--hh-orange);
}
.hh-hours--footer {
 margin: 0 0 1.35rem;
 font-size: 0.88rem;
 font-weight: 300;
 line-height: 1.65;
 color: var(--hh-ink-soft, #4a3c34);
}
.hh-footer__meta + .hh-hours--footer {
 margin-top: -0.15rem;
}
.hh-visit-note {
 padding: 1.75rem 0 2.25rem;
 background: #fcfaf7;
 border-top: 1px solid rgba(42, 34, 28, 0.12);
}
.hh-visit-note p {
 max-width: 60rem;
 margin: 0;
 font-size: 0.74rem;
 font-weight: 300;
 line-height: 1.9;
 color: var(--hh-muted);
}
@media (max-width: 720px) {
 .hh-visit-cta {
 background-image:
 linear-gradient(180deg, rgba(252, 250, 247, 0.86) 0%, rgba(252, 250, 247, 0.93) 100%),
 url("../images/science/science-spa-texture-mobile.webp");
 background-position: center;
 }
 .hh-visit-cta__actions .hh-btn {
 width: 100%;
 white-space: normal;
 }
}

/* homepage signature — ruled columns, short hairlines, hover-only links */
.hh-section--signature .hh-sig-board {
 display: flex;
 flex-direction: column;
 gap: clamp(2.6rem, 4.5vw, 3.6rem);
}
.hh-section--signature .hh-sig-audience__label {
 display: flex;
 align-items: center;
 gap: 0.9rem;
 margin: 0 0 1.55rem;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: 0.78rem;
 letter-spacing: 0.22em;
 color: var(--hh-bronze);
 white-space: nowrap;
}
.hh-section--signature .hh-sig-audience__label::before,
.hh-section--signature .hh-sig-audience__label::after {
 content: "";
 flex: 1 1 auto;
 height: 1px;
 background: #e3d9ce;
}
.hh-section--signature .hh-sig-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 0;
 align-items: stretch;
}
.hh-section--signature .hh-section__head {
 margin-bottom: 2.15rem;
 text-align: center;
}
.hh-section--signature .hh-section__head h2 {
 margin: 0 0 0.5rem;
 font-family: var(--hh-serif);
 font-weight: 600;
 font-size: clamp(1.9rem, 3.6vw, 2.9rem);
 line-height: 1.28;
 letter-spacing: 0.08em;
 color: var(--hh-bronze);
 text-wrap: balance;
}
.hh-section--signature .hh-section__head .hh-lede {
 margin-left: auto;
 margin-right: auto;
}
.hh-section--signature .hh-section__head .hh-link {
 display: inline-block;
 margin-top: 0.65rem;
 font-weight: 400;
 font-size: 0.92rem;
}
.hh-section--signature a.hh-sig-item,
.hh-section--signature a.hh-sig-item:hover,
.hh-section--signature a.hh-sig-item:focus,
.hh-section--signature a.hh-sig-item:focus-visible,
.hh-section--signature a.hh-sig-item:active,
.hh-section--signature a.hh-sig-item:visited {
 color: inherit;
 text-decoration: none;
 text-decoration-line: none;
 background-image: none;
}
.hh-section--signature a.hh-sig-item h4,
.hh-section--signature a.hh-sig-item p,
.hh-section--signature a.hh-sig-item:hover h4,
.hh-section--signature a.hh-sig-item:hover p,
.hh-section--signature a.hh-sig-item:focus-visible h4,
.hh-section--signature a.hh-sig-item:focus-visible p {
 text-decoration: none;
 text-decoration-line: none;
 border-bottom: 0;
 background-image: none;
}
.hh-section--signature .hh-sig-item {
 display: flex;
 flex-direction: column;
 min-width: 0;
 padding: 0.15rem 1.35rem 0;
}
.hh-section--signature .hh-sig-item:first-child {
 padding-left: 0;
}
.hh-section--signature .hh-sig-item:last-child {
 padding-right: 0;
}
.hh-section--signature .hh-sig-item + .hh-sig-item {
 border-left: 1px solid #e4dbd2;
}
.hh-section--signature .hh-sig-item h4 {
 margin: 0;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: clamp(1.48rem, 1.85vw, 1.78rem);
 line-height: 1.35;
 letter-spacing: 0.05em;
 color: var(--hh-bronze);
}
.hh-section--signature .hh-sig-item h4::after {
 content: "";
 display: block;
 width: 2.1rem;
 height: 1px;
 margin-top: 0.72rem;
 background: #e7c3a4;
 transition: background-color 280ms var(--hh-ease);
}
.hh-section--signature a.hh-sig-item:hover h4::after,
.hh-section--signature a.hh-sig-item:focus-visible h4::after {
 background: #c9956a;
}
.hh-section--signature .hh-sig-item p {
 margin: 0.95rem 0 0;
 max-width: 28em;
 font-size: 0.84rem;
 line-height: 1.95;
 color: var(--hh-ink-soft);
}
.hh-section--signature .hh-sig-item__more {
 display: inline-block;
 width: fit-content;
 margin-top: 1.15rem;
 padding: 0;
 border: 0;
 background: none;
 font-size: 0.86rem;
 font-weight: 500;
 letter-spacing: 0.04em;
 color: var(--hh-ink);
 text-decoration: none;
}
.hh-section--signature .hh-sig-item__more::after {
 content: none;
}
.hh-section--signature .hh-sig-item__more:hover,
.hh-section--signature .hh-sig-item__more:focus-visible {
 color: var(--hh-orange-deep);
 text-decoration: underline;
 text-underline-offset: 0.28em;
 text-decoration-thickness: 1px;
}
.hh-section--signature .hh-sig-item__media {
 display: block;
 margin: 1.45rem 0 0;
 overflow: hidden;
 background: #efe6dc;
}
.hh-section--signature .hh-sig-item__media--cutout {
 background: transparent;
}
.hh-section--signature .hh-sig-item__media img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 3 / 4;
 object-fit: cover;
 object-position: center 18%;
 transition: transform 420ms var(--hh-ease);
}
.hh-section--signature a.hh-sig-item:hover .hh-sig-item__media img,
.hh-section--signature a.hh-sig-item:focus-visible .hh-sig-item__media img {
 transform: scale(1.03);
}
.hh-section--signature .hh-sig-item__media--cutout img {
 object-fit: contain;
 object-position: center bottom;
 background: transparent;
}
.hh-section--signature .hh-sig-item__media img[src*="men-scalp-assessment"] {
 width: 100%;
 height: auto;
 aspect-ratio: 3 / 4;
 object-fit: cover;
 object-position: center center;
}
.hh-section--signature .hh-sig-item__media img[src*="men-crown"] {
 object-fit: cover;
 object-position: center 42%;
}
@media (max-width: 860px) {
 .hh-section--signature .hh-sig-grid {
 grid-template-columns: 1fr;
 }
 .hh-section--signature .hh-sig-item,
 .hh-section--signature .hh-sig-item:first-child,
 .hh-section--signature .hh-sig-item:last-child {
 padding: 0;
 border-left: 0;
 }
 .hh-section--signature .hh-sig-item + .hh-sig-item {
 margin-top: 2.35rem;
 padding-top: 2.15rem;
 border-top: 1px solid #e4dbd2;
 border-left: 0;
 }
 .hh-section--signature .hh-sig-item h4 {
 font-size: 1.48rem;
 }
}
@media (prefers-reduced-motion: reduce) {
 .hh-section--signature .hh-sig-item__media img,
 .hh-section--signature a.hh-sig-item:hover .hh-sig-item__media img,
 .hh-section--signature a.hh-sig-item:focus-visible .hh-sig-item__media img {
 transition: none;
 transform: none;
 }
}

/* ==========================================================================
 Homepage — 活髮路徑 4 階段（互動式）
 Flat stacked by default (no JavaScript / reduced motion); JS upgrades the
 markup to a tab interface with a progress rail.
 ========================================================================== */

.hh-journey {
 --hh-journey-progress: 0;
 --hh-journey-line: rgba(42, 34, 28, 0.16);
 --hh-journey-column: 62rem;
 position: relative;
 padding: clamp(3rem, 4.4vw, 4rem) 0;
 color: var(--hh-ink);
 background:
 radial-gradient(120% 90% at 84% 2%, rgba(255, 130, 45, 0.08) 0%, rgba(255, 130, 45, 0) 56%),
 linear-gradient(180deg, #fdfbf8 0%, #f6f2ec 100%);
}

.hh-journey__head {
 max-width: 46rem;
 margin: 0 auto clamp(1.5rem, 2.4vw, 1.95rem);
 text-align: center;
}
.hh-journey__head .hh-kicker {
 display: inline-flex;
 align-items: center;
 gap: 0.75rem;
 margin: 0 0 0.9rem;
 color: var(--hh-orange);
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.2em;
}
.hh-journey__head .hh-kicker::before,
.hh-journey__head .hh-kicker::after {
 content: "";
 width: 2.25rem;
 height: 1px;
 background: var(--hh-orange);
}
.hh-journey__head h2 {
 margin: 0 0 0.7rem;
 color: var(--hh-ink);
 font-family: var(--hh-serif);
 font-size: clamp(1.7rem, 2.8vw, 2.3rem);
 font-weight: 300;
 letter-spacing: 0.06em;
 line-height: 1.35;
}
.hh-journey__head .hh-lede {
 margin: 0 auto;
 max-width: 41rem;
 color: var(--hh-ink-soft);
 font-size: 0.96rem;
 font-weight: 400;
 line-height: 1.85;
 text-wrap: balance;
}

/* --- Progress rail + stage tabs (JavaScript only) ------------------------ */

.hh-journey__rail { display: none; }
.hh-journey.is-interactive .hh-journey__rail {
 display: block;
 position: relative;
 width: 100%;
 max-width: var(--hh-journey-column);
 margin: 0 auto clamp(1.6rem, 2.6vw, 2.1rem);
}

.hh-journey__scale {
 display: flex;
 justify-content: space-between;
 gap: 1rem;
 margin: 0 0 1.1rem;
 color: var(--hh-muted);
 font-size: 0.7rem;
 letter-spacing: 0.14em;
}

.hh-journey__nav-wrap { position: relative; }

.hh-journey__nav {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 0;
 margin: 0;
 padding: 0;
 list-style: none;
}
.hh-journey__nav-item { margin: 0; }

.hh-journey__tab {
 position: relative;
 z-index: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.55rem;
 width: 100%;
 padding: 0 0.6rem;
 background: none;
 border: 0;
 color: inherit;
 font-family: inherit;
 text-align: center;
 cursor: pointer;
}
.hh-journey__tab:focus-visible {
 outline: 2px solid var(--hh-orange);
 outline-offset: 6px;
 border-radius: 10px;
}

.hh-journey__dot {
 width: 13px;
 height: 13px;
 border-radius: 50%;
 background: #fdfbf8;
 border: 1px solid rgba(42, 34, 28, 0.3);
 transition: background 260ms cubic-bezier(0.22, 1, 0.36, 1),
 border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
 transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hh-journey__tab:hover .hh-journey__dot { border-color: var(--hh-orange); }
.hh-journey__tab.is-active .hh-journey__dot {
 background: var(--hh-orange);
 border-color: var(--hh-orange);
 transform: scale(1.15);
}

.hh-journey__tab-step {
 color: var(--hh-muted);
 font-size: 0.68rem;
 font-weight: 500;
 letter-spacing: 0.2em;
 transition: color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hh-journey__tab.is-active .hh-journey__tab-step { color: var(--hh-orange); }

.hh-journey__tab-title {
 color: rgba(42, 34, 28, 0.62);
 font-family: var(--hh-serif);
 font-size: 0.98rem;
 font-weight: 400;
 letter-spacing: 0.04em;
 line-height: 1.5;
 transition: color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hh-journey__tab:hover .hh-journey__tab-title { color: var(--hh-ink); }
.hh-journey__tab.is-active .hh-journey__tab-title {
 color: var(--hh-ink);
 font-weight: 500;
}

.hh-journey__track {
 position: absolute;
 top: 6px;
 left: 12.5%;
 right: 12.5%;
 height: 1px;
 background: var(--hh-journey-line);
}
.hh-journey__track-fill {
 display: block;
 width: calc(var(--hh-journey-progress) * 100%);
 height: 100%;
 background: var(--hh-orange);
 transition: width 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Stages --------------------------------------------------------------- */

.hh-journey__stages {
 display: grid;
 gap: clamp(2rem, 4vw, 3rem);
 width: 100%;
 max-width: var(--hh-journey-column);
 margin: 0 auto;
}
.hh-journey.is-interactive .hh-journey__stages {
 grid-template-areas: "stage";
}

.hh-journey__stage {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: clamp(1.5rem, 3.2vw, 2.85rem);
 align-items: center;
}
.hh-journey.is-interactive .hh-journey__stage {
 grid-area: stage;
 opacity: 0;
 visibility: hidden;
 transform: translateY(10px);
 transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
 transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
 visibility 420ms linear;
}
.hh-journey.is-interactive .hh-journey__stage.is-active {
 opacity: 1;
 visibility: visible;
 transform: none;
}

.hh-journey__media {
 position: relative;
 margin: 0;
 overflow: hidden;
 border-radius: var(--hh-radius-lg);
 background: #efe8df;
 box-shadow: 0 26px 62px -36px rgba(42, 34, 28, 0.58);
}
.hh-journey__media img {
 width: 100%;
 height: 100%;
 aspect-ratio: 3 / 2;
 max-height: 19.5rem;
 object-fit: cover;
 transform: scale(1.03);
 transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hh-journey.is-interactive .hh-journey__stage.is-active .hh-journey__media img {
 transform: none;
}
.hh-journey__media::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 border: 1px solid rgba(255, 255, 255, 0.28);
 pointer-events: none;
}

.hh-journey__badge {
 position: absolute;
 top: 1rem;
 left: 1rem;
 padding: 0.35rem 0.85rem;
 border-radius: 999px;
 background: rgba(253, 251, 248, 0.92);
 color: var(--hh-ink);
 font-size: 0.68rem;
 font-weight: 500;
 letter-spacing: 0.2em;
 backdrop-filter: blur(4px);
}

.hh-journey__body { min-width: 0; }
.hh-journey__title {
 margin: 0 0 0.85rem;
 color: var(--hh-ink);
 font-family: var(--hh-serif);
 font-size: clamp(1.28rem, 2vw, 1.55rem);
 font-weight: 500;
 letter-spacing: 0.04em;
 line-height: 1.4;
}
.hh-journey__copy {
 margin: 0;
 padding: 1.05rem 0 0;
 border-top: 1px solid var(--hh-journey-line);
 color: var(--hh-ink-soft);
 font-size: 0.95rem;
 font-weight: 400;
 line-height: 1.9;
}

.hh-journey__note {
 margin: clamp(1.25rem, 2vw, 1.6rem) auto 0;
 max-width: 46rem;
 color: var(--hh-muted);
 font-size: 0.8rem;
 line-height: 1.8;
 text-align: center;
 text-wrap: balance;
}
.hh-journey__more {
 margin: 1.15rem 0 0;
 text-align: center;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 980px) {
 .hh-journey__stage { grid-template-columns: minmax(0, 1fr); }
 .hh-journey__media img { max-height: 18rem; }
}

@media (max-width: 720px) {
 .hh-journey__nav-wrap {
 position: relative;
 display: flex;
 flex-direction: column;
 }
 /* Fade the scroller edge so the remaining stages read as swipeable. */
 .hh-journey__nav-wrap::after {
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 z-index: 2;
 width: 3rem;
 height: 5rem;
 background: linear-gradient(90deg, rgba(250, 247, 242, 0) 0%, #f9f6f1 72%);
 pointer-events: none;
 }
 .hh-journey__nav {
 order: 1;
 display: flex;
 gap: 1.6rem;
 overflow-x: auto;
 scroll-snap-type: x proximity;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 padding-bottom: 0.35rem;
 }
 .hh-journey__nav::-webkit-scrollbar { display: none; }
 .hh-journey__nav-item {
 flex: 0 0 auto;
 scroll-snap-align: center;
 }
 .hh-journey__tab {
 align-items: flex-start;
 width: auto;
 padding: 0;
 text-align: left;
 }
 .hh-journey__tab-title { white-space: nowrap; }
 .hh-journey__track {
 order: 2;
 position: static;
 display: block;
 width: 100%;
 margin-top: 1rem;
 }
 /* Horizontal scroller: show the rail as "n of 4" rather than dot-to-dot. */
 .hh-journey__track-fill {
 width: calc((var(--hh-journey-progress) * 0.75 + 0.25) * 100%);
 }
}

@media (prefers-reduced-motion: reduce) {
 .hh-journey__dot,
 .hh-journey__tab-step,
 .hh-journey__tab-title,
 .hh-journey__track-fill,
 .hh-journey__media img,
 .hh-journey__stage { transition: none; }
 .hh-journey__media img { transform: none; }
}

/* ===== 0.5.56 — wide-viewport: center header / hero / sticky on .hh-wrap rail =====
 Marble hero background remains full-bleed; content maxes at --hh-max (1180px). */

/* ===== 0.5.60 — hero marble static background only (video bg removed) ===== */

/* ===== 0.5.67 — left-only veil, immersed header, raised stats, video bg ===== */
.cjk-headline {
 word-break: keep-all;
 line-break: strict;
}
.hh-hero-luxe {
 /* Editorial luxe palette — soft ink / espresso / champagne (no harsh black / flat orange) */
 --hh-luxe-cream: #f4efe8;
 --hh-luxe-ink: #1f1814;
 --hh-luxe-espresso: #2c221c;
 --hh-luxe-ink-soft: #5a4f47;
 --hh-luxe-taupe: #7a6d63;
 --hh-luxe-muted: #8b7f74;
 --hh-luxe-bronze: #9a7a55;
 --hh-luxe-champagne: #c9b089;
 --hh-luxe-antique-gold: #b89668;
 position: relative;
 isolation: isolate;
 background: #1a1410;
 color: var(--hh-luxe-espresso);
 overflow: clip;
 box-sizing: border-box;
 min-height: 100svh;
 min-height: 100dvh;
}
.hh-hero-luxe__media {
 position: absolute;
 inset: 0;
 z-index: 0;
 overflow: hidden;
 pointer-events: none;
}
.hh-hero-luxe__video,
.hh-hero-luxe__fallback,
.hh-hero-luxe__media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 72% 28%;
 display: block;
}
.hh-hero-luxe__video {
 position: absolute;
 inset: 0;
 z-index: 1;
}
.hh-hero-luxe__fallback {
 position: absolute;
 inset: 0;
 z-index: 0;
}
.hh-hero-luxe__fallback img {
 transform-origin: 70% 30%;
 animation: hhLuxeKen 28s ease-in-out infinite alternate;
}
.hh-hero-luxe.has-video .hh-hero-luxe__fallback img {
 animation: none;
}
.hh-hero-luxe__veil {
 position: absolute;
 inset: 0;
 z-index: 1;
 pointer-events: none;
 background:
 linear-gradient(
 90deg,
 rgba(255, 255, 255, 1) 0%,
 rgba(255, 255, 255, 0.97) 14%,
 rgba(255, 252, 248, 0.88) 26%,
 rgba(255, 252, 248, 0.55) 38%,
 rgba(255, 252, 248, 0.2) 48%,
 rgba(255, 252, 248, 0) 58%
 ),
 linear-gradient(
 to bottom,
 rgba(255, 255, 255, 0.5) 0%,
 rgba(255, 255, 255, 0) 22%
 );
}
.hh-hero-luxe__grid {
 position: relative;
 z-index: 2;
 display: grid;
 grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
 gap: clamp(1.25rem, 3vw, 2.75rem);
 align-items: center;
 width: min(1240px, calc(100% - 48px));
 max-width: 1240px;
 margin: 0 auto;
 min-height: inherit;
 padding: clamp(5.75rem, 12vh, 7.25rem) 0 clamp(5rem, 11vh, 7rem);
 box-sizing: border-box;
}
.hh-hero-luxe__copy {
 display: flex;
 flex-direction: column;
 justify-content: center;
 min-width: 0;
 padding: 0;
}
.hh-hero-luxe__copy-main {
 display: flex;
 flex-direction: column;
 justify-content: center;
 flex: 0 0 auto;
 min-width: 0;
 max-width: 36rem;
}
.hh-hero-luxe__eyebrow {
 margin: 0 0 1.15rem;
 font-family: var(--hh-sans);
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.22em;
 color: var(--hh-luxe-taupe);
 text-shadow: 0 1px 0 rgba(255, 252, 248, 0.55);
 word-break: keep-all;
 line-break: strict;
}
.hh-hero-luxe__eyebrow::before {
 content: "";
 display: inline-block;
 width: 1.65rem;
 height: 1px;
 margin-right: 0.7rem;
 vertical-align: middle;
 background: linear-gradient(90deg, var(--hh-luxe-antique-gold), var(--hh-luxe-champagne));
 opacity: 0.92;
}
.hh-hero-luxe__title {
 margin: 0;
 max-width: 9.6em;
 font-family: var(--hh-serif);
 font-weight: 600;
 font-size: clamp(2.55rem, 4.6vw, 3.95rem);
 line-height: 1.2;
 letter-spacing: 0.035em;
 color: var(--hh-luxe-espresso);
 text-shadow: 0 1px 18px rgba(255, 252, 248, 0.35);
 word-break: keep-all;
 line-break: strict;
}
.hh-hero-luxe__line {
 display: block;
}
.hh-hero-luxe__line--accent {
 color: var(--hh-luxe-antique-gold);
 font-weight: 500;
 letter-spacing: 0.04em;
}
.hh-hero-luxe__stats {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 0.65rem 0.85rem;
 flex: 0 0 auto;
 margin-top: 2.35rem;
 padding: 1rem 1.15rem;
 min-width: 0;
 border-radius: 1rem;
 border: 1px solid rgba(255, 255, 255, 0.55);
 background: rgba(255, 255, 255, 0.72);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 box-shadow: 0 10px 28px rgba(42, 33, 28, 0.06);
}
.hh-hero-luxe__stat {
 min-width: 0;
 text-align: center;
}
.hh-hero-luxe__stat + .hh-hero-luxe__stat {
 border-left: 1px solid rgba(42, 33, 28, 0.1);
 padding-left: 0.85rem;
}
.hh-hero-luxe__stat-num {
 margin: 0;
 font-family: var(--hh-serif);
 font-weight: 600;
 font-size: clamp(1.35rem, 2vw, 1.75rem);
 line-height: 1.15;
 letter-spacing: 0.02em;
 color: var(--hh-luxe-espresso);
 font-variant-numeric: tabular-nums;
}
.hh-hero-luxe__stat-label {
 margin: 0.35rem 0 0;
 font-family: var(--hh-sans);
 font-size: 0.74rem;
 font-weight: 500;
 letter-spacing: 0.06em;
 line-height: 1.4;
 color: var(--hh-luxe-taupe);
 word-break: keep-all;
 line-break: strict;
}
.hh-hero-luxe__visual {
 min-width: 0;
 min-height: 1px;
}
@keyframes hhLuxeKen {
 from { transform: scale(1); }
 to { transform: scale(1.05); }
}
.hh-home .hh-hero-luxe + .hh-hero-home--atelier {
 margin-top: 0;
 padding-top: clamp(1.75rem, 4vh, 2.75rem);
 min-height: auto;
}
.hh-home .hh-hero-luxe + .hh-hero-home--atelier .hh-hero-home__atelier {
 min-height: 0;
}
@media (max-width: 980px) {
 .hh-hero-luxe {
 min-height: 100svh;
 min-height: 100dvh;
 }
 .hh-hero-luxe__video,
 .hh-hero-luxe__fallback,
 .hh-hero-luxe__media img {
 object-fit: cover;
 object-position: center 20%;
 }
 .hh-hero-luxe__veil {
 /* Mobile: cream veil rises from bottom so copy stays readable; top media stays clear for menu immersion */
 background:
 linear-gradient(
 to top,
 rgba(255, 255, 255, 0.97) 0%,
 rgba(255, 252, 248, 0.92) 16%,
 rgba(252, 248, 242, 0.72) 32%,
 rgba(252, 248, 242, 0.38) 48%,
 rgba(252, 248, 242, 0.12) 64%,
 rgba(252, 248, 242, 0) 82%
 );
 }
 .hh-hero-luxe__grid {
 grid-template-columns: 1fr;
 width: calc(100% - 32px);
 min-height: inherit;
 gap: 0;
 padding: 5.5rem 0 max(1.35rem, env(safe-area-inset-bottom, 0px));
 align-items: end;
 }
 .hh-hero-luxe__copy {
 justify-content: flex-end;
 padding-top: 0;
 min-height: 0;
 }
 .hh-hero-luxe__copy-main {
 max-width: none;
 }
 .hh-hero-luxe__visual {
 display: none;
 }
 .hh-hero-luxe__title {
 max-width: none;
 font-size: clamp(2.15rem, 8vw, 2.85rem);
 }
 .hh-hero-luxe__stats {
 margin-top: 1.85rem;
 padding: 0.85rem 0.55rem;
 gap: 0;
 width: 100%;
 max-width: 100%;
 box-sizing: border-box;
 }
 .hh-hero-luxe__stat + .hh-hero-luxe__stat {
 padding-left: 0.35rem;
 }
 .hh-hero-luxe__stat-num {
 font-size: 1.05rem;
 }
 .hh-hero-luxe__stat-label {
 font-size: 0.62rem;
 letter-spacing: 0;
 line-height: 1.35;
 }
 .hh-home .hh-hero-luxe + .hh-hero-home--atelier {
 padding-top: 1.5rem;
 }
}
@media (prefers-reduced-motion: reduce) {
 .hh-hero-luxe__fallback img {
 animation: none;
 }
 .hh-hero-luxe__video {
 display: none;
 }
}