/* ==========================================================================
   Hunt Homes by Sajawal — theme stylesheet
   Sections
     01  Design tokens
     02  Reset & base
     03  Layout primitives
     04  Typography
     05  Buttons & links
     06  Motion primitives
     07  Forms
     08  Header & navigation
     09  Scroll progress / sticky contact bar
   ========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */
:root {
  /* Palette — the exact five greens and two neutrals of the source design */
  --hh-deep:        #04150F;  /* deepest forest, page ground              */
  --hh-forest:      #0A261D;  /* primary forest                           */
  --hh-forest-lift: #0E3123;  /* gradient terminus                        */
  --hh-forest-hover:#123B2D;  /* button hover / bar gradient start        */
  --hh-forest-mid:  #1C4D3B;  /* bar gradient terminus                    */
  --hh-sage:        #9DC3B1;  /* accent, display italics on dark          */
  --hh-ivory:       #F7F6F1;  /* light ground & text on dark              */
  --hh-ivory-warm:  #F9F7F2;  /* ::selection foreground                   */
  --hh-ink:         #101311;  /* text on light                            */
  --hh-white:       #FFFFFF;

  /* Type */
  --hh-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hh-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Motion — one easing curve governs the whole site */
  --hh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hh-dur-fast: 300ms;
  --hh-dur: 400ms;
  --hh-dur-slow: 500ms;
  --hh-dur-slower: 700ms;

  /* Rhythm */
  --hh-container: 90rem;      /* 1440px */
  --hh-gutter: 20px;          /* px-5  */
  --hh-gutter-md: 48px;       /* md:px-12 */
  --hh-gutter-narrow-md: 40px;/* md:px-10 */

  /* Radii */
  --hh-r-sheet: 2.5rem;       /* rounded-t-[2.5rem]  */
  --hh-r-sheet-md: 4rem;      /* md:rounded-t-[4rem] */
  --hh-r-card: 1.5rem;
  --hh-r-card-md: 2rem;
  --hh-r-tile: 1.25rem;
  --hh-r-tile-md: 1.75rem;
  --hh-r-panel: 2rem;
  --hh-r-panel-md: 3rem;
}

/* ------------------------------------------------------------ 02 reset/base */
*, *::before, *::after { box-sizing: border-box; border: 0 solid rgba(0,0,0,.1); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
}

body {
  background: var(--hh-deep);
  color: var(--hh-ink);
  font-family: var(--hh-font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--hh-forest); color: var(--hh-ivory-warm); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.hh-skip-link {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.hh-skip-link:focus {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 70;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; clip-path: none;
  background: var(--hh-forest);
  color: var(--hh-ivory);
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
}

.hh-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Outlined display type used behind headings on several pages */
.hh-text-outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(249, 247, 242, 0.1);
}
.hh-text-outline-dark {
  color: transparent;
  -webkit-text-stroke: 1px rgba(10, 38, 29, 0.12);
}

/* ------------------------------------------------------- 03 layout primitives */
.hh-page { background: var(--hh-deep); min-height: 100vh; width: 100%; max-width: 100%; }
.hh-page--home { overflow-x: hidden; }

.hh-container {
  max-width: var(--hh-container);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--hh-gutter);
}
.hh-container--narrow { max-width: 64rem; }   /* max-w-4xl  */
.hh-container--prose  { max-width: 48rem; }   /* max-w-3xl  */
.hh-container--wide   { max-width: 64rem; }   /* max-w-5xl  */

@media (min-width: 768px) {
  .hh-container { padding-inline: var(--hh-gutter-md); }
  .hh-container--narrow,
  .hh-container--prose,
  .hh-container--wide { padding-inline: var(--hh-gutter-narrow-md); }
}

/* A "sheet" — the overlapping rounded panel that every section rides on.
   Each section lifts 40px over its predecessor and rounds its top corners. */
.hh-sheet {
  position: relative;
  z-index: 10;
  margin-top: -2.5rem;
  border-top-left-radius: var(--hh-r-sheet);
  border-top-right-radius: var(--hh-r-sheet);
  overflow: hidden;
}
@media (min-width: 768px) {
  .hh-sheet {
    border-top-left-radius: var(--hh-r-sheet-md);
    border-top-right-radius: var(--hh-r-sheet-md);
  }
}

.hh-section { position: relative; padding-block: 56px; }
@media (min-width: 768px) { .hh-section { padding-block: 128px; } }

.hh-anchor { scroll-margin-top: 80px; }
@media (min-width: 768px) { .hh-anchor { scroll-margin-top: 96px; } }
.hh-anchor--near { scroll-margin-top: 64px; }
@media (min-width: 768px) { .hh-anchor--near { scroll-margin-top: 80px; } }

.hh-bg-deep   { background: var(--hh-deep); }
.hh-bg-forest { background: var(--hh-forest); }
.hh-bg-ivory  { background: var(--hh-ivory); }
.hh-bg-white  { background: var(--hh-white); }
.hh-bg-lens   { background: linear-gradient(to bottom, var(--hh-forest), var(--hh-forest-lift)); }
.hh-bg-concierge {
  background: linear-gradient(to bottom, var(--hh-deep), var(--hh-forest) 50%, var(--hh-forest-lift));
}


/* --------------------------------------------------------------- 04 typography */
.hh-eyebrow-row { display: flex; align-items: center; gap: 16px; }
.hh-rule { display: block; height: 1px; width: 40px; flex-shrink: 0; background: rgba(10,38,29,.3); }
.hh-rule--light { background: rgba(255,255,255,.3); }

.hh-eyebrow {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(16,19,17,.45);
  line-height: 1.5;
}
.hh-eyebrow--light { color: rgba(255,255,255,.45); }
.hh-eyebrow--dim   { color: rgba(255,255,255,.4); }

/* Section heading — 2rem → 3.2rem, light, tight tracking */
.hh-heading {
  margin-top: 24px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  font-size: 2rem;
  color: var(--hh-ink);
}
@media (min-width: 768px) { .hh-heading { font-size: 3.2rem; } }
.hh-heading--light { color: var(--hh-ivory); }
.hh-heading em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-forest); }
.hh-heading--light em { color: var(--hh-sage); }

.hh-heading-lede {
  font-size: 13px;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(16,19,17,.45);
}
.hh-heading-lede--light { color: rgba(255,255,255,.45); }
@media (min-width: 1024px) { .hh-heading-lede { text-align: right; } }

/* The 12-column header block shared by most sections */
.hh-section-header { display: grid; gap: 32px; align-items: end; }
@media (min-width: 1024px) {
  .hh-section-header { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hh-section-header__main { grid-column: span 12 / span 12; }
  .hh-section-header--split .hh-section-header__main { grid-column: span 8 / span 8; }
  .hh-section-header__aside { grid-column: span 4 / span 4; }
}

.hh-index {
  font-size: 10px;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: rgba(10,38,29,.4);
}
.hh-index--light { color: rgba(255,255,255,.25); }

.hh-note {
  font-size: 11px;
  letter-spacing: .015em;
  font-weight: 300;
  color: rgba(16,19,17,.35);
}

.hh-caption {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(16,19,17,.3);
}

/* --------------------------------------------------------------- 05 buttons */
.hh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding-inline: 28px;
  border-radius: 9999px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background-color var(--hh-dur) var(--hh-ease),
              color var(--hh-dur) var(--hh-ease),
              border-color var(--hh-dur) var(--hh-ease),
              padding var(--hh-dur) var(--hh-ease),
              opacity var(--hh-dur) var(--hh-ease);
}
@media (min-width: 768px) { .hh-btn { height: 56px; padding-inline: 32px; font-size: 12px; } }

.hh-btn--ivory  { background: var(--hh-ivory); color: var(--hh-forest); }
.hh-btn--ivory:hover { background: var(--hh-white); }
.hh-btn--forest { background: var(--hh-forest); color: var(--hh-ivory); }
.hh-btn--forest:hover { background: var(--hh-forest-hover); }

.hh-btn--outline-light {
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.75);
}
.hh-btn--outline-light:hover { border-color: rgba(255,255,255,.6); color: var(--hh-white); }

.hh-btn--outline-dark {
  border: 1px solid rgba(10,38,29,.25);
  color: rgba(16,19,17,.7);
}
.hh-btn--outline-dark:hover { border-color: rgba(10,38,29,.6); color: var(--hh-forest); }

.hh-btn--tall { height: 56px; padding-inline: 36px; letter-spacing: .18em; }
.hh-btn--block { width: 100%; }
.hh-btn[disabled] { opacity: .6; cursor: default; }

.hh-btn__icon { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--hh-dur) var(--hh-ease); }
.hh-btn:hover .hh-btn__icon--slide { transform: translateX(6px); }

/* Nav pill grows on hover — the source widens padding by 4px */
.hh-btn--pill {
  height: 40px;
  padding-inline: 24px;
  font-size: 11.5px;
  letter-spacing: .14em;
}
.hh-btn--pill:hover { padding-inline: 28px; }

/* Underlined text link with a widening gap on hover */
.hh-textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hh-forest);
  border-bottom: 1px solid rgba(10,38,29,.3);
  padding-bottom: 4px;
  transition: gap var(--hh-dur) var(--hh-ease), border-color var(--hh-dur) var(--hh-ease),
              color var(--hh-dur) var(--hh-ease);
}
.hh-textlink:hover { gap: 16px; border-color: var(--hh-forest); }
.hh-textlink--light { color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.2); }
.hh-textlink--light:hover { color: rgba(255,255,255,.7); }

/* Circular arrow control */
.hh-circle-btn {
  width: 44px; height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(10,38,29,.2);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(10,38,29,.6);
  flex-shrink: 0;
  transition: background-color var(--hh-dur-slow) var(--hh-ease),
              color var(--hh-dur-slow) var(--hh-ease),
              border-color var(--hh-dur-slow) var(--hh-ease),
              transform 120ms var(--hh-ease);
}
.hh-circle-btn:hover { background: var(--hh-forest); color: var(--hh-ivory); border-color: var(--hh-forest); }
.hh-circle-btn:active { transform: scale(.9); }
.hh-circle-btn--light { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.5); }
.hh-circle-btn--light:hover { background: transparent; color: var(--hh-ivory); border-color: rgba(255,255,255,.6); }
.hh-circle-btn svg { width: 16px; height: 16px; }

.hh-carousel-count {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.24em;
  font-variant-numeric: tabular-nums;
  color: rgba(16,19,17,.4);
}
.hh-carousel-count--light { color: rgba(255,255,255,.4); }

/* -------------------------------------------------------- 06 motion primitives */
/* FadeIn — opacity 0 → 1, y 28px → 0, .9s, once, 70px before entry */
.hh-js .hh-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--hh-ease), transform .9s var(--hh-ease);
  transition-delay: var(--hh-delay, 0ms);
  will-change: opacity, transform;
}
.hh-js .hh-fade.is-visible { opacity: 1; transform: none; }

/* Reveal — a line of type sliding up from behind a mask */
.hh-reveal { display: block; overflow: hidden; }
.hh-js .hh-reveal > span {
  display: block;
  transform: translateY(115%);
  transition: transform 1.1s var(--hh-ease);
  transition-delay: var(--hh-delay, 0ms);
  will-change: transform;
}
.hh-js .hh-reveal.is-visible > span { transform: none; }

/* ParallaxImage — a fixed crop the photograph drifts and settles inside */
.hh-parallax { position: relative; overflow: hidden; }
.hh-parallax__inner {
  position: absolute;
  inset: -8% 0;
  transition: transform 1.8s var(--hh-ease);
  will-change: transform;
}
.hh-js .hh-parallax__inner { transform: scale(1.14); }
.hh-js .hh-parallax.is-visible .hh-parallax__inner { transform: scale(1); }
.hh-parallax.is-visible .hh-parallax__inner[data-parallax-active] {
  transition: none;
  transform: translate3d(0, var(--hh-parallax-y, 0px), 0);
}
.hh-parallax img { width: 100%; height: 100%; object-fit: cover; }

/* Bars that grow to their measured width when scrolled into view */
.hh-bar { height: 100%; width: var(--hh-bar-width, 0%); border-radius: 9999px; transition: width 1.4s var(--hh-ease); }
.hh-js .hh-bar { width: 0; }
.hh-js .hh-bar.is-visible { width: var(--hh-bar-width, 0%); }

/* Marquee */
@keyframes hh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hh-marquee__track { display: flex; flex-shrink: 0; align-items: center; animation: hh-marquee 48s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hh-marquee__track { animation: none; }
  .hh-js .hh-fade { opacity: 1; transform: none; transition: none; }
  .hh-js .hh-reveal > span { transform: none; transition: none; }
  .hh-js .hh-parallax__inner { transform: none; transition: none; }
  .hh-js .hh-bar { transition: none; width: var(--hh-bar-width, 0%); }
  .hh-js .hh-portrait { clip-path: none; opacity: 1; }
  .hh-js .hh-settle { transform: none; transition: none; }
  .hh-js .hh-hero__enter { opacity: 1; transform: none; transition: none; }
  .hh-js .hh-hero__line > span { transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* --------------------------------------------------------------- 07 forms */
.hh-field { display: block; }

.hh-input {
  width: 100%;
  height: 48px;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.25);
  padding-inline: 4px;
  font-size: 15px;
  color: var(--hh-ivory);
  outline: none;
  border-radius: 0;
  transition: border-color var(--hh-dur) var(--hh-ease);
}
.hh-input::placeholder { color: rgba(255,255,255,.35); }
.hh-input:focus { border-color: rgba(255,255,255,.7); }
.hh-input--area { height: auto; padding-block: 12px; resize: vertical; }
.hh-input--select { appearance: none; -webkit-appearance: none; }
.hh-input--select.is-empty { color: rgba(255,255,255,.35); }
.hh-input--select option { color: var(--hh-ink); }

/* Light-ground variant used in the home contact panel */
.hh-input--ink {
  border-bottom-color: rgba(16,19,17,.25);
  color: var(--hh-ink);
}
.hh-input--ink::placeholder { color: rgba(16,19,17,.4); }
.hh-input--ink:focus { border-color: var(--hh-forest); }

/* Tall input used by the consultation wizard */
.hh-input--lg {
  height: 56px;
  font-size: 18px;
  font-weight: 300;
}
@media (min-width: 768px) { .hh-input--lg { font-size: 20px; } }
.hh-input--lg::placeholder { color: rgba(255,255,255,.3); }

.hh-form-grid { display: grid; gap: 20px 32px; }
@media (min-width: 640px) { .hh-form-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.hh-form-panel {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--hh-r-card);
  padding: 28px;
}
@media (min-width: 768px) { .hh-form-panel { border-radius: var(--hh-r-card-md); padding: 48px; } }

.hh-form-title {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-form-title { font-size: 1.7rem; } }
.hh-form-title em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-form-title--ink { color: var(--hh-ink); }
.hh-form-title--ink em { color: var(--hh-forest); }

.hh-form-sub {
  font-size: 12px;
  letter-spacing: .01em;
  font-weight: 300;
  color: rgba(255,255,255,.4);
  margin-top: 12px;
}
.hh-form-sub--ink { color: rgba(16,19,17,.45); margin-top: 10px; }

/* Success state shared by every form on the site */
.hh-form-done { padding-block: 56px; text-align: center; }
.hh-form-done__icon { width: 40px; height: 40px; margin-inline: auto; color: var(--hh-sage); stroke-width: 1.25; }
.hh-form-done__icon--ink { color: var(--hh-forest); }
.hh-form-done__title {
  margin-top: 24px;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ivory);
}
.hh-form-done__title--ink { color: var(--hh-ink); }
.hh-form-done__body {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  margin-top: 16px;
  max-width: 24rem;
  margin-inline: auto;
  line-height: 1.8;
  font-weight: 300;
}
.hh-form-done__body--ink { color: rgba(16,19,17,.55); }

.hh-form-error {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 300;
  color: #F0A6A6;
}
.hh-form-error--ink { color: #A33; }
.hh-form-error[hidden] { display: none; }

.hh-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------- 08 header & navigation */
.hh-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  transition: background-color var(--hh-dur-slower) var(--hh-ease),
              backdrop-filter var(--hh-dur-slower) var(--hh-ease),
              border-color var(--hh-dur-slower) var(--hh-ease);
  border-bottom: 1px solid transparent;
}
.hh-header.is-scrolled,
.hh-header--solid {
  background: rgba(4,21,15,.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: rgba(255,255,255,.08);
}
.hh-header--solid { background: rgba(4,21,15,.85); }

.hh-nav {
  max-width: var(--hh-container);
  margin-inline: auto;
  padding-inline: var(--hh-gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) { .hh-nav { padding-inline: var(--hh-gutter-md); height: 80px; } }

.hh-brand { display: flex; align-items: baseline; gap: 10px; text-align: left; }
.hh-brand__mark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--hh-ivory);
  line-height: 1;
}
.hh-brand__by {
  font-family: var(--hh-font-display);
  font-style: italic;
  font-size: 14px;
  color: rgba(255,255,255,.6);
  line-height: 1;
}
@media (min-width: 768px) {
  .hh-brand__mark { font-size: 16px; }
  .hh-brand__by { font-size: 16px; }
}

.hh-nav__links { display: none; }
@media (min-width: 1024px) { .hh-nav__links { display: flex; align-items: center; gap: 32px; } }
.hh-nav--service .hh-nav__links { gap: 28px; }

.hh-nav__link {
  position: relative;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  transition: color var(--hh-dur) var(--hh-ease);
}
.hh-nav__link::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 0;
  height: 1px; width: 100%;
  background: rgba(255,255,255,.6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hh-dur) var(--hh-ease);
}
.hh-nav__link:hover { color: var(--hh-white); }
.hh-nav__link:hover::after { transform: scaleX(1); }
.hh-nav__link.is-current { color: var(--hh-white); }
.hh-nav__link.is-current::after { transform: scaleX(1); }

.hh-nav__toggle { padding: 8px; color: var(--hh-ivory); display: inline-flex; }
@media (min-width: 1024px) { .hh-nav__toggle { display: none; } }
.hh-nav__toggle svg { width: 24px; height: 24px; }
.hh-nav__toggle .hh-icon-close { display: none; }
.hh-nav__toggle[aria-expanded="true"] .hh-icon-close { display: block; }
.hh-nav__toggle[aria-expanded="true"] .hh-icon-menu { display: none; }

.hh-mobile-menu {
  display: none;
  background: rgba(4,21,15,.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 16px 24px 32px;
}
.hh-mobile-menu.is-open { display: block; }
@media (min-width: 1024px) { .hh-mobile-menu, .hh-mobile-menu.is-open { display: none; } }

.hh-mobile-menu__item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding-block: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hh-mobile-menu__num {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,.3);
  font-variant-numeric: tabular-nums;
}
.hh-mobile-menu__label {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--hh-ivory);
}
.hh-mobile-menu__item.is-current .hh-mobile-menu__label { color: var(--hh-sage); }
.hh-mobile-menu__cta {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 9999px;
  background: var(--hh-ivory);
  color: var(--hh-forest);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ------------------------------ 09 scroll progress & sticky contact bar */
.hh-scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--hh-sage);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 60;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .hh-scroll-progress { display: none; } }

.hh-sticky-bar {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  z-index: 40;
  transform: translateY(96px);
  opacity: 0;
  transition: transform var(--hh-dur-slow) var(--hh-ease), opacity var(--hh-dur-slow) var(--hh-ease);
  pointer-events: none;
}
.hh-sticky-bar.is-visible { transform: none; opacity: 1; pointer-events: auto; }
@media (min-width: 768px) { .hh-sticky-bar { display: none; } }

.hh-sticky-bar__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(4,21,15,.45);
  border: 1px solid rgba(255,255,255,.1);
}
.hh-sticky-bar__link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.hh-sticky-bar__link svg { width: 16px; height: 16px; }
.hh-sticky-bar__link--whatsapp {
  background: rgba(10,38,29,.95);
  backdrop-filter: blur(12px);
  color: var(--hh-ivory);
}
.hh-sticky-bar__link--whatsapp svg { color: var(--hh-sage); }
.hh-sticky-bar__link--call {
  background: rgba(247,246,241,.95);
  backdrop-filter: blur(12px);
  color: var(--hh-forest);
}

/* ==========================================================================
   HOME — hero
   ========================================================================== */
.hh-hero {
  position: relative;
  min-height: 100svh;
  background: var(--hh-deep);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hh-hero__bg { position: absolute; inset: -8% 0; will-change: transform; }
.hh-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.hh-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(4,21,15,.85), rgba(10,38,29,.25) 50%, var(--hh-deep));
}

.hh-hero__portrait-desktop {
  display: none;
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 42%;
  max-width: 620px;
  align-items: flex-end;
  padding-bottom: 68px;
  z-index: 5;
}
@media (min-width: 1024px) { .hh-hero__portrait-desktop { display: flex; } }

.hh-portrait {
  position: relative;
  overflow: hidden;
  transition: clip-path 1.7s var(--hh-ease) .45s, opacity 1.7s var(--hh-ease) .45s;
}
.hh-js .hh-portrait { clip-path: inset(100% 0 0 0); opacity: .6; }
.hh-js .hh-portrait.is-visible { clip-path: inset(0 0 0 0); opacity: 1; }
.hh-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% var(--hh-focal-y, 25%);
}
.hh-portrait__veil-v {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--hh-deep), transparent 50%, rgba(4,21,15,.7));
}
.hh-portrait__veil-h {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--hh-deep), transparent 50%, rgba(4,21,15,.3));
}
.hh-hero__portrait-desktop .hh-portrait { width: 100%; aspect-ratio: 3 / 3.5; }

.hh-hero__portrait-mobile { position: relative; z-index: 5; width: 100%; }
@media (min-width: 1024px) { .hh-hero__portrait-mobile { display: none; } }
.hh-hero__portrait-mobile .hh-portrait { width: 100%; height: 34svh; }
@media (min-width: 640px) { .hh-hero__portrait-mobile .hh-portrait { height: 40svh; } }
@media (min-width: 768px) { .hh-hero__portrait-mobile .hh-portrait { height: 44svh; } }

.hh-hero__body {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--hh-container);
  margin-inline: auto;
  width: 100%;
  padding: 96px var(--hh-gutter) 32px;
}
@media (min-width: 768px) { .hh-hero__body { padding: 112px 40px 40px; } }
@media (min-width: 1024px) { .hh-hero__body { padding-inline: 48px; padding-bottom: 56px; } }

.hh-hero__eyebrow {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
@media (min-width: 768px) { .hh-hero__eyebrow { font-size: 11px; letter-spacing: 0.48em; } }

.hh-hero__title {
  margin-top: 20px;
  color: var(--hh-ivory);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.92;
  font-size: 17vw;
}
@media (min-width: 640px)  { .hh-hero__title { font-size: 12vw; } }
@media (min-width: 768px)  { .hh-hero__title { margin-top: 28px; font-size: 11vw; } }
@media (min-width: 1024px) { .hh-hero__title { font-size: 8.6vw; } }
@media (min-width: 1280px) { .hh-hero__title { font-size: 8.4rem; } }
.hh-hero__line { display: block; overflow: hidden; padding-bottom: 4px; }
.hh-js .hh-hero__line > span {
  display: block;
  transform: translateY(112%);
  transition: transform 1.25s var(--hh-ease);
  transition-delay: var(--hh-delay, 0ms);
}
.is-loaded .hh-hero__line > span { transform: none; }

.hh-hero__signature { margin-top: 8px; display: flex; align-items: center; gap: 16px; }
@media (min-width: 768px) { .hh-hero__signature { margin-top: 16px; } }
.hh-hero__signature .hh-rule { width: 32px; background: rgba(255,255,255,.3); }
@media (min-width: 768px) { .hh-hero__signature .hh-rule { width: 40px; } }
.hh-hero__signature p {
  font-family: var(--hh-font-display);
  font-style: italic;
  font-size: 24px;
  color: var(--hh-sage);
}
@media (min-width: 768px)  { .hh-hero__signature p { font-size: 30px; } }
@media (min-width: 1024px) { .hh-hero__signature p { font-size: 36px; } }

.hh-hero__lede {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.55);
  max-width: 28rem;
  font-weight: 300;
}
@media (min-width: 768px) { .hh-hero__lede { margin-top: 32px; font-size: 15px; } }

.hh-hero__actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) { .hh-hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; } }
@media (min-width: 768px) { .hh-hero__actions { margin-top: 36px; } }

.hh-js .hh-hero__enter {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--hh-ease), transform 1.1s var(--hh-ease);
  transition-delay: var(--hh-delay, 0ms);
}
.is-loaded .hh-hero__enter { opacity: 1; transform: none; }

.hh-marquee {
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hh-marquee__viewport { display: flex; overflow: hidden; padding-block: 16px; }
@media (min-width: 768px) { .hh-marquee__viewport { padding-block: 20px; } }
.hh-marquee__item { display: flex; align-items: center; white-space: nowrap; }
.hh-marquee__label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  padding-inline: 32px;
}
.hh-marquee__dot {
  width: 4px; height: 4px;
  border-radius: 9999px;
  background: rgba(157,195,177,.5);
  display: inline-block;
  flex-shrink: 0;
}

/* ==========================================================================
   HOME — track record
   ========================================================================== */
.hh-track { position: relative; z-index: 10; background: var(--hh-ivory); padding-block: 48px; }
@media (min-width: 768px) { .hh-track { padding-block: 112px; } }

.hh-track__lede {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 300;
  color: rgba(16,19,17,.6);
  max-width: 28rem;
  line-height: 1.7;
}
@media (min-width: 768px) { .hh-track__lede { font-size: 18px; } }
.hh-track__lede em {
  font-family: var(--hh-font-display);
  font-style: italic;
  color: var(--hh-forest);
  font-size: 1.15em;
}

.hh-track__figure {
  margin-top: 32px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 12px;
}
@media (min-width: 768px) { .hh-track__figure { margin-top: 40px; column-gap: 20px; } }
.hh-track__unit {
  font-size: 16px;
  font-weight: 300;
  color: rgba(16,19,17,.5);
  letter-spacing: 0.04em;
}
@media (min-width: 768px) { .hh-track__unit { font-size: 24px; } }
.hh-track__value {
  font-size: 21vw;
  line-height: 0.85;
  font-weight: 500;
  letter-spacing: -0.055em;
  color: var(--hh-forest);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px)  { .hh-track__value { font-size: 15vw; } }
@media (min-width: 1024px) { .hh-track__value { font-size: 11rem; } }
.hh-track__plus { font-size: 36px; font-weight: 300; color: var(--hh-forest-mid); }
@media (min-width: 768px) { .hh-track__plus { font-size: 60px; } }
.hh-track__figure-note {
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(16,19,17,.4);
}

.hh-track__years { margin-top: 40px; max-width: 48rem; }
@media (min-width: 768px) { .hh-track__years { margin-top: 56px; } }
.hh-track__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
}
@media (min-width: 768px) { .hh-track__row { gap: 32px; padding-block: 14px; } }
.hh-track__year {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(16,19,17,.5);
  width: 40px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .hh-track__year { font-size: 14px; width: 56px; } }
.hh-track__gauge {
  flex: 1;
  min-width: 0;
  height: 8px;
  border-radius: 9999px;
  background: rgba(10,38,29,.08);
  overflow: hidden;
}
@media (min-width: 768px) { .hh-track__gauge { height: 10px; } }
.hh-track__gauge .hh-bar { background: linear-gradient(to right, var(--hh-forest), var(--hh-forest-mid)); }
.hh-track__amount {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hh-forest);
  width: 5.5rem;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .hh-track__amount { font-size: 18px; width: 8rem; } }

.hh-track__meta {
  margin-top: 40px;
  display: grid;
  gap: 32px;
  border-top: 1px solid rgba(10,38,29,.1);
  padding-top: 32px;
}
@media (min-width: 640px) { .hh-track__meta { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 768px) { .hh-track__meta { margin-top: 56px; } }
.hh-track__meta-value {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--hh-forest);
}
@media (min-width: 768px) { .hh-track__meta-value { font-size: 24px; } }
.hh-track__meta-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(16,19,17,.4);
  margin-top: 6px;
  line-height: 1.625;
}

/* ==========================================================================
   HOME — financial lens
   ========================================================================== */
.hh-lens__grid {
  display: grid;
  gap: 48px;
  margin-top: 48px;
  align-items: start;
}
@media (min-width: 768px)  { .hh-lens__grid { margin-top: 64px; } }
@media (min-width: 1024px) { .hh-lens__grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 40px; } }
.hh-lens__media { grid-column: span 5 / span 5; }
.hh-lens__media .hh-parallax {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--hh-r-card);
}
@media (min-width: 768px)  { .hh-lens__media .hh-parallax { border-radius: var(--hh-r-card-md); } }
@media (min-width: 1024px) { .hh-lens__media .hh-parallax { aspect-ratio: 4 / 4.4; } }
.hh-lens__body { grid-column: span 7 / span 7; }
@media (min-width: 1024px) { .hh-lens__body { padding-left: 24px; } }

.hh-lens__intro {
  color: rgba(255,255,255,.55);
  font-size: 15px;
  line-height: 1.85;
  font-weight: 300;
  max-width: 36rem;
}
.hh-lens__pillars { margin-top: 40px; }
.hh-pillar {
  display: grid;
  gap: 8px;
  padding-block: 28px;
  border-top: 1px solid rgba(255,255,255,.1);
  transition: padding-left var(--hh-dur-slow) var(--hh-ease);
}
.hh-pillar:hover { padding-left: 8px; }
@media (min-width: 768px) { .hh-pillar { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; } }
.hh-pillar__num { grid-column: span 1 / span 1; padding-top: 6px; }
.hh-pillar__title {
  grid-column: span 4 / span 4;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-pillar__title { font-size: 20px; } }
.hh-pillar__body {
  grid-column: span 7 / span 7;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.45);
  font-weight: 300;
}
.hh-lens__badge {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  padding: 12px 24px;
}
.hh-lens__badge span:first-child {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--hh-sage);
}
.hh-lens__badge p {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* ==========================================================================
   HOME — services (split-screen on desktop, image slides on mobile)
   ========================================================================== */
.hh-services__split { display: none; }
@media (min-width: 1024px) {
  .hh-services__split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: 48px;
    margin-top: 56px;
  }
  .hh-services__list  { grid-column: span 6 / span 6; }
  .hh-services__stage { grid-column: span 6 / span 6; }
}

.hh-service-row {
  width: 100%;
  text-align: left;
  padding-block: 24px;
  border-bottom: 1px solid rgba(10,38,29,.1);
  display: block;
}
.hh-service-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hh-service-row__title {
  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
  color: rgba(16,19,17,.25);
  transition: color var(--hh-dur-slow) var(--hh-ease);
}
@media (min-width: 1280px) { .hh-service-row__title { font-size: 3rem; } }
.hh-service-row.is-active .hh-service-row__title { color: var(--hh-forest); }

.hh-service-row__dot {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(10,38,29,.15);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--hh-dur-slow) var(--hh-ease),
              border-color var(--hh-dur-slow) var(--hh-ease);
}
.hh-service-row__dot svg {
  width: 16px; height: 16px;
  color: rgba(16,19,17,.4);
  transition: color var(--hh-dur-slow) var(--hh-ease);
}
.hh-service-row.is-active .hh-service-row__dot { background: var(--hh-forest); border-color: var(--hh-forest); }
.hh-service-row.is-active .hh-service-row__dot svg { color: var(--hh-ivory); }

.hh-service-row__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--hh-dur-slow) var(--hh-ease), opacity var(--hh-dur-slow) var(--hh-ease);
}
.hh-service-row.is-active .hh-service-row__body { grid-template-rows: 1fr; opacity: 1; }
.hh-service-row__body > span { overflow: hidden; }
.hh-service-row__body p {
  padding-top: 12px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(16,19,17,.5);
  font-weight: 300;
  max-width: 28rem;
}

.hh-services__frame {
  position: sticky;
  top: 112px;
  height: 70vh;
  border-radius: var(--hh-r-card-md);
  overflow: hidden;
}
.hh-services__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s var(--hh-ease), transform .9s var(--hh-ease);
  pointer-events: none;
}
.hh-services__slide.is-active { opacity: 1; transform: none; }
.hh-services__slide img { width: 100%; height: 100%; object-fit: cover; }
.hh-services__frame-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(4,21,15,.8), transparent);
  padding: 80px 32px 32px;
}
.hh-services__frame-label p {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.hh-services__frame-label span { display: none; }
.hh-services__frame-label span.is-active { display: block; }

.hh-services__cards { margin-top: 40px; display: grid; gap: 20px; }
@media (min-width: 1024px) { .hh-services__cards { display: none; } }
.hh-service-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--hh-r-card);
  overflow: hidden;
  aspect-ratio: 4 / 4.6;
}
.hh-service-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hh-service-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--hh-deep), rgba(4,21,15,.7) 50%, rgba(4,21,15,.1));
}
.hh-service-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
.hh-service-card__label {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.hh-service-card__title {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ivory);
  margin-top: 8px;
}
.hh-service-card__text {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  font-weight: 300;
  margin-top: 8px;
}
.hh-service-card__cta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hh-white);
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 4px;
}
.hh-service-card__cta svg { width: 14px; height: 14px; }

/* ==========================================================================
   HOME — selected transactions
   ========================================================================== */
.hh-tx__list { margin-top: 56px; display: grid; gap: 80px; }
@media (min-width: 768px) { .hh-tx__list { margin-top: 80px; gap: 112px; } }

.hh-tx__item { display: grid; gap: 32px; align-items: end; }
@media (min-width: 1024px) {
  .hh-tx__item { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 48px; }
  .hh-tx__media { grid-column: span 7 / span 7; }
  .hh-tx__body  { grid-column: span 5 / span 5; }
  .hh-tx__item--flipped .hh-tx__media { order: 2; grid-column: 6 / span 7; }
  .hh-tx__item--flipped .hh-tx__body  { order: 1; grid-column: 1 / span 4; }
}
.hh-tx__media .hh-parallax {
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: var(--hh-r-card);
}
@media (min-width: 768px) { .hh-tx__media .hh-parallax { border-radius: var(--hh-r-card-md); } }
.hh-tx__media--wide .hh-parallax { aspect-ratio: 16 / 10; }

.hh-tx__num {
  font-size: 60px;
  font-weight: 300;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,.1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .hh-tx__num { font-size: 96px; } }
.hh-tx__title {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-tx__title { font-size: 2rem; } }
.hh-tx__place { font-size: 13px; color: rgba(255,255,255,.4); margin-top: 6px; font-weight: 300; }
.hh-tx__facts {
  margin-top: 28px;
  display: grid;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px;
  max-width: 24rem;
}
.hh-tx__fact { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.hh-tx__fact dt {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}
.hh-tx__fact dd {
  font-family: var(--hh-font-display);
  font-style: italic;
  font-size: 15px;
  color: rgba(255,255,255,.35);
}
.hh-tx__pill {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 20px;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.hh-tx__pill span:first-child {
  width: 4px; height: 4px;
  border-radius: 9999px;
  background: rgba(157,195,177,.7);
}

/* ==========================================================================
   HOME — opportunities rail
   ========================================================================== */
.hh-rail {
  margin-top: 40px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--hh-gutter);
  padding-bottom: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hh-rail::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .hh-rail { margin-top: 64px; gap: 32px; padding-inline: var(--hh-gutter-md); } }

.hh-opp-card {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 82%;
}
@media (min-width: 640px)  { .hh-opp-card { width: 58%; } }
@media (min-width: 1024px) { .hh-opp-card { width: 38%; } }

.hh-opp-card__frame {
  position: relative;
  border-radius: var(--hh-r-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
@media (min-width: 768px) { .hh-opp-card__frame { border-radius: var(--hh-r-card-md); } }
.hh-opp-card__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1400ms ease-out;
}
.hh-opp-card:hover .hh-opp-card__frame img { transform: scale(1.05); }
.hh-opp-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,21,15,.85), transparent 50%);
}
.hh-opp-card__status {
  position: absolute;
  top: 20px; left: 20px;
  border-radius: 9999px;
  background: rgba(4,21,15,.7);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.85);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 8px 16px;
}
.hh-opp-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
@media (min-width: 768px) { .hh-opp-card__body { padding: 28px; } }
.hh-opp-card__name {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-opp-card__name { font-size: 24px; } }
.hh-opp-card__meta { font-size: 12px; color: rgba(255,255,255,.7); font-weight: 300; margin-top: 4px; }
.hh-opp-card__cta { margin-top: 16px; }
.hh-opp-card:hover .hh-opp-card__cta { gap: 16px; border-color: var(--hh-forest); }

.hh-rail-hint { margin-top: 20px; }

/* ==========================================================================
   HOME — why sajawal
   ========================================================================== */
.hh-why { background: var(--hh-ivory); padding-top: 16px; padding-bottom: 56px; }
@media (min-width: 768px) { .hh-why { padding-bottom: 128px; } }
.hh-why__panel {
  background: var(--hh-white);
  border-radius: var(--hh-r-panel);
  padding: 56px 24px;
  box-shadow: 0 2px 40px rgba(10,38,29,.05);
}
@media (min-width: 768px) { .hh-why__panel { border-radius: var(--hh-r-panel-md); padding: 80px 64px; } }
.hh-why__grid { display: grid; column-gap: 48px; margin-top: 32px; }
@media (min-width: 640px)  { .hh-why__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 768px)  { .hh-why__grid { margin-top: 48px; } }
@media (min-width: 1024px) { .hh-why__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.hh-why__item { padding-block: 24px; border-top: 1px solid rgba(10,38,29,.1); }
.hh-why__title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hh-forest);
  line-height: 1.375;
  margin-top: 10px;
}
@media (min-width: 768px) { .hh-why__title { font-size: 16px; } }
.hh-why__body {
  font-size: 13px;
  color: rgba(16,19,17,.5);
  line-height: 1.7;
  margin-top: 8px;
  font-weight: 300;
}

/* ==========================================================================
   HOME — intent concierge
   ========================================================================== */
.hh-concierge {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) { .hh-concierge { min-height: 92svh; } }
.hh-concierge__stage > [data-concierge-view] { display: none; }
.hh-concierge__stage > [data-concierge-view].is-active { display: block; animation: hh-view-in .6s var(--hh-ease); }
@keyframes hh-view-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hh-intent-list { margin-top: 40px; border-top: 1px solid rgba(255,255,255,.1); }
@media (min-width: 768px) { .hh-intent-list { margin-top: 56px; } }
.hh-intent {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: padding-left var(--hh-dur-slow) var(--hh-ease);
}
@media (min-width: 768px) { .hh-intent { padding-block: 32px; } }
.hh-intent:hover { padding-left: 16px; }
.hh-intent__left { display: flex; align-items: baseline; gap: 20px; min-width: 0; }
@media (min-width: 768px) { .hh-intent__left { gap: 32px; } }
.hh-intent__label {
  display: block;
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
  color: rgba(255,255,255,.3);
  transition: color var(--hh-dur-slow) var(--hh-ease);
}
@media (min-width: 768px) { .hh-intent__label { font-size: 3.6rem; } }
.hh-intent:hover .hh-intent__label { color: var(--hh-ivory); }
.hh-intent__note {
  display: block;
  font-size: 13px;
  color: transparent;
  margin-top: 0;
  font-weight: 300;
  transition: color var(--hh-dur-slow) var(--hh-ease), margin-top var(--hh-dur-slow) var(--hh-ease);
}
.hh-intent:hover .hh-intent__note { color: rgba(255,255,255,.45); margin-top: 8px; }
.hh-intent__dot {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--hh-dur-slow) var(--hh-ease), border-color var(--hh-dur-slow) var(--hh-ease);
}
@media (min-width: 768px) { .hh-intent__dot { width: 48px; height: 48px; } }
.hh-intent__dot svg {
  width: 16px; height: 16px;
  color: rgba(255,255,255,.5);
  transition: color var(--hh-dur-slow) var(--hh-ease);
}
.hh-intent:hover .hh-intent__dot { background: var(--hh-ivory); border-color: var(--hh-ivory); }
.hh-intent:hover .hh-intent__dot svg { color: var(--hh-forest); }

.hh-concierge__flow { max-width: 42rem; }
.hh-concierge__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  transition: color var(--hh-dur) var(--hh-ease);
}
.hh-concierge__back:hover { color: rgba(255,255,255,.75); }
.hh-concierge__back svg { width: 14px; height: 14px; }
.hh-concierge__title {
  margin-top: 28px;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-concierge__title { font-size: 3rem; } }
.hh-concierge__title em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-concierge__note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.5);
  font-weight: 300;
  max-width: 28rem;
}
.hh-concierge__form { margin-top: 36px; max-width: 32rem; }
.hh-concierge__form .hh-btn { grid-column: 1 / -1; margin-top: 8px; width: 100%; }
@media (min-width: 640px) { .hh-concierge__form .hh-btn { width: auto; justify-self: start; } }
.hh-concierge__done { padding-block: 40px; }
.hh-concierge__done h3 {
  margin-top: 24px;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-concierge__done h3 { font-size: 36px; } }
.hh-concierge__done h3 em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-concierge__done p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,.55);
  font-weight: 300;
  max-width: 28rem;
}

/* ==========================================================================
   HOME — seller section
   ========================================================================== */
.hh-seller { position: relative; }
.hh-seller__bg { position: absolute; inset: 0; opacity: .15; }
.hh-seller__bg img { width: 100%; height: 100%; object-fit: cover; }
.hh-seller__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--hh-forest), rgba(10,38,29,.4) 50%, var(--hh-forest));
}
.hh-seller__grid {
  position: relative;
  display: grid;
  gap: 56px;
  padding-block: 56px;
}
@media (min-width: 768px)  { .hh-seller__grid { padding-block: 128px; } }
@media (min-width: 1024px) {
  .hh-seller__grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 40px; }
  .hh-seller__copy, .hh-seller__form { grid-column: span 6 / span 6; }
}
.hh-seller__heading {
  margin-top: 24px;
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-seller__heading { font-size: 3.2rem; } }
.hh-seller__heading em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-seller__lede {
  color: rgba(255,255,255,.55);
  font-size: 15px;
  line-height: 1.85;
  margin-top: 28px;
  max-width: 32rem;
  font-weight: 300;
}
.hh-seller__points { margin-top: 36px; max-width: 32rem; border-top: 1px solid rgba(255,255,255,.1); }
.hh-seller__point {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-block: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.hh-seller__point p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.625; font-weight: 300; }

/* ==========================================================================
   HOME — client words
   ========================================================================== */
.hh-words { position: relative; overflow: hidden; }
.hh-words__glyph {
  position: absolute;
  top: -24px; left: 0; right: 0;
  font-size: 34vw;
  line-height: 1;
  font-family: var(--hh-font-display);
  font-style: italic;
  color: rgba(10,38,29,.05);
  user-select: none;
  pointer-events: none;
  text-align: center;
}
@media (min-width: 768px) { .hh-words__glyph { top: -56px; font-size: 24vw; } }
.hh-words__stage { margin-top: 36px; min-height: 20rem; position: relative; }
@media (min-width: 768px) { .hh-words__stage { margin-top: 56px; min-height: 17rem; } }
.hh-words__item { display: none; }
.hh-words__item.is-active { display: block; animation: hh-quote-in .6s var(--hh-ease); }
@keyframes hh-quote-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hh-words__quote {
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.4;
  color: var(--hh-ink);
}
@media (min-width: 768px) { .hh-words__quote { font-size: 2.3rem; line-height: 1.32; } }
.hh-words__quote em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-forest); }
.hh-words__foot {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 6px;
  border-top: 1px solid rgba(10,38,29,.1);
  padding-top: 20px;
}
@media (min-width: 768px) { .hh-words__foot { margin-top: 36px; } }
.hh-words__name {
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hh-forest);
}
.hh-words__role {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(16,19,17,.45);
}
.hh-words__detail { font-size: 11.5px; color: rgba(16,19,17,.35); font-weight: 300; }
.hh-carousel-nav { margin-top: 24px; display: flex; align-items: center; gap: 12px; }

/* ==========================================================================
   HOME — recognition
   ========================================================================== */
.hh-recognition { background: var(--hh-ivory); padding-bottom: 56px; }
@media (min-width: 768px) { .hh-recognition { padding-bottom: 128px; } }
.hh-recognition__list { margin-top: 40px; border-top: 1px solid rgba(10,38,29,.1); }
@media (min-width: 768px) { .hh-recognition__list { margin-top: 56px; } }
.hh-recognition__item {
  display: grid;
  gap: 8px;
  align-items: baseline;
  padding-block: 24px;
  border-bottom: 1px solid rgba(10,38,29,.1);
  transition: padding-left var(--hh-dur-slow) var(--hh-ease);
}
.hh-recognition__item:hover { padding-left: 12px; }
@media (min-width: 768px) {
  .hh-recognition__item { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 32px; padding-block: 28px; }
}
.hh-recognition__num { grid-column: span 1 / span 1; }
.hh-recognition__title {
  grid-column: span 6 / span 6;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ink);
  transition: color var(--hh-dur) var(--hh-ease);
}
@media (min-width: 768px) { .hh-recognition__title { font-size: 24px; } }
.hh-recognition__item:hover .hh-recognition__title { color: var(--hh-forest); }
.hh-recognition__detail {
  grid-column: span 5 / span 5;
  font-size: 13px;
  letter-spacing: .01em;
  color: rgba(16,19,17,.45);
  font-weight: 300;
}
@media (min-width: 768px) { .hh-recognition__detail { text-align: right; } }

/* ==========================================================================
   HOME — about
   ========================================================================== */
.hh-about { position: relative; overflow: hidden; }
@media (min-width: 768px) { .hh-about { padding-block: 144px; } }
.hh-about__bg { position: absolute; inset: 0; }
.hh-about__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.hh-about__bg .hh-veil {
  background: linear-gradient(to bottom, var(--hh-deep), rgba(4,21,15,.55) 50%, var(--hh-deep));
}
.hh-about__heading {
  margin-top: 28px;
  max-width: 48rem;
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-about__heading { font-size: 3.6rem; } }
.hh-about__heading em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-about__lede {
  margin-top: 32px;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255,255,255,.55);
  font-weight: 300;
  max-width: 36rem;
}
@media (min-width: 768px) { .hh-about__lede { font-size: 16px; } }
.hh-about__tags { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hh-tag {
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  padding: 10px 20px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.hh-about__journey {
  margin-top: 56px;
  display: grid;
  column-gap: 40px;
  row-gap: 40px;
}
@media (min-width: 640px)  { .hh-about__journey { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 768px)  { .hh-about__journey { margin-top: 80px; } }
@media (min-width: 1024px) { .hh-about__journey { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.hh-about__step { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; }
.hh-about__period {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--hh-ivory);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .hh-about__period { font-size: 36px; } }
.hh-about__role {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255,255,255,.45);
  font-weight: 300;
}

/* ==========================================================================
   HOME — FAQ accordion
   ========================================================================== */
.hh-faq__heading {
  margin-top: 24px;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--hh-ink);
}
@media (min-width: 768px) { .hh-faq__heading { font-size: 3.2rem; } }
.hh-faq__heading em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-forest); }
.hh-faq__list { margin-top: 40px; }
@media (min-width: 768px) { .hh-faq__list { margin-top: 56px; } }
.hh-faq__item { border-bottom: 1px solid rgba(16,19,17,.1); }
.hh-faq__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hh-ink);
  transition: color var(--hh-dur) var(--hh-ease);
}
@media (min-width: 768px) { .hh-faq__trigger { font-size: 18px; } }
.hh-faq__trigger:hover { color: var(--hh-forest); }
.hh-faq__chevron {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: rgba(16,19,17,.5);
  transition: transform 200ms var(--hh-ease);
}
.hh-faq__trigger[aria-expanded="true"] .hh-faq__chevron { transform: rotate(180deg); }
.hh-faq__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 200ms ease-out;
}
.hh-js .hh-faq__panel { grid-template-rows: 0fr; }
.hh-faq__panel.is-open { grid-template-rows: 1fr; }
.hh-faq__panel > div { overflow: hidden; }
.hh-faq__panel p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(16,19,17,.6);
  font-weight: 300;
  padding-bottom: 24px;
}

/* ==========================================================================
   HOME — contact
   ========================================================================== */
.hh-contact__grid { display: grid; gap: 56px; }
@media (min-width: 768px)  { .hh-contact__grid { gap: 40px; } }
@media (min-width: 1024px) {
  .hh-contact__grid { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .hh-contact__aside { grid-column: span 5 / span 5; }
  .hh-contact__panel { grid-column: span 7 / span 7; }
}
.hh-contact__heading {
  margin-top: 24px;
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--hh-ink);
}
@media (min-width: 768px) { .hh-contact__heading { font-size: 3.2rem; } }
.hh-contact__heading em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-forest); }
.hh-contact__lede {
  font-size: 15px;
  color: rgba(16,19,17,.55);
  line-height: 1.85;
  margin-top: 28px;
  max-width: 28rem;
  font-weight: 300;
}
.hh-contact__methods { margin-top: 36px; }
.hh-method {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 16px;
  border-bottom: 1px solid rgba(16,19,17,.1);
  transition: padding-left var(--hh-dur-slow) var(--hh-ease);
}
.hh-method:hover { padding-left: 12px; }
.hh-method__icon {
  width: 40px; height: 40px;
  border-radius: 9999px;
  background: rgba(10,38,29,.05);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--hh-dur) var(--hh-ease);
}
.hh-method__icon svg {
  width: 16px; height: 16px;
  color: var(--hh-forest);
  transition: color var(--hh-dur) var(--hh-ease);
}
.hh-method:hover .hh-method__icon { background: var(--hh-forest); }
.hh-method:hover .hh-method__icon svg { color: var(--hh-ivory); }
.hh-method__label {
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(16,19,17,.4);
  width: 64px;
  flex-shrink: 0;
}
@media (min-width: 768px) { .hh-method__label { width: 80px; } }
.hh-method__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 300;
  color: var(--hh-ink);
  transition: color var(--hh-dur-fast) var(--hh-ease);
}
@media (min-width: 768px) { .hh-method__value { font-size: 14.5px; } }
.hh-method:hover .hh-method__value { color: var(--hh-forest); }


.hh-contact__card {
  background: var(--hh-ivory);
  border-radius: var(--hh-r-card);
  padding: 28px;
  height: 100%;
}
@media (min-width: 768px) { .hh-contact__card { border-radius: var(--hh-r-card-md); padding: 48px; } }
.hh-contact__card .hh-form-done { padding-block: 80px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.hh-footer { position: relative; overflow: hidden; background: var(--hh-deep); }
.hh-footer__grid {
  display: grid;
  gap: 48px;
  padding-top: 64px;
}
@media (min-width: 768px) {
  .hh-footer__grid { grid-template-columns: repeat(12, minmax(0,1fr)); padding-top: 96px; }
  .hh-footer__brand { grid-column: span 5 / span 5; }
  .hh-footer__nav   { grid-column: span 3 / span 3; }
  .hh-footer__contact { grid-column: span 4 / span 4; }
}
.hh-footer__logo { display: flex; align-items: baseline; gap: 10px; }
.hh-footer__logo-mark { font-size: 18px; font-weight: 600; letter-spacing: 0.18em; color: var(--hh-ivory); }
.hh-footer__logo-by {
  font-family: var(--hh-font-display);
  font-style: italic;
  font-size: 18px;
  color: rgba(255,255,255,.6);
}
.hh-footer__tagline {
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-top: 8px;
}
.hh-footer__blurb {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  line-height: 1.85;
  margin-top: 28px;
  max-width: 24rem;
  font-weight: 300;
}
.hh-footer__label {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 20px;
}
.hh-footer__list { display: grid; gap: 12px; }
.hh-footer__link {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  font-weight: 300;
  transition: color var(--hh-dur) var(--hh-ease), padding-left var(--hh-dur) var(--hh-ease);
  text-align: left;
}
.hh-footer__link:hover { color: var(--hh-white); padding-left: 6px; }
.hh-footer__contact .hh-footer__link:hover { padding-left: 0; }
.hh-footer__place { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 28px; font-weight: 300; }
.hh-footer__wordmark {
  max-width: var(--hh-container);
  margin-inline: auto;
  padding-inline: var(--hh-gutter);
  margin-top: 56px;
  overflow: hidden;
}
@media (min-width: 768px) { .hh-footer__wordmark { padding-inline: var(--hh-gutter-md); margin-top: 80px; } }
.hh-footer__wordmark p {
  color: rgba(255,255,255,.05);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.78;
  font-size: 13vw;
  white-space: nowrap;
  text-align: center;
  user-select: none;
  pointer-events: none;
}
.hh-footer__legal { border-top: 1px solid rgba(255,255,255,.08); }
.hh-footer__legal-inner {
  max-width: var(--hh-container);
  margin-inline: auto;
  padding: 24px var(--hh-gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
@media (min-width: 768px) { .hh-footer__legal-inner { padding-inline: var(--hh-gutter-md); } }
.hh-footer__legal-inner p {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
}

.hh-social { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hh-social__link {
  width: 44px; height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55);
  transition: border-color var(--hh-dur-slow) var(--hh-ease),
              color var(--hh-dur-slow) var(--hh-ease),
              background-color var(--hh-dur-slow) var(--hh-ease),
              transform var(--hh-dur-slow) var(--hh-ease);
}
.hh-social__link:hover {
  border-color: var(--hh-ivory);
  color: var(--hh-ivory);
  background: rgba(255,255,255,.06);
  transform: translateY(-2px);
}
.hh-social__link:active { transform: scale(.9); }
.hh-social__link svg { width: 17px; height: 17px; }

/* Service footer variant */
.hh-footer--service { background: var(--hh-deep); color: var(--hh-ivory); padding-top: 64px; padding-bottom: 112px; }
@media (min-width: 768px) { .hh-footer--service { padding-bottom: 56px; } }
.hh-footer--service .hh-footer__grid { padding-top: 0; gap: 40px; }
.hh-footer--service .hh-footer__brand { grid-column: span 5 / span 5; }
.hh-footer--service .hh-footer__nav { grid-column: span 4 / span 4; }
.hh-footer--service .hh-footer__contact { grid-column: span 3 / span 3; }
.hh-footer__servicemark { font-size: 15px; font-weight: 600; letter-spacing: 0.18em; }
.hh-footer__servicemark em {
  font-family: var(--hh-font-display);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,.6);
  letter-spacing: normal;
}
.hh-footer__bottom {
  max-width: var(--hh-container);
  margin-inline: auto;
  padding-inline: var(--hh-gutter);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 768px) {
  .hh-footer__bottom { padding-inline: var(--hh-gutter-md); flex-direction: row; align-items: center; justify-content: space-between; }
}
.hh-footer__bottom p { font-size: 11px; color: rgba(255,255,255,.3); font-weight: 300; }

/* ==========================================================================
   SERVICES — shared moments
   ========================================================================== */
.hh-moment { padding-block: 80px; }
@media (min-width: 768px) { .hh-moment { padding-block: 112px; } }

.hh-moment__heading {
  margin-top: 20px;
  font-size: 1.9rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--hh-ink);
}
@media (min-width: 768px) { .hh-moment__heading { font-size: 2.8rem; } }
.hh-moment__heading--light { color: var(--hh-ivory); }
.hh-moment__heading em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-forest); }
.hh-moment__heading--light em { color: var(--hh-sage); }
.hh-moment__heading--tight { line-height: 1.12; }
.hh-moment__heading--narrow { max-width: 42rem; }

/* ProofMoment */
.hh-proof__grid { margin-top: 40px; display: grid; gap: 40px; align-items: end; }
@media (min-width: 1024px) {
  .hh-proof__grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 64px; }
  .hh-proof__stat { grid-column: span 5 / span 5; }
  .hh-proof__body { grid-column: span 7 / span 7; }
}
.hh-proof__value {
  font-size: 3.4rem;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: var(--hh-ivory);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .hh-proof__value { font-size: 5.4rem; } }
.hh-proof__label {
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  line-height: 2;
}
.hh-proof__statement {
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.32;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-proof__statement { font-size: 2.1rem; } }
.hh-proof__statement em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-proof__support { margin-top: 36px; display: flex; flex-wrap: wrap; column-gap: 48px; row-gap: 20px; }

.hh-stat-brick { border-left: 1px solid rgba(255,255,255,.15); padding-left: 16px; }
.hh-stat-brick__value { font-size: 18px; font-weight: 300; color: var(--hh-ivory); }
@media (min-width: 768px) { .hh-stat-brick__value { font-size: 20px; } }
.hh-stat-brick__label {
  margin-top: 4px;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.hh-stat-brick--ink { border-left-color: rgba(10,38,29,.2); }
.hh-stat-brick--ink .hh-stat-brick__value { color: var(--hh-ink); font-size: 20px; letter-spacing: -0.02em; }
@media (min-width: 768px) { .hh-stat-brick--ink .hh-stat-brick__value { font-size: 24px; } }
.hh-stat-brick--ink .hh-stat-brick__label { color: rgba(16,19,17,.45); }

/* QuoteMoment */
.hh-quotes__stage { margin-top: 40px; min-height: 15rem; }
@media (min-width: 768px) { .hh-quotes__stage { min-height: 13rem; } }
.hh-quotes__item { display: none; }
.hh-quotes__item.is-active { display: block; animation: hh-quote-soft .5s var(--hh-ease); }
@keyframes hh-quote-soft { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hh-quotes__text {
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.35;
  color: var(--hh-ink);
}
@media (min-width: 768px) { .hh-quotes__text { font-size: 2.2rem; } }
.hh-quotes__text em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-forest); }
.hh-quotes--dark .hh-quotes__text { color: var(--hh-ivory); }
.hh-quotes--dark .hh-quotes__text em { color: var(--hh-sage); }
.hh-quotes__who {
  margin-top: 28px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(16,19,17,.45);
}
.hh-quotes--dark .hh-quotes__who { color: rgba(255,255,255,.4); }
.hh-quotes__nav { margin-top: 32px; display: flex; align-items: center; gap: 16px; }

/* QuietQuestions */
.hh-quiet__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .hh-quiet__grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 64px; }
  .hh-quiet__aside { grid-column: span 4 / span 4; }
  .hh-quiet__list  { grid-column: span 8 / span 8; }
}
.hh-quiet__list { border-top: 1px solid rgba(10,38,29,.1); }
.hh-quiet--dark .hh-quiet__list { border-top-color: rgba(255,255,255,.1); }
.hh-quiet__item { border-bottom: 1px solid rgba(10,38,29,.1); }
.hh-quiet--dark .hh-quiet__item { border-bottom-color: rgba(255,255,255,.1); }
.hh-quiet__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-block: 24px;
  text-align: left;
}
.hh-quiet__q {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--hh-ink);
  transition: color var(--hh-dur) var(--hh-ease);
}
@media (min-width: 768px) { .hh-quiet__q { font-size: 1.3rem; } }
.hh-quiet__trigger:hover .hh-quiet__q,
.hh-quiet__trigger[aria-expanded="true"] .hh-quiet__q { color: var(--hh-forest); }
.hh-quiet--dark .hh-quiet__q { color: var(--hh-ivory); }
.hh-quiet--dark .hh-quiet__trigger:hover .hh-quiet__q,
.hh-quiet--dark .hh-quiet__trigger[aria-expanded="true"] .hh-quiet__q { color: var(--hh-sage); }

.hh-plus {
  margin-top: 4px;
  flex-shrink: 0;
  color: rgba(16,19,17,.5);
  transition: transform var(--hh-dur) var(--hh-ease);
}
.hh-plus svg { width: 16px; height: 16px; }
.hh-quiet--dark .hh-plus { color: rgba(255,255,255,.45); }
[aria-expanded="true"] .hh-plus { transform: rotate(45deg); }

.hh-collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--hh-ease); }
.hh-js .hh-collapse { grid-template-rows: 0fr; }
.hh-collapse.is-open { grid-template-rows: 1fr; }
.hh-collapse > div { overflow: hidden; }
.hh-quiet__a {
  padding-bottom: 28px;
  padding-right: 32px;
  font-size: 14.5px;
  line-height: 1.85;
  font-weight: 300;
  max-width: 42rem;
  color: rgba(16,19,17,.5);
}
.hh-quiet--dark .hh-quiet__a { color: rgba(255,255,255,.45); }

/* CrossLinks */
.hh-crosslinks { background: var(--hh-deep); padding-block: 80px; }
@media (min-width: 768px) { .hh-crosslinks { padding-block: 96px; } }
.hh-crosslinks__heading {
  margin-top: 20px;
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-crosslinks__heading { font-size: 2.4rem; } }
.hh-crosslinks__heading em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-crosslinks__grid { margin-top: 40px; display: grid; gap: 16px; }
@media (min-width: 640px)  { .hh-crosslinks__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 768px)  { .hh-crosslinks__grid { gap: 20px; } }
@media (min-width: 1024px) { .hh-crosslinks__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.hh-crosslink {
  position: relative;
  display: block;
  border-radius: var(--hh-r-tile);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.hh-crosslink img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1200ms ease-out;
}
.hh-crosslink:hover img { transform: scale(1.05); }
.hh-crosslink__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,21,15,.9), rgba(4,21,15,.3) 50%, transparent);
}
.hh-crosslink__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.hh-crosslink__label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.hh-crosslink__title {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ivory);
  margin-top: 4px;
}
.hh-crosslink__dot {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--hh-dur) var(--hh-ease);
}
.hh-crosslink__dot svg { width: 14px; height: 14px; color: var(--hh-white); transition: color var(--hh-dur) var(--hh-ease); }
.hh-crosslink:hover .hh-crosslink__dot { background: var(--hh-ivory); }
.hh-crosslink:hover .hh-crosslink__dot svg { color: var(--hh-forest); }

/* ==========================================================================
   ConsultationFlow — the progressive wizard
   ========================================================================== */
.hh-consult {
  position: relative;
  background: var(--hh-forest);
  padding-block: 80px;
  overflow: hidden;
}
@media (min-width: 768px) { .hh-consult { padding-block: 112px; } }
.hh-consult__ghost {
  position: absolute;
  top: -9vw; left: 0;
  font-size: 22vw;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.06em;
  user-select: none;
  pointer-events: none;
}
.hh-consult__intro { text-align: center; }
.hh-consult__title {
  margin-top: 16px;
  font-size: 1.9rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-consult__title { font-size: 2.8rem; } }
.hh-consult__title em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-consult__sub { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.45); font-weight: 300; }

.hh-consult__panel {
  margin: 32px auto 0;
  width: 100%;
  max-width: 36rem;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--hh-r-card);
  padding: 20px;
  min-height: 24rem;
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) { .hh-consult__panel { padding: 24px; } }
@media (min-width: 768px) {
  .hh-consult__panel { margin-top: 56px; max-width: none; border-radius: var(--hh-r-card-md); padding: 48px; min-height: 26rem; }
}
.hh-consult__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hh-consult__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  transition: color var(--hh-dur) var(--hh-ease);
}
.hh-consult__back:hover { color: var(--hh-white); }
.hh-consult__back svg { width: 14px; height: 14px; }
.hh-consult__back[hidden] { visibility: hidden; display: inline-flex; pointer-events: none; }
.hh-consult__count {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,.4);
  font-variant-numeric: tabular-nums;
}
.hh-consult__count span { color: rgba(255,255,255,.2); }
.hh-consult__progress {
  margin-top: 16px;
  height: 1px;
  background: rgba(255,255,255,.1);
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
}
.hh-consult__progress span {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: var(--hh-sage);
  width: 0;
  transition: width .7s var(--hh-ease);
}
.hh-consult__stage { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 32px; }
.hh-consult__step { display: block; }
.hh-js .hh-consult__step { display: none; }
.hh-consult__step.is-active { display: block; animation: hh-step-in .38s var(--hh-ease); }
@keyframes hh-step-in { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
.hh-consult__step.is-active[data-direction="back"] { animation-name: hh-step-in-back; }
@keyframes hh-step-in-back { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }

.hh-consult__q {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-consult__q { font-size: 24px; } }
.hh-consult__q em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }

.hh-consult__options { margin-top: 28px; display: grid; gap: 12px; }
@media (min-width: 640px) { .hh-consult__options { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.hh-consult__option {
  height: 56px;
  padding-inline: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.15);
  text-align: left;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.75);
  transition: background-color var(--hh-dur) var(--hh-ease),
              border-color var(--hh-dur) var(--hh-ease),
              color var(--hh-dur) var(--hh-ease);
}
@media (min-width: 768px) { .hh-consult__option { height: 64px; } }
.hh-consult__option:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.04); }
.hh-consult__option.is-selected { background: var(--hh-ivory); color: var(--hh-forest); border-color: var(--hh-ivory); }

.hh-consult__text { margin-top: 28px; }
.hh-consult__text-actions { margin-top: 32px; display: flex; align-items: center; gap: 20px; }
.hh-consult__continue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding-inline: 32px;
  border-radius: 9999px;
  background: var(--hh-ivory);
  color: var(--hh-forest);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background-color var(--hh-dur) var(--hh-ease), opacity var(--hh-dur) var(--hh-ease);
}
.hh-consult__continue:hover { background: var(--hh-white); }
.hh-consult__continue[disabled] { opacity: .4; cursor: default; }
.hh-consult__continue svg { width: 14px; height: 14px; }
.hh-consult__skip {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  transition: color var(--hh-dur) var(--hh-ease);
}
.hh-consult__skip:hover { color: var(--hh-white); }
.hh-consult__fields { margin-top: 32px; display: grid; gap: 24px; }
.hh-consult__submit { margin-top: 40px; width: 100%; height: 56px; }
.hh-consult__fineprint {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,.35);
  font-weight: 300;
}
.hh-consult__done { margin: auto; padding-block: 40px; text-align: center; }
.hh-consult__done h3 {
  margin-top: 24px;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-consult__done h3 { font-size: 30px; } }

/* ==========================================================================
   BUY page
   ========================================================================== */
.hh-buy-hero { position: relative; background: var(--hh-ivory); padding-top: 112px; overflow: hidden; }
@media (min-width: 768px) { .hh-buy-hero { padding-top: 144px; } }
.hh-buy-hero__ghost {
  position: absolute;
  top: -8px; left: 12px;
  font-size: 22vw;
  line-height: 0.8;
  font-weight: 500;
  letter-spacing: -0.06em;
  user-select: none;
  pointer-events: none;
}
@media (min-width: 768px) { .hh-buy-hero__ghost { top: 0; left: 32px; font-size: 15vw; } }
.hh-buy-hero__body { position: relative; padding-top: 16vw; }
@media (min-width: 768px) { .hh-buy-hero__body { padding-top: 11vw; } }
.hh-buy-hero__title {
  margin-top: 24px;
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: var(--hh-ink);
}
@media (min-width: 768px)  { .hh-buy-hero__title { font-size: 5.4rem; } }
@media (min-width: 1024px) { .hh-buy-hero__title { font-size: 6.2rem; } }
.hh-buy-hero__title em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-forest); }
.hh-hero-lede--ink {
  margin-top: 28px;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(16,19,17,.55);
  font-weight: 300;
  max-width: 32rem;
}
@media (min-width: 768px) { .hh-hero-lede--ink { font-size: 15px; } }
.hh-hero-actions {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) { .hh-hero-actions { flex-direction: row; gap: 16px; } }
.hh-stat-row { margin-top: 48px; display: flex; flex-wrap: wrap; column-gap: 48px; row-gap: 20px; }
.hh-buy-hero__media { margin-top: 48px; }
@media (min-width: 768px) { .hh-buy-hero__media { margin-top: 64px; } }
.hh-buy-hero__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--hh-r-card);
  height: 38svh;
}
@media (min-width: 768px) { .hh-buy-hero__frame { border-radius: var(--hh-r-card-md); height: 62svh; } }
.hh-settle { position: absolute; inset: 0; transition: transform 2.2s var(--hh-ease); }
.hh-js .hh-settle { transform: scale(1.12); }
.hh-js .hh-settle.is-visible { transform: none; }
.hh-settle img { width: 100%; height: 100%; object-fit: cover; }

.hh-communities { background: var(--hh-forest); padding-block: 80px; }
@media (min-width: 768px) { .hh-communities { padding-block: 112px; } }
.hh-communities__rail {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-inline: var(--hh-gutter);
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hh-communities__rail::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .hh-communities__rail { margin-top: 56px; gap: 24px; padding-inline: var(--hh-gutter-md); } }
.hh-community { flex-shrink: 0; scroll-snap-align: start; width: 78vw; }
@media (min-width: 640px)  { .hh-community { width: 46vw; } }
@media (min-width: 1024px) { .hh-community { width: 28vw; } }
.hh-community__frame {
  position: relative;
  height: 58svh;
  border-radius: var(--hh-r-tile);
  overflow: hidden;
}
@media (min-width: 768px) { .hh-community__frame { height: 62svh; border-radius: var(--hh-r-tile-md); } }
.hh-community__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--hh-ease);
}
.hh-community:hover .hh-community__frame img { transform: scale(1.04); }
.hh-community__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,21,15,.9), rgba(4,21,15,.25) 50%, transparent);
}
.hh-community__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; }
@media (min-width: 768px) { .hh-community__body { padding: 28px; } }
.hh-community__tags {
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(157,195,177,.8);
}
.hh-community__name {
  margin-top: 10px;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-community__name { font-size: 1.9rem; } }
.hh-community__line { margin-top: 8px; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.6); font-weight: 300; }

/* Journey (scroll-spy) */
.hh-journey { background: var(--hh-ivory); padding-block: 80px; }
@media (min-width: 768px) { .hh-journey { padding-block: 112px; } }
.hh-journey__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .hh-journey__grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 64px; }
  .hh-journey__aside { grid-column: span 5 / span 5; }
  .hh-journey__list  { grid-column: span 7 / span 7; }
}
.hh-sticky-panel { position: static; }
@media (min-width: 1024px) { .hh-sticky-panel { position: sticky; top: 112px; } }
.hh-journey__lede {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(16,19,17,.5);
  font-weight: 300;
  max-width: 24rem;
}
.hh-journey__meter { display: none; margin-top: 40px; }
@media (min-width: 1024px) { .hh-journey__meter { display: block; } }
.hh-journey__phase {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(10,38,29,.6);
}
.hh-journey__counter {
  margin-top: 16px;
  font-size: 5.5rem;
  line-height: 0.85;
  font-weight: 500;
  letter-spacing: -0.06em;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.hh-journey__track {
  margin-top: 24px;
  height: 1px;
  background: rgba(10,38,29,.1);
  position: relative;
  overflow: hidden;
}
.hh-journey__track span {
  position: absolute; inset: 0 auto 0 0;
  background: var(--hh-forest);
  width: 10%;
  transition: width var(--hh-dur-slow) var(--hh-ease);
}
.hh-journey__phase-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(10,38,29,.5);
}
.hh-journey__steps { margin-top: 16px; border-top: 1px solid rgba(10,38,29,.1); }
.hh-journey__group + .hh-journey__group { margin-top: 48px; }
.hh-step {
  display: flex;
  gap: 20px;
  padding-block: 24px;
  border-bottom: 1px solid rgba(10,38,29,.1);
}
@media (min-width: 768px) { .hh-step { gap: 32px; } }
.hh-step__num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(10,38,29,.4);
  font-variant-numeric: tabular-nums;
  padding-top: 8px;
  flex-shrink: 0;
}
.hh-step__title {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ink);
}
@media (min-width: 768px) { .hh-step__title { font-size: 1.4rem; } }
.hh-step__body {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(16,19,17,.5);
  font-weight: 300;
  max-width: 28rem;
}

/* ==========================================================================
   SELL page
   ========================================================================== */
.hh-sell-hero { position: relative; background: var(--hh-deep); }
@media (min-width: 1024px) {
  .hh-sell-hero { min-height: 100svh; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.hh-sell-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 112px var(--hh-gutter) 48px;
}
@media (min-width: 768px)  { .hh-sell-hero__copy { padding: 144px var(--hh-gutter-md) 48px; } }
@media (min-width: 1024px) { .hh-sell-hero__copy { padding: 96px 64px 64px; } }
.hh-sell-hero__title {
  margin-top: 28px;
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--hh-ivory);
}
@media (min-width: 768px)  { .hh-sell-hero__title { font-size: 4.6rem; } }
@media (min-width: 1024px) { .hh-sell-hero__title { font-size: 4.4rem; } }
@media (min-width: 1280px) { .hh-sell-hero__title { font-size: 5.2rem; } }
.hh-sell-hero__title em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-hero-lede--light {
  margin-top: 28px;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(255,255,255,.55);
  font-weight: 300;
  max-width: 28rem;
}
.hh-stage-index { margin-top: 48px; display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 12px; }
@media (min-width: 1024px) { .hh-stage-index { margin-top: 64px; } }
.hh-stage-index li { display: flex; align-items: baseline; gap: 10px; }
.hh-stage-index__num { font-size: 9px; letter-spacing: 0.2em; color: rgba(157,195,177,.7); font-variant-numeric: tabular-nums; }
.hh-stage-index__label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.5); }

.hh-sell-hero__media { position: relative; height: 52svh; overflow: hidden; }
@media (min-width: 1024px) { .hh-sell-hero__media { height: auto; } }
.hh-sell-hero__media .hh-settle.is-loaded { transform: none; }
.hh-sell-hero__media .hh-settle { transition-duration: 2.4s; }
.hh-sell-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,21,15,.7), transparent 50%, rgba(4,21,15,.25));
}
@media (min-width: 1024px) {
  .hh-sell-hero__veil { background: linear-gradient(to right, rgba(4,21,15,.55), transparent 50%, transparent); }
}
.hh-sell-hero__credit {
  position: absolute;
  bottom: 20px; right: 20px;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
@media (min-width: 768px) { .hh-sell-hero__credit { right: 32px; } }

.hh-mandate { background: var(--hh-forest); padding-block: 80px; }
@media (min-width: 768px) { .hh-mandate { padding-block: 112px; } }
.hh-mandate__grid { margin-top: 48px; display: grid; gap: 40px; }
@media (min-width: 768px)  { .hh-mandate__grid { margin-top: 64px; } }
@media (min-width: 1024px) {
  .hh-mandate__grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 64px; }
  .hh-mandate__aside { grid-column: span 5 / span 5; }
  .hh-mandate__list  { grid-column: span 7 / span 7; }
}
.hh-mandate__aside { display: none; }
@media (min-width: 1024px) { .hh-mandate__aside { display: block; } }
.hh-mandate__counter {
  font-size: 10rem;
  line-height: 0.85;
  font-weight: 500;
  letter-spacing: -0.06em;
  user-select: none;
}
@media (min-width: 1280px) { .hh-mandate__counter { font-size: 12rem; } }
.hh-mandate__name {
  margin-top: 20px;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--hh-sage);
}
.hh-mandate__ticks { margin-top: 32px; display: flex; gap: 8px; }
.hh-mandate__ticks span {
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.15);
  transition: background-color var(--hh-dur-slow) var(--hh-ease);
}
.hh-mandate__ticks span.is-passed { background: var(--hh-sage); }
.hh-stage {
  padding-block: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (min-width: 768px) { .hh-stage { padding-block: 56px; } }
.hh-stage:last-child { border-bottom: 0; }
.hh-stage__ghost {
  font-size: 4rem;
  line-height: 0.85;
  font-weight: 500;
  letter-spacing: -0.06em;
  user-select: none;
}
@media (min-width: 1024px) { .hh-stage__ghost { display: none; } }
.hh-stage__name {
  margin-top: 12px;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--hh-ivory);
}
@media (min-width: 768px)  { .hh-stage__name { font-size: 2rem; } }
@media (min-width: 1024px) { .hh-stage__name { margin-top: 0; } }
.hh-stage__line {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.45);
  font-weight: 300;
  max-width: 28rem;
}
.hh-stage__duties { margin-top: 24px; display: grid; gap: 20px; }
.hh-duty { display: flex; gap: 16px; }
.hh-duty__dot {
  margin-top: 10px;
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: rgba(157,195,177,.6);
  flex-shrink: 0;
}
.hh-duty__title { font-size: 15.5px; font-weight: 300; color: rgba(255,255,255,.85); }
.hh-duty__body {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.4);
  font-weight: 300;
  max-width: 28rem;
}

/* ==========================================================================
   OFF-PLAN page
   ========================================================================== */
.hh-offplan-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--hh-deep);
  overflow: hidden;
}
.hh-offplan-hero__bg { position: absolute; inset: -8% 0; will-change: transform; }
.hh-offplan-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.hh-offplan-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(4,21,15,.85), rgba(4,21,15,.45) 50%, var(--hh-deep));
}
.hh-offplan-hero__grid-overlay {
  position: absolute; inset: 0;
  opacity: .13;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(157,195,177,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(157,195,177,.5) 1px, transparent 1px);
  background-size: clamp(72px, 10vw, 140px) clamp(72px, 10vw, 140px);
}
.hh-offplan-hero__body {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--hh-container);
  margin-inline: auto;
  width: 100%;
  padding: 128px var(--hh-gutter) 40px;
}
@media (min-width: 768px) { .hh-offplan-hero__body { padding-inline: var(--hh-gutter-md); } }
.hh-offplan-hero__meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 8px; }
.hh-offplan-hero__coords {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(157,195,177,.5);
  font-variant-numeric: tabular-nums;
}
.hh-offplan-hero__title {
  margin-top: 28px;
  font-size: 2.9rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--hh-ivory);
  max-width: 56rem;
}
@media (min-width: 768px)  { .hh-offplan-hero__title { font-size: 4.6rem; } }
@media (min-width: 1024px) { .hh-offplan-hero__title { font-size: 5.4rem; } }
.hh-offplan-hero__title em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-layer-index { position: relative; z-index: 10; border-top: 1px solid rgba(255,255,255,.1); }
.hh-layer-index__inner {
  max-width: var(--hh-container);
  margin-inline: auto;
  padding: 16px var(--hh-gutter);
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 8px;
  align-items: center;
}
@media (min-width: 768px) { .hh-layer-index__inner { padding: 20px var(--hh-gutter-md); } }
.hh-layer-index__item { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.hh-layer-index__num { font-size: 9px; letter-spacing: 0.2em; color: rgba(157,195,177,.6); font-variant-numeric: tabular-nums; }
.hh-layer-index__label { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,.45); }

.hh-framework { background: var(--hh-deep); padding-block: 80px; }
@media (min-width: 768px) { .hh-framework { padding-block: 112px; } }
.hh-framework__grid { margin-top: 48px; display: grid; gap: 40px; }
@media (min-width: 768px)  { .hh-framework__grid { margin-top: 64px; } }
@media (min-width: 1024px) {
  .hh-framework__grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 64px; }
  .hh-framework__rail { grid-column: span 4 / span 4; }
  .hh-framework__list { grid-column: span 8 / span 8; }
}
.hh-framework__rail { display: none; }
@media (min-width: 1024px) { .hh-framework__rail { display: block; } }
.hh-framework__nav { position: sticky; top: 112px; }
.hh-framework__nav > div { display: flex; align-items: center; gap: 16px; padding-block: 8px; }
.hh-framework__tick {
  height: 1px;
  width: 16px;
  background: rgba(255,255,255,.2);
  transition: width var(--hh-dur-slow) var(--hh-ease), background-color var(--hh-dur-slow) var(--hh-ease);
}
.hh-framework__nav > div.is-active .hh-framework__tick { width: 36px; background: var(--hh-sage); }
.hh-framework__nav-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  transition: color var(--hh-dur-slow) var(--hh-ease);
}
.hh-framework__nav > div.is-active .hh-framework__nav-label { color: var(--hh-ivory); }
.hh-framework__note {
  padding-top: 32px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255,255,255,.35);
  font-weight: 300;
  max-width: 15rem;
}
.hh-layer { padding-block: 36px; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (min-width: 768px) { .hh-layer { padding-block: 48px; } }
.hh-layer:last-of-type { border-bottom: 0; }
.hh-layer__row { display: flex; align-items: baseline; gap: 20px; }
@media (min-width: 768px) { .hh-layer__row { gap: 32px; } }
.hh-layer__num {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,.15);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
}
@media (min-width: 768px) { .hh-layer__num { font-size: 2.6rem; } }
.hh-layer__title {
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ivory);
}
@media (min-width: 768px) { .hh-layer__title { font-size: 1.8rem; } }
.hh-layer__body {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.45);
  font-weight: 300;
  max-width: 32rem;
}
.hh-layer__checks {
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(157,195,177,.6);
  line-height: 2;
}
.hh-framework__disclaimer {
  margin-top: 40px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255,255,255,.35);
  font-weight: 300;
  max-width: 42rem;
  border-left: 1px solid rgba(255,255,255,.15);
  padding-left: 20px;
}

.hh-verdict { background: var(--hh-forest); padding-block: 80px; }
@media (min-width: 768px) { .hh-verdict { padding-block: 112px; } }
.hh-verdict__tabs {
  margin-top: 40px;
  display: inline-flex;
  padding: 4px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.03);
}
.hh-verdict__tab {
  position: relative;
  height: 44px;
  padding-inline: 20px;
  border-radius: 9999px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  transition: color var(--hh-dur) var(--hh-ease), background-color .45s var(--hh-ease);
}
@media (min-width: 768px) { .hh-verdict__tab { padding-inline: 32px; font-size: 11.5px; } }
.hh-verdict__tab:hover { color: var(--hh-white); }
.hh-verdict__tab[aria-selected="true"] { color: var(--hh-forest); background: var(--hh-ivory); }
.hh-verdict__stage { margin-top: 40px; min-height: 20rem; }
@media (min-width: 640px) { .hh-verdict__stage { min-height: 16rem; } }
.hh-verdict__panel { display: none; }
.hh-verdict__panel.is-active { display: block; animation: hh-quote-soft .45s var(--hh-ease); }
.hh-verdict__tone { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.hh-verdict__panel--evaluation .hh-verdict__tone { color: rgba(157,195,177,.8); }
.hh-verdict__points { margin-top: 24px; display: grid; column-gap: 48px; row-gap: 24px; }
@media (min-width: 640px) { .hh-verdict__points { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.hh-verdict__point { border-left: 1px solid rgba(255,255,255,.1); padding-left: 20px; }
.hh-verdict__panel--evaluation .hh-verdict__point { border-left-color: rgba(157,195,177,.5); }
.hh-verdict__point h3 { font-size: 16px; font-weight: 300; color: rgba(255,255,255,.6); }
.hh-verdict__panel--evaluation .hh-verdict__point h3 { color: var(--hh-ivory); }
.hh-verdict__point p { margin-top: 6px; font-size: 13px; line-height: 1.75; color: rgba(255,255,255,.4); font-weight: 300; }

/* ==========================================================================
   SECONDARY page
   ========================================================================== */
.hh-secondary-hero { position: relative; background: var(--hh-ivory); }
@media (min-width: 768px) { .hh-secondary-hero { height: 200svh; } }
.hh-secondary-hero__pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  .hh-secondary-hero__pin { position: sticky; top: 0; min-height: 100svh; padding-top: 112px; padding-bottom: 40px; }
}
.hh-secondary-hero__title {
  margin-top: 24px;
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--hh-ink);
  max-width: 56rem;
}
@media (min-width: 768px)  { .hh-secondary-hero__title { font-size: 4.2rem; } }
@media (min-width: 1024px) { .hh-secondary-hero__title { font-size: 4.8rem; } }
.hh-secondary-hero__title em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-forest); }
.hh-secondary-hero__row {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
  row-gap: 16px;
}
.hh-secondary-hero__row p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(16,19,17,.5);
  font-weight: 300;
  max-width: 28rem;
}
.hh-secondary-hero__media { margin-top: 32px; display: flex; justify-content: center; }
@media (min-width: 768px) { .hh-secondary-hero__media { margin-top: 40px; } }
.hh-secondary-hero__frame {
  position: relative;
  overflow: hidden;
  height: 30svh;
  width: 92%;
  border-radius: 2rem;
}
@media (min-width: 768px) {
  .hh-secondary-hero__frame {
    height: 40svh;
    width: var(--hh-scrub-width, 70%);
    border-radius: var(--hh-scrub-radius, 2rem);
  }
}
.hh-secondary-hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hh-secondary-hero__zoom { position: absolute; inset: 0; transform: scale(var(--hh-scrub-scale, 1.08)); }
.hh-secondary-hero__caption {
  position: absolute;
  bottom: 16px; left: 20px;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.hh-secondary-hero__shade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  background: linear-gradient(to top, rgba(4,21,15,.7), transparent);
}

.hh-dossier { background: var(--hh-ivory); padding-block: 80px; }
@media (min-width: 768px) { .hh-dossier { padding-block: 112px; } }
.hh-dossier__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hh-dossier__aside {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(16,19,17,.45);
  font-weight: 300;
  max-width: 20rem;
}
.hh-dossier__list { margin-top: 48px; border-top: 1px solid rgba(10,38,29,.1); }
.hh-dossier__item {
  border-bottom: 1px solid rgba(10,38,29,.1);
  transition: background-color var(--hh-dur-slow) var(--hh-ease);
}
.hh-dossier__item.is-open { background: rgba(255,255,255,.7); }
.hh-dossier__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 4px;
  text-align: left;
}
@media (min-width: 768px) { .hh-dossier__trigger { gap: 40px; padding: 28px 16px; } }
.hh-dossier__num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(10,38,29,.35);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 28px;
}
.hh-dossier__title {
  flex: 1;
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ink);
  transition: color var(--hh-dur) var(--hh-ease);
}
@media (min-width: 768px) { .hh-dossier__title { font-size: 1.7rem; } }
.hh-dossier__trigger:hover .hh-dossier__title,
.hh-dossier__item.is-open .hh-dossier__title { color: var(--hh-forest); }
.hh-dossier__state {
  display: none;
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(10,38,29,.35);
  flex-shrink: 0;
}
@media (min-width: 768px) { .hh-dossier__state { display: inline; } }
.hh-dossier__body {
  padding: 0 16px 32px 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 56px;
  row-gap: 16px;
}
@media (min-width: 768px) { .hh-dossier__body { padding-left: 5.5rem; padding-right: 32px; } }
.hh-dossier__body p:first-child {
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(16,19,17,.6);
  font-weight: 300;
  max-width: 28rem;
}
.hh-dossier__tags {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(10,38,29,.45);
  line-height: 2.2;
}
.hh-dossier__closing {
  margin-top: 32px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(16,19,17,.55);
  max-width: 32rem;
}
.hh-dossier__closing em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-forest); }

.hh-evidence { background: var(--hh-deep); padding-block: 80px; }
@media (min-width: 768px) { .hh-evidence { padding-block: 112px; } }
.hh-evidence__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) {
  .hh-evidence__grid { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .hh-evidence__copy { grid-column: span 5 / span 5; }
  .hh-evidence__bars { grid-column: span 7 / span 7; }
}
.hh-evidence__lede {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,.5);
  font-weight: 300;
  max-width: 28rem;
}
.hh-evidence__bars > div + div { margin-top: 36px; }
.hh-evidence__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hh-evidence__label { font-size: 15px; font-weight: 300; color: rgba(255,255,255,.8); }
.hh-evidence__note { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.hh-evidence__gauge {
  margin-top: 12px;
  height: 36px;
  border-radius: 9999px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
@media (min-width: 768px) { .hh-evidence__gauge { height: 44px; } }
.hh-evidence__gauge .hh-bar { transition-duration: 1.5s; }
.hh-bar--flat { background: rgba(255,255,255,.2); }
.hh-bar--sage { background: linear-gradient(to right, var(--hh-forest-hover), var(--hh-sage)); }
.hh-evidence__foot {
  margin-top: 28px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  line-height: 2;
}

/* ==========================================================================
   INVEST page
   ========================================================================== */
.hh-invest-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--hh-deep);
  overflow: hidden;
}
.hh-invest-hero__bg { position: absolute; inset: 0; opacity: .25; }
.hh-invest-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hh-invest-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(4,21,15,.85), rgba(4,21,15,.6) 50%, var(--hh-deep));
}
.hh-invest-hero__grid {
  position: relative;
  max-width: var(--hh-container);
  margin-inline: auto;
  width: 100%;
  padding: 128px var(--hh-gutter) 56px;
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 768px) { .hh-invest-hero__grid { padding-inline: var(--hh-gutter-md); } }
@media (min-width: 1024px) {
  .hh-invest-hero__grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 32px; }
  .hh-invest-hero__copy { grid-column: span 8 / span 8; }
  .hh-invest-hero__memo { grid-column: span 4 / span 4; justify-self: end; }
}
.hh-invest-hero__title {
  margin-top: 28px;
  font-size: 2.9rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--hh-ivory);
}
@media (min-width: 768px)  { .hh-invest-hero__title { font-size: 4.8rem; } }
@media (min-width: 1024px) { .hh-invest-hero__title { font-size: 5.2rem; } }
.hh-invest-hero__title em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-invest-hero__chart { margin-top: 48px; max-width: 28rem; }
.hh-invest-hero__chart svg { width: 100%; height: auto; }
.hh-js .hh-invest-hero__chart path[data-draw] {
  stroke-dasharray: var(--hh-path-length, 600);
  stroke-dashoffset: var(--hh-path-length, 600);
  transition: stroke-dashoffset 2.2s var(--hh-ease) .5s;
}
.hh-js .hh-invest-hero__chart.is-visible path[data-draw] { stroke-dashoffset: 0; }
.hh-invest-hero__chart p {
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}
.hh-memo {
  width: 100%;
  max-width: 24rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--hh-r-tile);
  padding: 24px;
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(4px);
}
@media (min-width: 768px) { .hh-memo { padding: 28px; } }
.hh-memo__label { font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(157,195,177,.7); }
.hh-memo__list { margin-top: 20px; display: grid; gap: 16px; }
.hh-memo__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: 14px;
}
.hh-memo__row:last-child { border-bottom: 0; padding-bottom: 0; }
.hh-memo__row dt {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  flex-shrink: 0;
}
.hh-memo__row dd { font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,.7); text-align: right; }

.hh-ledger { background: var(--hh-deep); padding-block: 80px; }
@media (min-width: 768px) { .hh-ledger { padding-block: 112px; } }
.hh-ledger__list { margin-top: 48px; border-top: 1px solid rgba(255,255,255,.1); }
.hh-ledger__item {
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: background-color var(--hh-dur-slow) var(--hh-ease);
}
.hh-ledger__item.is-open { background: rgba(255,255,255,.03); }
.hh-ledger__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 4px;
  text-align: left;
}
@media (min-width: 768px) { .hh-ledger__trigger { gap: 40px; padding-inline: 16px; } }
.hh-ledger__num {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 56px;
}
.hh-ledger__title {
  flex: 1;
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hh-ivory);
  transition: color var(--hh-dur) var(--hh-ease);
}
@media (min-width: 768px) { .hh-ledger__title { font-size: 1.55rem; } }
.hh-ledger__trigger:hover .hh-ledger__title,
.hh-ledger__item.is-open .hh-ledger__title { color: var(--hh-sage); }
.hh-ledger__body {
  padding: 0 16px 32px 4.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 56px;
  row-gap: 12px;
}
@media (min-width: 768px) { .hh-ledger__body { padding-left: 7.5rem; padding-right: 32px; } }
.hh-ledger__body p:first-child {
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(255,255,255,.6);
  font-weight: 300;
  max-width: 28rem;
}
.hh-ledger__aside {
  font-family: var(--hh-font-display);
  font-style: italic;
  font-size: 15px;
  color: rgba(157,195,177,.85);
}
.hh-ledger__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hh-ledger__intro {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.4);
  font-weight: 300;
  max-width: 20rem;
}

.hh-costs { background: var(--hh-forest); padding-block: 80px; }
@media (min-width: 768px) { .hh-costs { padding-block: 112px; } }
.hh-costs__grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) {
  .hh-costs__grid { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .hh-costs__copy { grid-column: span 5 / span 5; }
  .hh-costs__bars { grid-column: span 7 / span 7; }
}
.hh-costs__bars > div + div { margin-top: 28px; }
.hh-costs__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.hh-costs__label { font-size: 14.5px; font-weight: 300; color: rgba(255,255,255,.8); }
.hh-costs__value {
  font-size: 15px;
  font-weight: 300;
  color: var(--hh-sage);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.hh-costs__gauge {
  margin-top: 10px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.hh-costs__gauge .hh-bar { transition-duration: 1.3s; }
.hh-costs__note { margin-top: 6px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,.3); }

.hh-invest-lens { background: var(--hh-deep); padding-block: 80px; }
@media (min-width: 768px) { .hh-invest-lens { padding-block: 112px; } }
.hh-invest-lens__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) {
  .hh-invest-lens__grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 64px; }
  .hh-invest-lens__media { grid-column: span 5 / span 5; order: 1; }
  .hh-invest-lens__copy  { grid-column: span 7 / span 7; order: 2; }
}
.hh-invest-lens__media { order: 2; }
.hh-invest-lens__copy  { order: 1; }
.hh-invest-lens__media .hh-parallax {
  border-radius: var(--hh-r-card);
  aspect-ratio: 4 / 5;
}
@media (min-width: 768px) { .hh-invest-lens__media .hh-parallax { border-radius: var(--hh-r-card-md); } }
.hh-invest-lens__lede {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,.5);
  font-weight: 300;
  max-width: 36rem;
}
.hh-invest-lens__creds {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
  max-width: 32rem;
}

/* ==========================================================================
   PROPERTY detail
   ========================================================================== */
.hh-prop-hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--hh-deep);
}
.hh-prop-hero__bg { position: absolute; inset: 0; will-change: transform; }
.hh-prop-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hh-prop-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--hh-deep), rgba(4,21,15,.6) 50%, rgba(4,21,15,.45));
}
.hh-prop-hero__body {
  position: relative;
  max-width: var(--hh-container);
  margin-inline: auto;
  width: 100%;
  padding: 112px var(--hh-gutter) 48px;
}
@media (min-width: 768px) { .hh-prop-hero__body { padding-inline: var(--hh-gutter-md); padding-bottom: 64px; } }
.hh-breadcrumb { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.hh-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hh-breadcrumb a { transition: color var(--hh-dur) var(--hh-ease); }
.hh-breadcrumb a:hover { color: var(--hh-white); }
.hh-breadcrumb li:last-child { color: rgba(255,255,255,.7); }
.hh-prop-hero__title {
  margin-top: 24px;
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--hh-ivory);
  max-width: 56rem;
}
@media (min-width: 768px) { .hh-prop-hero__title { font-size: 4.4rem; } }
.hh-prop-hero__title em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-sage); }
.hh-prop-hero__price { margin-top: 24px; font-size: 15px; font-weight: 300; color: rgba(255,255,255,.85); }
@media (min-width: 768px) { .hh-prop-hero__price { font-size: 17px; } }
.hh-prop-hero__chips {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
}
.hh-chip {
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(4,21,15,.4);
  backdrop-filter: blur(4px);
  padding: 8px 16px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.hh-prop-hero__cta { margin-top: 32px; }

.hh-chapter {
  position: relative;
  z-index: 10;
  margin-top: -2.5rem;
  border-top-left-radius: var(--hh-r-sheet);
  border-top-right-radius: var(--hh-r-sheet);
  padding-block: 56px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hh-chapter {
    border-top-left-radius: var(--hh-r-sheet-md);
    border-top-right-radius: var(--hh-r-sheet-md);
    padding-block: 112px;
  }
}
.hh-chapter--light { background: var(--hh-ivory); }
.hh-chapter--dark  { background: var(--hh-deep); }
.hh-chapter__meta { display: flex; align-items: center; gap: 16px; }
.hh-chapter__n {
  font-size: 10px;
  letter-spacing: 0.24em;
  font-variant-numeric: tabular-nums;
  color: rgba(16,19,17,.45);
}
.hh-chapter--dark .hh-chapter__n { color: rgba(255,255,255,.4); }
.hh-chapter__meta .hh-rule { width: 32px; background: rgba(10,38,29,.25); }
.hh-chapter--dark .hh-chapter__meta .hh-rule { background: rgba(255,255,255,.25); }
.hh-chapter__title {
  margin-top: 24px;
  font-size: 1.85rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 48rem;
  color: var(--hh-ink);
}
@media (min-width: 768px) { .hh-chapter__title { font-size: 3rem; } }
.hh-chapter--dark .hh-chapter__title { color: var(--hh-ivory); }
.hh-chapter__title em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-forest); }
.hh-chapter--dark .hh-chapter__title em { color: var(--hh-sage); }
.hh-chapter__body {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 300;
  max-width: 42rem;
  color: rgba(16,19,17,.5);
}
@media (min-width: 768px) { .hh-chapter__body { font-size: 16px; } }
.hh-chapter--dark .hh-chapter__body { color: rgba(255,255,255,.5); }

.hh-detail-rows {
  margin-top: 36px;
  display: grid;
  column-gap: 56px;
  border-top: 1px solid rgba(10,38,29,.1);
}
@media (min-width: 768px) { .hh-detail-rows { margin-top: 48px; grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 768px) { .hh-detail-rows--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.hh-detail-rows--dark { border-top-color: rgba(255,255,255,.12); }
.hh-detail-row { padding-block: 20px; border-bottom: 1px solid rgba(10,38,29,.1); }
.hh-detail-rows--dark .hh-detail-row { border-bottom-color: rgba(255,255,255,.12); }
.hh-detail-row__label {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(16,19,17,.4);
}
.hh-detail-rows--dark .hh-detail-row__label { color: rgba(255,255,255,.4); }
.hh-detail-row__value {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--hh-ink);
}
@media (min-width: 768px) { .hh-detail-row__value { font-size: 16.5px; } }
.hh-detail-rows--dark .hh-detail-row__value { color: var(--hh-ivory); }

.hh-facts {
  margin-top: 40px;
  display: grid;
  column-gap: 64px;
  border-top: 1px solid rgba(10,38,29,.1);
}
@media (min-width: 768px) { .hh-facts { margin-top: 56px; grid-template-columns: repeat(2, minmax(0,1fr)); } }
.hh-facts__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
  border-bottom: 1px solid rgba(10,38,29,.1);
}
.hh-facts__row dt {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(16,19,17,.4);
  flex-shrink: 0;
}
.hh-facts__row dd { font-size: 14.5px; font-weight: 300; color: var(--hh-ink); text-align: right; }
@media (min-width: 768px) { .hh-facts__row dd { font-size: 15px; } }

.hh-gallery { margin-top: 40px; display: grid; gap: 32px; }
@media (min-width: 768px) { .hh-gallery { margin-top: 64px; gap: 56px; } }
.hh-gallery__frame { display: block; width: 100%; }
@media (min-width: 768px) {
  .hh-gallery__frame--a { width: 88%; }
  .hh-gallery__frame--b { width: 72%; margin-left: auto; }
}
.hh-gallery__frame .hh-parallax { width: 100%; border-radius: var(--hh-r-card); aspect-ratio: 4/5; }
@media (min-width: 768px) {
  .hh-gallery__frame .hh-parallax { border-radius: var(--hh-r-card-md); }
  .hh-gallery__frame--a .hh-parallax { aspect-ratio: 16/9; }
  .hh-gallery__frame--b .hh-parallax { aspect-ratio: 4/3; }
}
.hh-gallery__strip {
  margin-top: 32px;
  margin-inline: calc(var(--hh-gutter) * -1);
  padding-inline: var(--hh-gutter);
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hh-gallery__strip::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .hh-gallery__strip { margin-top: 48px; margin-inline: calc(var(--hh-gutter-md) * -1); padding-inline: var(--hh-gutter-md); gap: 24px; }
}
.hh-gallery__thumb {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 78%;
  border-radius: var(--hh-r-tile);
  overflow: hidden;
  aspect-ratio: 4/5;
  position: relative;
}
@media (min-width: 640px)  { .hh-gallery__thumb { width: 46%; } }
@media (min-width: 768px)  { .hh-gallery__thumb { border-radius: var(--hh-r-tile-md); } }
@media (min-width: 1024px) { .hh-gallery__thumb { width: 32%; } }
.hh-gallery__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(4,21,15,.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--hh-ease), visibility .35s;
}
.hh-lightbox.is-open { opacity: 1; visibility: visible; }
.hh-lightbox__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--hh-dur) var(--hh-ease), border-color var(--hh-dur) var(--hh-ease);
}
.hh-lightbox__close:hover { color: var(--hh-white); border-color: var(--hh-white); }
.hh-lightbox__close svg { width: 16px; height: 16px; }
.hh-lightbox__figure {
  width: 100%;
  max-width: 64rem;
  aspect-ratio: 4/3;
  position: relative;
  transform: scale(.96);
  opacity: 0;
  transition: transform .5s var(--hh-ease), opacity .5s var(--hh-ease);
}
.hh-lightbox.is-open .hh-lightbox__figure { transform: none; opacity: 1; }
.hh-lightbox__figure img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 1rem;
}

.hh-opportunity-list { margin-top: 36px; display: grid; gap: 24px; max-width: 48rem; }
@media (min-width: 768px) { .hh-opportunity-list { margin-top: 48px; } }
.hh-opportunity-list li { display: flex; gap: 20px; border-top: 1px solid rgba(10,38,29,.1); padding-top: 20px; }
.hh-opportunity-list li > span { font-size: 10px; letter-spacing: .2em; font-variant-numeric: tabular-nums; color: rgba(10,38,29,.4); padding-top: 6px; }
.hh-opportunity-list p { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--hh-ink); }
@media (min-width: 768px) { .hh-opportunity-list p { font-size: 18px; } }

.hh-enquiry {
  position: relative;
  z-index: 10;
  margin-top: -2.5rem;
  border-top-left-radius: var(--hh-r-sheet);
  border-top-right-radius: var(--hh-r-sheet);
  overflow: hidden;
  background: var(--hh-forest);
  scroll-margin-top: 64px;
}
@media (min-width: 768px) {
  .hh-enquiry {
    border-top-left-radius: var(--hh-r-sheet-md);
    border-top-right-radius: var(--hh-r-sheet-md);
    scroll-margin-top: 80px;
  }
}
.hh-enquiry__direct {
  max-width: 48rem;
  margin-inline: auto;
  padding: 0 var(--hh-gutter) 64px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) { .hh-enquiry__direct { flex-direction: row; } }
@media (min-width: 768px) { .hh-enquiry__direct { padding-inline: 32px; padding-bottom: 80px; } }
.hh-enquiry__direct a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.2);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  transition: background-color var(--hh-dur) var(--hh-ease), color var(--hh-dur) var(--hh-ease);
}
.hh-enquiry__direct a:hover { background: rgba(255,255,255,.06); color: var(--hh-white); }
.hh-enquiry__direct svg { width: 16px; height: 16px; }

/* Empty / archive states */
.hh-empty { min-height: 70svh; display: flex; align-items: center; background: var(--hh-ivory); padding: 112px 0 64px; }
.hh-empty__title {
  margin-top: 20px;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--hh-ink);
}
@media (min-width: 768px) { .hh-empty__title { font-size: 3rem; } }
.hh-empty__title em { font-family: var(--hh-font-display); font-style: italic; color: var(--hh-forest); }
.hh-empty__list { margin-top: 36px; border-top: 1px solid rgba(10,38,29,.1); }
.hh-empty__list li { border-bottom: 1px solid rgba(10,38,29,.1); }
.hh-empty__list a {
  display: block;
  padding-block: 20px;
  font-size: 20px;
  font-weight: 300;
  color: var(--hh-ink);
  transition: color var(--hh-dur) var(--hh-ease);
}
.hh-empty__list a:hover { color: var(--hh-forest); }

/* Editorial rich text (WP editor content inside chapters) */
.hh-rte > * + * { margin-top: 1.25em; }
.hh-rte p { font-size: 15px; line-height: 1.9; font-weight: 300; }
.hh-rte h2, .hh-rte h3 { font-weight: 300; letter-spacing: -0.02em; }
.hh-rte ul { list-style: disc; padding-left: 1.25em; }
.hh-rte ol { list-style: decimal; padding-left: 1.25em; }
.hh-rte a { text-decoration: underline; text-underline-offset: 3px; }

/* WordPress admin bar offset for the fixed header */
body.admin-bar .hh-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .hh-header { top: 46px; } }