/* Homepage film hero and the approved Pine & Paper sections.
   Footer, quote form, and the floating nav live in the earlier stylesheets. */

.home .header .brand_mark,
.home .header .nav a,
.home .header .icon-btn,
.home .header .header__cta {
  transition: filter .5s ease, color .5s ease, background-color .5s ease, border-color .5s ease;
}

/* Over the dark film the bar is transparent, so the mark and links go paper.
   They ease back to pine as the pill fills in. */
.home .header:not(.is-floating) .brand_mark {
  filter: brightness(0) invert(0.97);
}
.home .header:not(.is-floating) .nav a,
.home .header:not(.is-floating) .icon-btn {
  color: #F6F3EC;
}
.home .header:not(.is-floating) .nav a:hover,
.home .header:not(.is-floating) .nav a:focus-visible,
.home .header:not(.is-floating) .icon-btn:hover {
  color: #F6F3EC;
  background: transparent;
}
.home .header:not(.is-floating) .header__cta {
  background: #F6F3EC;
  color: #1F3A34;
  border-color: #F6F3EC;
}
.home .header:not(.is-floating) a:focus-visible,
.home .header:not(.is-floating) button:focus-visible,
.hero-film a:focus-visible {
  outline-color: #F6F3EC;
}

.hero-film {
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  margin-top: calc(-1 * (4.25rem + 2px));
  overflow: hidden;
  color: #F6F3EC;
  background: #1F3A34;
}
.hero-film__media,
.hero-film__shade {
  position: absolute;
  inset: 0;
}
.hero-film__poster,
.hero-film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.js-motion .hero-film__media {
  top: -4%;
  height: 108%;
}
.hero-film__poster {
  display: block;
  margin: 0;
}
.hero-film__poster img,
.hero-film__video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.hero-film__video {
  opacity: 0;
  transition: opacity .45s ease;
}
.hero-film__video.is-ready { opacity: 1; }
.hero-film__shade {
  background:
    linear-gradient(to top, rgba(31, 58, 52, .97) 0%, rgba(31, 58, 52, .92) 45%, rgba(31, 58, 52, 0) 72%),
    rgba(31, 58, 52, .6);
  pointer-events: none;
}
@media (min-width: 701px) {
  .hero-film__shade {
    background:
      radial-gradient(ellipse 60% 55% at 50% 58%, rgba(31, 58, 52, .55), rgba(31, 58, 52, 0) 70%),
      linear-gradient(to top, rgba(31, 58, 52, .95) 0%, rgba(31, 58, 52, .75) 40%, rgba(31, 58, 52, 0) 75%),
      rgba(31, 58, 52, .6);
  }
}
.hero-film__copy {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vh 40px 0;
}
.hero-film .eyebrow {
  margin: 0;
  color: #F6F3EC;
  opacity: .9;
}
.hero-film__title {
  max-width: 22ch;
  margin: 22px auto 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: #F6F3EC;
}
.hero-film__sub {
  max-width: 34ch;
  margin: 22px auto 0;
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1rem + .75vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.011em;
  text-wrap: balance;
  color: #F6F3EC;
  opacity: .92;
}
.hero-film__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}
.hero-film__actions .btn--primary { display: none; }
.hero-film__rating {
  margin: 22px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.011em;
}
.hero-film__rating a {
  color: rgba(246, 243, 236, .9);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.hero-film__rating a:hover,
.hero-film__rating a:focus-visible {
  color: #F6F3EC;
}
.hero-film__packages {
  background: transparent;
  color: #F6F3EC;
  border: 1px solid rgba(246, 243, 236, .6);
}
.hero-film__packages:hover,
.hero-film__packages:focus-visible {
  background: #F6F3EC;
  color: #1F3A34;
}
@media (max-width: 700px) {
  .hero-film__copy {
    justify-content: flex-end;
    padding: 0 28px 112px;
  }
  .hero-film .eyebrow { text-wrap: balance; }
  .hero-film__title { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-film__video { display: none !important; }
  .hero-film__media { transform: none !important; }
  .home .header .brand_mark,
  .home .header .nav a,
  .home .header .icon-btn,
  .home .header .header__cta,
  .hero-film__video { transition: none; }
}

.home-lead {
  position: relative;
  z-index: 2;
  margin-top: -56px;
  padding: 20px 0 52px;
  background: #FFFFFF;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 40px rgba(26, 26, 23, .22);
  /* The events nudge paints past the cart. Clip the empty box so the page does not scroll sideways. */
  overflow-x: clip;
}
/* Shared track so the yutori column and the elevate line share a left edge,
   and the cart column and the events line share a right edge. */
.home-lead__grid,
.home-lead__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  column-gap: 56px;
  align-items: start;
}
.home-lead__text {
  max-width: 34ch;
  width: 100%;
  margin: 0;
  /* First line sits just above the cart's wood countertop (1091×1263 photo). */
  margin-top: calc(440px * 1263 / 1091 * 0.455 - 1em);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.3;
  color: #1A1A17;
  text-align: left;
}
.home-lead__cart {
  margin: 0;
  width: 440px;
  max-width: 100%;
}
.home-lead__cart img {
  width: 100%;
  height: auto;
}
.home-lead__meta {
  margin-top: 24px;
  color: rgba(26, 26, 23, .72);
  font-size: 15px;
  line-height: 1.45;
}
.home-lead__meta > p:first-child {
  max-width: 36ch;
  margin: 0;
}
.home-lead__events {
  margin: 0;
  width: 440px;
  max-width: 100%;
  text-align: center;
  /* Centers the line on the midpoint of the two front caster wheels. */
  transform: translateX(7px);
}
@media (max-width: 900px) {
  .home-lead__grid,
  .home-lead__meta {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 38vw);
  }
  .home-lead__cart,
  .home-lead__events { width: 100%; }
  /* Same wheel midpoint as translateX(7px) on the 440px cart, scaled with this column. */
  .home-lead__events { transform: translateX(calc(100% * 7 / 440)); }
  .home-lead__text {
    margin-top: calc(38vw * 1263 / 1091 * 0.455 - 1em);
    max-width: none;
  }
}
@media (max-width: 700px) {
  .home-lead {
    margin-top: -40px;
    padding: 40px 0 48px;
    border-radius: 22px 22px 0 0;
  }
  .home-lead .shell {
    padding-inline: 1.65rem 1.35rem;
  }
  .home-lead__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .home-lead__text {
    order: 1;
    margin: 0 0 24px;
    max-width: none;
    width: 100%;
    padding-left: 0.5rem;
    text-align: left;
  }
  .home-lead__cart {
    order: 2;
    width: 100%;
  }
  .home-lead__meta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }
  .home-lead__meta > p:first-child {
    text-align: left;
    max-width: none;
  }
  .home-lead__events { display: none; }
}

.home-sec {
  padding-block: 80px;
  background: #F6F3EC;
}
#packages,
#gallery,
#faq { background: #F6F3EC; }
@media (min-width: 701px) {
  .home-sec { padding-block: 120px; }
}

.home-title {
  margin: 0 0 56px;
  max-width: 14em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #1A1A17;
}
.home-title--center {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}
.home-split {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 56px;
}
.home-split .home-title { margin-bottom: 0; max-width: 11em; }
.home-split p {
  max-width: 380px;
  margin: 0;
  color: rgba(26, 26, 23, .72);
  font-size: 17px;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .home-title { margin-bottom: 32px; }
  .home-split {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 32px;
  }
}

.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 701px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan--experience { min-height: 718px; }
}
.plan {
  background: #ECEAE5;
  border: 0;
  border-radius: 14px;
  padding: 30px 30px 34px;
  box-shadow: none;
}
.plan__tag {
  margin: 0;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1F3A34;
}
.plan h3 {
  margin: 8px 0 6px;
  font-size: 30px;
  font-weight: 400;
  color: inherit;
}
.plan__desc {
  margin: 0;
  max-width: 32ch;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(26, 26, 23, .72);
}
.plan__price {
  margin: 34px 0 26px;
  font-family: var(--font-display);
  line-height: 1;
}
.plan__pre,
.plan__note {
  display: block;
  font-family: var(--font-body);
  color: rgba(26, 26, 23, .78);
}
.plan__pre { font-size: 14px; margin-bottom: 8px; }
.plan__amt {
  display: block;
  font-size: 64px;
  letter-spacing: -.02em;
  color: #1A1A17;
}
.plan__note {
  max-width: 28ch;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.plan__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(240px, 100%);
  padding: 0 0 12px;
  border-bottom: 1px solid #1A1A17;
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.plan__cta:hover { color: #1F3A34; }
.plan__arrow {
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-1px);
}
.plan h4 {
  margin: 40px 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
}
.plan__list { list-style: none; margin: 0; padding: 0; }
.plan__list li {
  position: relative;
  max-width: none;
  padding: 6px 0 6px 20px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(26, 26, 23, .78);
}
.plan__list li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: rgba(26, 26, 23, .55);
}
.plan--experience {
  background: #1F3A34;
  color: #F6F3EC;
}
.plan--experience .plan__amt {
  font-size: 34px;
  padding-top: 30px;
  color: #F6F3EC;
}
.plan--experience .plan__tag,
.plan--experience .plan__desc,
.plan--experience .plan__list li {
  color: rgba(246, 243, 236, .82);
}
.plan--experience .plan__list li::before { color: rgba(246, 243, 236, .6); }
.plan--experience .plan__cta { border-bottom-color: #F6F3EC; }
.plan--experience .plan__cta:hover { color: #F6F3EC; }
.plan-note {
  max-width: none;
  margin: 24px 0 0;
  font-size: 14px;
  color: rgba(26, 26, 23, .72);
}
@media (max-width: 700px) {
  .plan { padding: 26px; }
  .plan--experience { min-height: 0; }
  .plan__amt { font-size: 54px; }
}

.svc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 90px;
  border-top: 1px solid #C9C5BC;
}
.svc > div {
  padding: 28px 28px 28px 0;
  border-bottom: 1px solid #C9C5BC;
}
.svc h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
}
.svc h3 a {
  color: inherit;
  text-decoration: none;
}
.svc h3 a:hover { text-decoration: underline; }
.svc p {
  margin: 0;
  max-width: none;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(26, 26, 23, .72);
}
@media (max-width: 700px) {
  .svc { grid-template-columns: 1fr; margin-top: 56px; }
  .svc > div { padding-right: 0; }
}

.home-band {
  background: #1F3A34;
  color: #F6F3EC;
}
#how.home-band { background: #1F3A34; color: #F6F3EC; }
.home-band .home-title { color: #F6F3EC; }
.band-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.band-steps li { max-width: none; }
.band-steps__n {
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(246, 243, 236, .25);
  font-family: var(--font-display);
  font-size: clamp(72px, 8vw, 120px);
  line-height: 1;
  color: #F6F3EC;
}
.band-steps h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  color: #F6F3EC;
}
.band-steps li > p {
  margin: 0;
  max-width: none;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(246, 243, 236, .8);
}
@media (min-width: 62rem) {
  .band-steps__n { font-size: 120px; }
}
@media (max-width: 700px) {
  .band-steps { grid-template-columns: 1fr; gap: 36px; }
  .band-steps__n { font-size: 84px; }
}

.home-why {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: center;
}
.home-why__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
}
.home-why__photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 16px;
}
.home-why .eyebrow {
  display: block;
  margin: 0 0 16px;
  color: #1F3A34;
}
.home-why .home-title { margin-bottom: 8px; }
.home-why__list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.home-why__list li {
  max-width: none;
  padding: 22px 0;
  border-top: 1px solid #C9C5BC;
}
.home-why__list li:last-child { border-bottom: 1px solid #C9C5BC; }
.home-why__list h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: #1A1A17;
}
.home-why__list p {
  margin: 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(26, 26, 23, .72);
}
@media (max-width: 700px) {
  #experience { padding-top: 96px; }
  .home-why {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .home-why__photo { aspect-ratio: 4 / 3; }
  .home-why .home-title { margin-bottom: 4px; }
  .home-why__list { margin-top: 8px; }
  .home-why__list li { padding: 18px 0; }
}

.home-gal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 701px) {
  .home-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.home-gal figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
}
.home-gal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}

html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }

.js-motion .home-title.rise { opacity: 0; transition: opacity .7s ease; }
.js-motion .home-title.rise.is-in { opacity: 1; }
.js-motion .line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.js-motion .line-in {
  display: block;
  transform: translate3d(0, 115%, 0);
  transition: transform .85s cubic-bezier(.22, .8, .3, 1);
}
.js-motion .home-title.is-in .line-in { transform: none; }
.js-motion .rise:not(.home-title) {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .7s ease, transform .7s ease, box-shadow .35s ease;
}
.js-motion .rise:not(.home-title).is-in {
  opacity: 1;
  transform: none;
}
@media (min-width: 62rem) and (hover: hover) {
  .plan,
  .home-gal figure {
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .plan:hover,
  .home-gal figure:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 18px 40px rgba(26, 26, 23, .14);
  }
  .js-motion .plan.rise.is-in:hover,
  .js-motion .home-gal figure.rise.is-in:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 18px 40px rgba(26, 26, 23, .14);
  }
}
@media (prefers-reduced-motion: reduce) {
  .plan:hover,
  .home-gal figure:hover,
  .js-motion .plan.rise.is-in:hover,
  .js-motion .home-gal figure.rise.is-in:hover {
    transform: none;
    box-shadow: none;
  }
  .js-motion .rise,
  .js-motion .line-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}