/*
 * Grid & Haven homepage interaction layer.
 * The homepage stays quiet while borrowing the editorial energy of Field Notes.
 */

body.home {
  --home-ink: #0e241f;
  --home-paper: #fbfaf7;
  --home-cream: #f4f0e7;
  --home-gold: #b99355;
  --home-gold-light: #e2ca94;
}

/* Mobile navigation */
.a-mobile-nav {
  display: none;
  position: relative;
}

.a-mobile-nav summary {
  align-items: center;
  color: var(--home-ink);
  cursor: pointer;
  display: flex;
  gap: 8px;
  list-style: none;
  min-height: 42px;
  padding: 7px 4px;
}

.a-mobile-nav summary::-webkit-details-marker {
  display: none;
}

.a-menu-icon {
  display: grid;
  gap: 5px;
  width: 20px;
}

.a-menu-icon i {
  background: currentColor;
  display: block;
  height: 1.5px;
  transform-origin: center;
  transition: transform 180ms ease, opacity 180ms ease;
  width: 20px;
}

.a-menu-label {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.a-mobile-nav[open] .a-menu-icon i:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.a-mobile-nav[open] .a-menu-icon i:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

.a-mobile-nav-panel {
  background: var(--home-ink);
  box-shadow: 0 26px 60px rgba(5, 18, 13, .24);
  color: var(--home-cream);
  display: grid;
  gap: 0;
  left: 0;
  padding: 18px 24px 28px;
  position: fixed;
  right: 0;
  top: 62px;
  max-height: calc(100dvh - 62px);
  overflow-y: auto;
}

body.home .a-mobile-nav-panel a {
  align-items: center;
  border-bottom: 1px solid rgba(244, 240, 231, .14);
  color: var(--home-cream);
  display: flex;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(26px, 6vw, 38px);
  justify-content: space-between;
  line-height: 1.05;
  padding: 16px 0;
}

body.home .a-mobile-nav-panel a::after {
  color: var(--home-gold-light);
  content: "↗";
  font-family: Inter, sans-serif;
  font-size: 16px;
  transition: transform 180ms ease;
}

body.home .a-mobile-nav-panel a:hover::after,
body.home .a-mobile-nav-panel a:focus-visible::after {
  transform: translate(3px, -3px);
}

/* Quiet depth in the portrait half of the hero */
body.home .a-hero[data-home-depth] {
  --home-image-x: 0px;
  --home-image-y: 0px;
  --home-card-x: 0px;
  --home-card-y: 0px;
  --home-orbit-x: 0px;
  --home-orbit-y: 0px;
}

body.home .a-hero[data-home-depth] .a-property-portrait > img {
  transform: translate3d(var(--home-image-x), var(--home-image-y), 0) scale(1.025);
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

body.home .a-hero[data-home-depth] .a-brand-explainer {
  transform: translate3d(var(--home-card-x), var(--home-card-y), 0);
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1), box-shadow 360ms ease;
  will-change: transform;
}

body.home .a-hero[data-home-depth] .a-property-portrait::after {
  aspect-ratio: 1;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(244, 240, 231, .18) 50%, transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px), rgba(244, 240, 231, .18) 50%, transparent calc(50% + .5px));
  border: 1px solid rgba(244, 240, 231, .26);
  border-radius: 50%;
  content: "";
  display: block;
  height: auto;
  opacity: .5;
  pointer-events: none;
  position: absolute;
  right: 7%;
  top: 10%;
  transform: translate3d(var(--home-orbit-x), var(--home-orbit-y), 0);
  transition: transform 500ms cubic-bezier(.22, 1, .36, 1);
  width: min(34vw, 430px);
  z-index: 1;
}

/* Buy, Sell, Stay, Wait become useful pathways */
body.home a.a-life-card {
  --home-card-x: 0px;
  --home-card-y: 0px;
  color: var(--home-ink);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1), box-shadow 360ms ease, border-color 240ms ease;
}

body.home a.a-life-card.dark {
  color: var(--home-cream);
}

body.home a.a-life-card::before {
  transform: translate3d(var(--home-card-x), var(--home-card-y), 0) scale(1.055);
  transition: filter 420ms ease, opacity 420ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}

body.home a.a-life-card::after {
  transition: background 360ms ease;
}

body.home a.a-life-card:hover,
body.home a.a-life-card:focus-visible {
  border-color: rgba(154, 110, 47, .55);
  box-shadow: 0 28px 70px rgba(14, 36, 31, .13);
  transform: translateY(-8px);
}

body.home a.a-life-card:hover::before,
body.home a.a-life-card:focus-visible::before {
  filter: grayscale(0) saturate(.9) contrast(.98);
  opacity: .48;
}

body.home a.a-life-card:not(.dark):hover::after,
body.home a.a-life-card:not(.dark):focus-visible::after {
  background: rgba(251, 250, 247, .68);
}

body.home a.a-life-card.dark:hover::after,
body.home a.a-life-card.dark:focus-visible::after {
  background: rgba(14, 36, 31, .59);
}

body.home .a-life-card-index {
  color: currentColor;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .18em;
  opacity: .62;
  position: absolute;
  right: 32px;
  top: 34px;
  z-index: 2;
}

body.home .a-life-card-foot {
  display: grid;
  gap: 22px;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

body.home .a-life-card-copy {
  color: #4a5852;
  display: block;
  font-size: 20px;
  line-height: 1.55;
  max-width: 520px;
}

body.home .a-life-card.dark .a-life-card-copy {
  color: #e2e9e5;
}

body.home .a-life-card-action {
  align-items: center;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  gap: 9px;
  letter-spacing: .12em;
  opacity: .72;
  text-transform: uppercase;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms ease;
}

body.home .a-life-card-action > span {
  color: #8e632b;
  font-size: 17px;
  transition: transform 240ms ease;
}

body.home .a-life-card.dark .a-life-card-action > span {
  color: var(--home-gold-light);
}

body.home a.a-life-card:hover .a-life-card-action,
body.home a.a-life-card:focus-visible .a-life-card-action {
  opacity: 1;
  transform: translateY(0);
}

body.home a.a-life-card:hover .a-life-card-action > span,
body.home a.a-life-card:focus-visible .a-life-card-action > span {
  transform: translate(3px, 3px);
}

/* Editorial outcome explorer */
body.home .a-outcome-tabs {
  counter-reset: home-outcome;
}

body.home .a-outcome-tabs button {
  align-items: center;
  counter-increment: home-outcome;
  display: flex;
  gap: 14px;
  position: relative;
}

body.home .a-outcome-tabs button::before {
  color: #8c632b;
  content: "0" counter(home-outcome);
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

body.home .a-outcome-tabs button[aria-selected="true"]::before {
  color: var(--home-gold-light);
}

body.home .a-outcome-tabs button:focus-visible,
body.home .a-outcome-panels a:focus-visible,
body.home a.a-life-card:focus-visible,
body.home .a-home-note-feature:focus-visible,
body.home .a-home-notes-all:focus-visible,
body.home .a-mobile-nav summary:focus-visible,
body.home .a-mobile-nav-panel a:focus-visible {
  outline: 3px solid #d7b56f;
  outline-offset: 4px;
}

body.home .a-outcome-panels article {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

body.home .a-outcome-panels article::after {
  background: var(--home-gold);
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  transform: scaleX(.12);
  transform-origin: left;
  transition: transform 650ms cubic-bezier(.22, 1, .36, 1);
  width: 100%;
}

body.home .a-outcome-panels article.is-entering::after {
  transform: scaleX(1);
}

body.home .a-outcome-panels article > :not(.a-outcome-number) {
  position: relative;
  z-index: 2;
}

body.home .a-outcome-number {
  color: var(--home-ink);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(130px, 15vw, 220px);
  line-height: .75;
  opacity: .045;
  pointer-events: none;
  position: absolute;
  right: 22px;
  top: 34px;
  z-index: 0;
}

body.home .a-outcome-panels article.is-entering > :not(.a-outcome-number) {
  animation: homePanelEnter 520ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes homePanelEnter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* One compact bridge into Field Notes */
body.home .a-home-notes {
  background: #071a14;
  color: var(--home-cream);
  overflow: hidden;
  padding: 130px 0;
}

body.home .a-home-notes-head {
  align-items: end;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 52px;
}

body.home .a-home-notes .a-kicker {
  color: var(--home-gold-light);
  margin-bottom: 22px;
}

body.home .a-home-notes h2 {
  color: var(--home-cream);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(48px, 6.4vw, 88px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
  margin: 0;
  max-width: 830px;
}

body.home .a-home-notes-all {
  color: var(--home-cream);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 12px 0;
  text-decoration-color: rgba(226, 202, 148, .55);
  text-underline-offset: 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

body.home .a-home-notes-all span {
  color: var(--home-gold-light);
  display: inline-block;
  margin-left: 8px;
  transition: transform 220ms ease;
}

body.home .a-home-notes-all:hover span,
body.home .a-home-notes-all:focus-visible span {
  transform: translate(3px, -3px);
}

body.home .a-home-note-feature {
  --home-note-x: 0px;
  --home-note-y: 0px;
  background: rgba(244, 240, 231, .035);
  border: 1px solid rgba(244, 240, 231, .2);
  color: var(--home-cream);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
  min-height: 520px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: background 350ms ease, border-color 350ms ease;
}

body.home .a-home-note-feature:hover,
body.home .a-home-note-feature:focus-visible {
  background: rgba(244, 240, 231, .065);
  border-color: rgba(226, 202, 148, .55);
}

body.home .a-home-note-feature::after {
  background: var(--home-gold-light);
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  transform: scaleX(.12);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
  width: 100%;
}

body.home .a-home-note-feature:hover::after,
body.home .a-home-note-feature:focus-visible::after {
  transform: scaleX(1);
}

body.home .a-home-note-copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: clamp(38px, 5vw, 72px);
  position: relative;
  z-index: 3;
}

body.home .a-home-note-meta {
  align-items: center;
  color: var(--home-gold-light);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 800;
  gap: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

body.home .a-home-note-meta i {
  background: currentColor;
  border-radius: 50%;
  height: 3px;
  opacity: .65;
  width: 3px;
}

body.home .a-home-note-title {
  color: var(--home-cream);
  display: block;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(48px, 5.8vw, 82px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .95;
  margin: 34px 0 0;
  max-width: 880px;
}

body.home .a-home-note-excerpt {
  color: rgba(244, 240, 231, .72);
  display: block;
  font-size: 17px;
  line-height: 1.6;
  margin-top: 28px;
  max-width: 700px;
}

body.home .a-home-note-action {
  align-items: center;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  gap: 10px;
  letter-spacing: .12em;
  margin-top: auto;
  padding-top: 36px;
  text-transform: uppercase;
}

body.home .a-home-note-action span {
  color: var(--home-gold-light);
  display: inline-block;
  font-size: 17px;
  transition: transform 220ms ease;
}

body.home .a-home-note-feature:hover .a-home-note-action span,
body.home .a-home-note-feature:focus-visible .a-home-note-action span {
  transform: translate(4px, -4px);
}

body.home .a-home-note-map {
  background-image:
    linear-gradient(rgba(244, 240, 231, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 240, 231, .055) 1px, transparent 1px);
  background-size: 58px 58px;
  border-left: 1px solid rgba(244, 240, 231, .14);
  display: block;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}

body.home .a-home-note-ring {
  aspect-ratio: 1;
  border: 1px solid rgba(226, 202, 148, .42);
  border-radius: 50%;
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(calc(-50% + var(--home-note-x)), calc(-50% + var(--home-note-y)));
  transition: transform 480ms cubic-bezier(.22, 1, .36, 1);
  width: min(31vw, 390px);
}

body.home .a-home-note-ring::before,
body.home .a-home-note-ring::after {
  background: rgba(244, 240, 231, .15);
  content: "";
  position: absolute;
}

body.home .a-home-note-ring::before {
  height: 1px;
  left: -24%;
  right: -24%;
  top: 50%;
}

body.home .a-home-note-ring::after {
  bottom: -24%;
  left: 50%;
  top: -24%;
  width: 1px;
}

body.home .a-home-note-word {
  border: 1px solid rgba(244, 240, 231, .22);
  color: rgba(244, 240, 231, .68);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .18em;
  padding: 7px 9px;
  position: absolute;
  text-transform: uppercase;
  transition: color 250ms ease, border-color 250ms ease, transform 480ms cubic-bezier(.22, 1, .36, 1);
}

body.home .a-home-note-feature:hover .a-home-note-word,
body.home .a-home-note-feature:focus-visible .a-home-note-word {
  border-color: rgba(226, 202, 148, .52);
  color: var(--home-gold-light);
}

body.home .a-home-note-word.is-life {
  left: 13%;
  top: 16%;
  transform: translate3d(var(--home-note-x), var(--home-note-y), 0) rotate(-4deg);
}

body.home .a-home-note-word.is-people {
  right: 8%;
  top: 28%;
  transform: translate3d(var(--home-note-x), var(--home-note-y), 0) rotate(5deg);
}

body.home .a-home-note-word.is-property {
  bottom: 17%;
  right: 13%;
  transform: translate3d(var(--home-note-x), var(--home-note-y), 0) rotate(-3deg);
}

body.home .a-home-note-word.is-money {
  bottom: 25%;
  left: 8%;
  transform: translate3d(var(--home-note-x), var(--home-note-y), 0) rotate(4deg);
}

body.home .a-home-note-word.is-time {
  left: 42%;
  top: 8%;
  transform: translate3d(var(--home-note-x), var(--home-note-y), 0) rotate(2deg);
}

/* Content remains visible unless the interaction layer initializes successfully. */
body.home.home-interactions-ready .a-home-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 650ms cubic-bezier(.22, 1, .36, 1) var(--home-reveal-delay, 0ms),
    transform 650ms cubic-bezier(.22, 1, .36, 1) var(--home-reveal-delay, 0ms);
}

body.home.home-interactions-ready .a-home-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1100px) {
  .a-mobile-nav {
    display: block;
  }

  body.home .a-home-note-feature {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  }
}

@media (max-width: 760px) {
  .a-mobile-nav summary {
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  .a-menu-label {
    display: none;
  }

  body.home .a-mobile-nav-panel a {
    font-size: 30px;
  }

  body.home .a-hero[data-home-depth] .a-property-portrait > img,
  body.home .a-hero[data-home-depth] .a-brand-explainer,
  body.home .a-hero[data-home-depth] .a-property-portrait::after {
    transform: none;
  }

  body.home .a-life-card-index {
    right: 25px;
    top: 26px;
  }

  body.home .a-life-card-copy {
    font-size: 17px;
  }

  body.home .a-outcome-tabs {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 0 -16px;
    overflow-x: auto;
    padding: 3px 16px 14px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.home .a-outcome-tabs::-webkit-scrollbar {
    display: none;
  }

  body.home .a-outcome-tabs button,
  body.home .a-outcome-tabs button[aria-selected="true"] {
    flex: 0 0 auto;
    min-width: min(78vw, 280px);
    padding: 16px 18px;
    scroll-snap-align: start;
  }

  body.home .a-outcome-number {
    font-size: 120px;
    right: 14px;
    top: 26px;
  }

  body.home .a-home-notes {
    padding: 92px 0;
  }

  body.home .a-home-notes-head {
    align-items: start;
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-bottom: 38px;
  }

  body.home .a-home-note-feature {
    grid-template-columns: 1fr;
  }

  body.home .a-home-note-copy {
    min-height: 520px;
    padding: 34px 26px 42px;
  }

  body.home .a-home-note-title {
    font-size: clamp(42px, 12.5vw, 58px);
  }

  body.home .a-home-note-map {
    border-left: 0;
    border-top: 1px solid rgba(244, 240, 231, .14);
    min-height: 300px;
  }

  body.home .a-home-note-ring {
    width: 240px;
  }
}

@media (max-width: 430px) {
  body.home .a-brand {
    font-size: 10px;
  }

  body.home .a-nav-actions {
    gap: 10px;
  }

  body.home .a-navcta {
    font-size: 13px;
  }

  body.home .a-home-note-copy {
    min-height: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home *,
  body.home *::before,
  body.home *::after {
    scroll-behavior: auto !important;
  }

  body.home .a-hero[data-home-depth] .a-property-portrait > img,
  body.home .a-hero[data-home-depth] .a-brand-explainer,
  body.home .a-hero[data-home-depth] .a-property-portrait::after,
  body.home a.a-life-card,
  body.home a.a-life-card::before,
  body.home .a-home-note-ring,
  body.home .a-home-note-word,
  body.home .a-home-reveal,
  body.home .a-home-reveal.is-visible {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  body.home.home-interactions-ready .a-home-reveal {
    opacity: 1;
  }

  body.home .a-home-note-ring {
    transform: translate(-50%, -50%) !important;
  }
}