@font-face {
  font-family: 'Bagea';
  src: url('../fonts/Bagea.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Design tokens */
:root {
  --hb-gold:      #bc9b5d;
  --hb-gold-dark: #a5854b;
  --hb-ink:       #232520;
  --hb-muted:     #5a5a55;
  --hb-cream:     #f8f5ee;
  --hb-sand:      #f2ebdf;
  --hb-card:      #e3e3e3;
  --hb-hero-bg:   #fafafa;

  --bs-body-font-family: 'Jost', system-ui, sans-serif;
  --bs-body-color: var(--hb-ink);
  --bs-body-font-size: clamp(.95rem, 1.01vw, 1.22rem);
  --bs-body-line-height: 1.35;
  --bs-emphasis-color: var(--hb-ink);
  --bs-link-color-rgb: 188, 155, 93;
  --bs-link-hover-color-rgb: 165, 133, 75;
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md,
  .container-sm, .container-xl, .container-xxl { max-width: min(1660px, 92vw); }
}

body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* Section rhythm */
.section     { padding-block: clamp(3rem, 5.5vw, 106px); }
.section-cta { padding-bottom: clamp(3.5rem, 7.8vw, 150px); }
#how         { padding-bottom: clamp(2.5rem, 4.1vw, 79px); }
.section-care{ padding-top: clamp(2.5rem, 4.2vw, 81px); }
.cta-lg      { margin-top: clamp(2rem, 5.6vw, 108px); }
.cta-md      { margin-top: clamp(2rem, 3.85vw, 74px); }
.section-tall{ padding-top: clamp(3.5rem, 6.4vw, 123px); padding-bottom: clamp(3rem, 6.25vw, 120px); }
.closing     { padding-top: clamp(4rem, 12.9vw, 248px); padding-bottom: clamp(3rem, 8.4vw, 161px); }
.closing p   { margin-bottom: clamp(3rem, 7vw, 134px); }

/* Typography */
.h-display {
  font-family: 'Bagea', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  line-height: 1.16;
  color: var(--hb-ink);
  margin: 0;
}
.h-hero    { font-size: clamp(2rem, 3.09vw, 3.71rem); }
.h-founder { font-size: clamp(1.85rem, 2.68vw, 3.21rem); line-height: 1.36; }
.h-banner  { font-size: clamp(1.75rem, 2.56vw, 3.08rem); }
.h-section { font-size: clamp(1.45rem, 1.86vw, 2.24rem); }
.h-faq     { font-size: clamp(1.45rem, 1.86vw, 2.24rem); }
.h-video   { font-size: clamp(1.4rem, 1.86vw, 2.24rem); }
.h-thanks  { font-size: clamp(2rem, 3.09vw, 3.7rem); }
.h-care    { font-size: clamp(1.2rem, 1.71vw, 2.05rem); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.p-thanks  { font-size: clamp(1.15rem, 1.86vw, 2.24rem); }

.text-hero   { font-size: clamp(1.05rem, 1.72vw, 2.06rem); line-height: 1.14; }
.text-story  { font-size: clamp(1.1rem, 2.19vw, 2.63rem); line-height: 1.08; }
.text-banner { font-size: clamp(1.05rem, 2.22vw, 2.66rem); line-height: 1.45; }
.text-video  { font-size: clamp(1rem, 1.61vw, 1.94rem); line-height: 1.3; }
.text-note   { font-size: clamp(.85rem, .97vw, 1.17rem); line-height: 1.25; }

.eyebrow {
  display: block;
  font-size: clamp(.8rem, 1.02vw, 1.22rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hb-gold);
}

.text-gold { color: var(--hb-gold) !important; }
.bg-cream  { background-color: var(--hb-cream) !important; }
.bg-sand   { background-color: var(--hb-sand)  !important; }
.bg-ink    { background-color: var(--hb-ink)   !important; }

/* Buttons */
.btn-gold {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--hb-gold);
  --bs-btn-border-color: var(--hb-gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hb-gold-dark);
  --bs-btn-hover-border-color: var(--hb-gold-dark);
  --bs-btn-active-bg: var(--hb-gold-dark);
  --bs-btn-active-border-color: var(--hb-gold-dark);
  --bs-btn-focus-shadow-rgb: 188, 155, 93;
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: clamp(.85rem, .99vw, 1.19rem);
  --bs-btn-padding-x: clamp(1.4rem, 2.4vw, 2.9rem);
  --bs-btn-padding-y: clamp(.5rem, .63vw, .76rem);
  --bs-btn-border-radius: 50rem;
}
.btn-gold-lg {
  --bs-btn-font-size: clamp(1.15rem, 1.87vw, 2.25rem);
  --bs-btn-padding-x: clamp(1.2rem, 1.7vw, 2.05rem);
  --bs-btn-padding-y: clamp(1rem, 2.08vw, 2.5rem);
  --bs-btn-border-radius: .75rem;
}

/* Navbar */
.navbar {
  --bs-navbar-padding-y: clamp(.85rem, 1.15vw, 1.4rem);
  padding-inline: clamp(1rem, 2.9vw, 3.5rem);
}
.navbar-brand img { height: clamp(48px, 6.66vw, 128px); width: auto; }
.navbar .nav-link {
  --bs-nav-link-color: var(--hb-ink);
  --bs-nav-link-hover-color: var(--hb-gold);
  font-weight: 600;
  font-size: clamp(.95rem, 1.04vw, 1.25rem);
  padding-inline: clamp(.6rem, 1.55vw, 1.86rem);
}
.navbar .nav-link.active {
  --bs-navbar-active-color: var(--hb-gold);
  box-shadow: inset 0 -3px 0 var(--hb-gold);
}
@media (min-width: 992px) {
  .navbar > .container-fluid { position: relative; }
  .navbar .navbar-nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .navbar .navbar-collapse { justify-content: flex-end; }
}
.nav-user { font-weight: 600; font-size: clamp(.95rem, 1.04vw, 1.25rem); color: var(--hb-ink); }
.nav-user:hover { color: var(--hb-gold); }
.nav-user svg { width: 1.85em; height: 1.85em; stroke-width: 1.3; }

/* Palm watermark */
.deco-palm { position: relative; isolation: isolate; }
.deco-palm::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 45.3vw;
  background: url('../img/deco.png') right top / 100% auto no-repeat;
  z-index: -1;
  pointer-events: none;
}

/* Hero */
.hero-inner { padding-inline: clamp(1rem, 5.2vw, 100px); }
.hero {
  background-color: var(--hb-hero-bg);
  background-image: url('../img/hero.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 26.1vw;
  display: flex;
  align-items: center;
}
@media (max-width: 991.98px) {
  .hero {
    background-image:
      linear-gradient(rgba(250,250,250,.88), rgba(250,250,250,.88)),
      url('../img/hero.jpg');
    background-position: center, center right;
    background-size: cover, cover;
    min-height: 0;
    padding-block: 3rem;
  }
}

/* Pillars */
.pillar { padding-inline: clamp(1rem, 1.9vw, 2.3rem); }
.pillar img {
  width: clamp(84px, 6.66vw, 128px);
  height: auto;
  padding: clamp(3px, .26vw, 5px);
  background: #ededeb;
  border-radius: 50%;
}
.pillar-title { font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.56rem); }
.pillar + .pillar { border-left: 1px solid #dcdcdc; }
@media (max-width: 767.98px) { .pillar + .pillar { border-left: 0; } }
@media (max-width: 991.98px) { .h-care { white-space: normal; } }

/* Banner */
.banner {
  background: url('../img/banner.jpg') center / cover no-repeat;
  color: #fff;
  padding-block: clamp(3rem, 5.5vw, 106px);
  min-height: 31.5vw;
  display: flex;
  align-items: center;
}

/* Step cards */
.steps-row { padding-top: clamp(4.5rem, 8.23vw, 158px); max-width: 1408px; margin-inline: auto; }
@media (max-width: 991.98px) { .steps-row { --bs-gutter-y: 4.75rem; } }
.step-card {
  position: relative;
  background: var(--hb-card);
  border-radius: clamp(.9rem, 1.15vw, 1.4rem);
  min-height: clamp(180px, 13.1vw, 252px);
  padding: 0 1rem clamp(1.6rem, 3.96vw, 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-card::before {
  content: "";
  position: absolute;
  top: clamp(-28px, -1.46vw, -12px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(96px, 8.7vw, 167px);
  aspect-ratio: 1;
  background: var(--hb-card);
  border-radius: 50%;
}
.step-card > * { position: relative; }
.step-num {
  position: absolute;
  top: clamp(-95px, -4.95vw, -38px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(30px, 2.4vw, 46px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hb-gold);
  color: #fff;
  font-size: clamp(.75rem, .94vw, 1.13rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-icon  {
  width: clamp(84px, 7.5vw, 144px);
  height: auto;
  margin-top: clamp(-10px, -.52vw, -4px);
  margin-bottom: clamp(.5rem, .94vw, 18px);
  background: radial-gradient(closest-side, rgba(255,255,255,.65), rgba(255,255,255,0) 78%);
}
.step-title { font-weight: 600; font-size: clamp(.95rem, 1.2vw, 1.44rem); margin: 0; }

/* How we care */
.care-collage {
  position: relative;
  aspect-ratio: 856 / 528;
  margin: 0;
}
.care-collage img {
  position: absolute;
  border-radius: clamp(.5rem, 1.05vw, 1.25rem);
  box-shadow: 0 .5vw 1.9vw rgba(0, 0, 0, .17);
}
.care-collage img:nth-child(1) { left: 0;      top: 10%;   width: 35.98%; z-index: 1; }
.care-collage img:nth-child(2) { left: 65.19%; top: 8%;    width: 35.05%; z-index: 2; }
.care-collage img:nth-child(3) { left: 24.88%; top: 1.5%;  width: 48.48%; z-index: 3; }
.care-list dt { font-weight: 600; font-size: clamp(.95rem, 1.08vw, 1.3rem); line-height: 1.2; }
.care-list dd { margin: 0 0 clamp(1rem, 1.87vw, 36px); font-size: clamp(.9rem, 1.07vw, 1.29rem); line-height: 1.2; }
.care-list dd:last-of-type { margin-bottom: 0; }

/* FAQ accordion */
.faq {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: clamp(1rem, 1.7vw, 2rem);
  --bs-accordion-btn-padding-y: clamp(.6rem, .78vw, .94rem);
  --bs-accordion-btn-bg: #f6f6f6;
  --bs-accordion-btn-color: var(--hb-ink);
  --bs-accordion-active-bg: #f6f6f6;
  --bs-accordion-active-color: var(--hb-ink);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-icon-width: clamp(1.15rem, 1.56vw, 1.88rem);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' fill='%23919191'%3e%3cpath d='M1.9 0 15 12.4 28.1 0 30 5.6 15 20 0 5.6z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  --bs-accordion-btn-icon-transform: none;
  --bs-accordion-body-padding-x: clamp(1.4rem, 2.4vw, 2.9rem);
  --bs-accordion-body-padding-y: clamp(1rem, 1.6vw, 1.9rem);
}
.faq-head { margin-bottom: clamp(3rem, 5.7vw, 110px); }
.faq .accordion-button.collapsed::after { opacity: 0; transition: opacity .2s ease; }
.faq .accordion-button.collapsed:hover::after,
.faq .accordion-button.collapsed:focus-visible::after { opacity: .55; }
.faq .accordion-item + .accordion-item { margin-top: clamp(.35rem, .5vw, .6rem); }
.faq .accordion-button { font-weight: 600; font-size: clamp(.95rem, 1.02vw, 1.22rem); }
.faq .accordion-body   { background: #fff; font-size: clamp(.9rem, .96vw, 1.16rem); line-height: 1.35; }
.letter p { max-width: 730px; }
.letter-art { width: clamp(200px, 20.3vw, 390px); }
.faq-quote { width: clamp(1.3rem, 1.5vw, 1.8rem); flex: none; margin-top: .15em; }

/* Footer */
.footer   { color: #d5d5d3; padding-block: clamp(2.5rem, 3.8vw, 73px); }
.footer img { width: clamp(210px, 20.3vw, 390px); height: auto; }
.footer h6 { color: #fff; font-weight: 600; font-size: clamp(.95rem, 1.04vw, 1.25rem); }
.footer a  { color: #d5d5d3; text-decoration: none; }
.footer a:hover { color: var(--hb-gold); }
.footer .social a  { display: inline-flex; color: #fff; }
.footer .social svg{ width: clamp(20px, 1.45vw, 28px); height: auto; }

/* Journey */
.journey {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #fff;
}

/* Stage */
.journey-stage {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(2rem, 6vw, 7rem);
}
.scene {
  grid-area: 1 / 1;
  align-self: center;
  width: 100%;
  max-width: min(1600px, 94vw);
  margin-inline: auto;
  visibility: hidden;
}
.scene.is-active { visibility: visible; }

/* Rows */
.line {
  font-family: 'Bagea', 'Playfair Display', Georgia, serif;
  color: var(--hb-ink);
  line-height: 1.25;
  margin: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(-2.5rem);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}
.line.is-in { opacity: 1; transform: none; }
.scene.is-leaving .line { opacity: 0; transition-duration: .5s; }

.line-xl { font-size: clamp(2rem, 4.7vw, 5.6rem); }
.line-lg { font-size: clamp(1.6rem, 3.6vw, 4.3rem); }
.line-sm { font-size: clamp(1.15rem, 2.2vw, 2.6rem); }
.line-gap { margin-top: clamp(1.5rem, 3.6vw, 4.3rem); }

.journey-logo { width: clamp(220px, 26vw, 500px); height: auto; }

.line-cta { margin-top: clamp(2.5rem, 5vw, 6rem); }
.line-cta .btn {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--hb-gold);
  --bs-btn-border-color: var(--hb-gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hb-gold-dark);
  --bs-btn-hover-border-color: var(--hb-gold-dark);
  --bs-btn-focus-shadow-rgb: 188, 155, 93;
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: clamp(.85rem, .99vw, 1.19rem);
  --bs-btn-padding-x: clamp(1.4rem, 2.4vw, 2.9rem);
  --bs-btn-padding-y: clamp(.5rem, .63vw, .76rem);
  --bs-btn-border-radius: 50rem;
}

/* Skip */
.journey-skip {
  position: fixed;
  right: clamp(1.25rem, 2.9vw, 3.5rem);
  bottom: clamp(1.25rem, 2.9vw, 3.5rem);
  font-size: clamp(.8rem, .94vw, 1.13rem);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #9a9a95;
  opacity: 0;
  transition: opacity .6s ease, color .2s ease;
}
.journey-skip.is-in { opacity: 1; }
.journey-skip:hover,
.journey-skip:focus-visible { color: var(--hb-gold); }
.journey-skip.is-hidden { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .line { transition-duration: .01ms; transform: none; }
}