/* Final layout layer: keeps the original visual language while giving the hero one screen. */
html { scroll-padding-top: 82px; }
body { overflow-x: clip; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.site-header { flex-shrink: 0; }
.site-header nav a:hover, .text-link:hover { color: #9b7200; }
.nav-cta:hover { color: var(--gold) !important; }

.hero {
  height: clamp(760px, calc(100svh - 82px - 136px), 950px);
  min-height: 760px;
  max-height: 950px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.hero-copy {
  min-width: 0;
  padding: 38px 3.5vw 196px 5vw;
  justify-content: center;
}
.hero h1 {
  font-size: clamp(58px, 5.8vw, 92px);
  line-height: .87;
  letter-spacing: -.065em;
}
.hero .kicker { margin-bottom: 18px; }
.hero .lede {
  max-width: 530px;
  margin-top: 25px;
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.48;
}
.hero-actions { margin-top: 25px; }
.hero-visual { height: 100%; min-height: 0; }
.hero-visual > img { object-position: center 47%; }
.label-top { left: 3%; top: 19%; }
.label-bottom { bottom: 23%; }
.label-bottom strong { font-size: 21px; }
.hero-word {
  left: 2.8vw;
  bottom: -.025em;
  font-size: clamp(112px, 16vw, 248px);
  letter-spacing: -.075em;
  line-height: .84;
  max-width: none;
}
.principles {
  height: 136px;
  align-items: stretch;
}
.principles article {
  min-height: 0;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.principles h3 { margin: 10px 0 6px; font-size: 17px; }
.principles p { max-width: 350px; font-size: 12px; line-height: 1.42; }

.statement { padding-top: clamp(90px, 12svh, 150px); }
.statement-grid > div p { max-width: 570px; }
.step {
  appearance: none;
  width: 100%;
  display: block;
  border: 0;
  border-bottom: 1px solid #343939;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: left;
}
.step.active { background: #f8f6ef; }
.step:hover { cursor: pointer; }
.step:focus-visible { outline-offset: -4px; }
.phone img { object-position: top center; }
.creator-alias { white-space: normal; }
.scroll-progress {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: var(--scroll-progress, 0%);
  height: 3px;
  background: var(--gold);
  pointer-events: none;
}
.site-header nav a:not(.nav-cta) { position: relative; }
.site-header nav a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.site-header nav a:not(.nav-cta):hover::after,
.site-header nav a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
.button, .nav-cta { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.button:hover, .nav-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 25px #0002; }
.button:active, .nav-cta:active { transform: translateY(0); }
.hero-word { animation: hero-word-enter 1.1s cubic-bezier(.22,1,.36,1) both; }
.hero-visual > img { transition: filter .6s ease; }
.hero-visual:hover > img { filter: saturate(1.12); }
.photo-card img { transition: transform .8s cubic-bezier(.22,1,.36,1), filter .6s ease; }
.photo-card:hover img { transform: scale(1.055); filter: saturate(1); }
.trust-grid article { transition: background-color .28s ease; }
.trust-grid article:hover { background: #efece3; }
.journey-list article { transition: padding-left .28s ease; }
.journey-list article:hover { padding-left: 39px; }
.journey-list .dark:hover { background: #1b2328; }
@keyframes hero-word-enter {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: #a79f8e #e9e5dc; }
  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-track { background: #e9e5dc; }
  ::-webkit-scrollbar-thumb { background: #a79f8e; border: 3px solid #e9e5dc; border-radius: 99px; }
  ::-webkit-scrollbar-thumb:hover { background: #6d6c61; }
}

@media (max-width: 800px) {
  .scroll-progress { display: none; }
  html { scroll-padding-top: 68px; }
  .site-header { position: sticky; top: 0; }
  .site-header nav { box-shadow: 0 18px 30px #0002; }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.06fr) minmax(0, .94fr);
    height: calc(100svh - 68px);
    min-height: 670px;
    max-height: none;
  }
  .hero-copy {
    min-height: 0;
    padding: 22px 6vw 20px;
    justify-content: center;
  }
  .hero .kicker { margin-bottom: 13px; font-size: 9px; }
  .hero h1 {
    font-size: clamp(36px, 11vw, 64px);
    line-height: .88;
    letter-spacing: -.055em;
  }
  .hero .lede {
    max-width: 550px;
    margin-top: 18px;
    font-size: clamp(13px, 3.5vw, 16px);
    line-height: 1.42;
  }
  .hero-actions { gap: 15px; margin-top: 20px; flex-direction: row; align-items: center; }
  .hero-actions .button { min-width: 0; width: auto; padding: 14px 15px; gap: 12px; white-space: nowrap; }
  .hero-actions .text-link { white-space: nowrap; }
  .hero-visual { height: 100%; min-height: 0; }
  .hero-visual > img { object-position: center 50%; }
  .hero-word {
    left: 4vw;
    bottom: -.035em;
    font-size: clamp(55px, 14vw, 108px);
    letter-spacing: -.068em;
  }
  .image-line { top: 7%; right: 6%; }
  .label-top { top: 8%; left: 5%; }
  .label-bottom { right: 5%; bottom: 22%; }
  .principles { height: auto; }
  .principles article { padding: 22px 6vw; }
  .principles h3 { margin: 8px 0 5px; }
  .journey-list article:hover { padding-left: 16px; }
  .statement { padding-top: 90px; }
  .step { padding-top: 23px; padding-bottom: 23px; }
}

@media (max-width: 520px) {
  .hero-actions { align-items: flex-start; }
  .hero-actions .button { font-size: 10px; }
  .hero-actions .text-link { font-size: 11px; }
  .hero .lede { margin-top: 15px; }
  .hero-word { font-size: 14vw; }
  .label-bottom { padding: 10px 12px; }
  .label-bottom strong { font-size: 17px; }
  .label-bottom small { font-size: 8px; }
}

@media (max-width: 360px) {
  .hero { min-height: 650px; }
  .hero-copy { padding-left: 20px; padding-right: 20px; }
  .hero-actions { gap: 11px; }
  .hero-actions .button { padding: 12px; }
  .hero-actions .text-link { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .step, .button, .nav-cta, .photo-card img, .trust-grid article,
  .journey-list article, .site-header nav a::after { transition: none !important; }
  .hero-word { animation: none; }
}

.collaboration-credit { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); max-width: 310px; }
.collaboration-credit > span { font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.collaboration-credit > strong { font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }