:root {
  --forest: #082013;
  --moss: #1e3527;
  --cream: #fdf9f2;
  --sand: #f7f3ed;
  --line: #e6e2dc;
  --brown: #715a3e;
  --gold: #fdddb9;
  --ink: #424843;
  --sage: #849e8c;
  --mint: #cee9d4;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

/* Lenis handles smoothing; native smooth-scroll would fight the reset-to-top on refresh */
html.js {
  scroll-behavior: auto
}

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased
}

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

img {
  display: block
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px
}

/* image slots: tinted placeholder shows the expected file name until the image exists */
.ph {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2d4a38, #5b6f55 55%, #a58d62)
}

.ph::after {
  content: attr(data-file);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 11px/1 var(--sans);
  letter-spacing: 1.1px;
  color: rgba(253, 249, 242, .55);
  text-transform: none;
  white-space: nowrap
}

.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1
}

/* type */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--brown)
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor
}

.eyebrow.sm {
  letter-spacing: 1.1px
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 12px;
  background: rgba(253, 249, 242, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cream)
}

.chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold)
}

.chip.lg {
  font-size: 11px;
  letter-spacing: 1.1px;
  color: var(--gold)
}

h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400
}

h2 {
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -1.1px;
  color: var(--forest)
}

h2 em {
  font-style: italic
}

h3 {
  font-weight: 500;
  color: var(--forest)
}

.caps {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1.1px;
  text-transform: uppercase
}

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px
}

.sec-head .eyebrow {
  margin-bottom: 4px
}

.sec-head p {
  max-width: 448px
}

.center-head {
  text-align: center;
  max-width: 768px;
  margin: 0 auto 48px
}

.center-head .eyebrow {
  justify-content: center;
  letter-spacing: 2.2px
}

.center-head .eyebrow::before {
  display: none
}

.center-head p {
  margin-top: 8px
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 24px;
  border-radius: 4px;
  background: var(--cream);
  color: var(--forest);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  transition: box-shadow .2s
}

.btn:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18)
}

.btn.big {
  padding: 16px 32px;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1)
}

.btn svg,
.arrow {
  width: 11px;
  height: 11px;
  flex: none
}

.link {
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--forest);
  display: inline-flex;
  gap: 4px;
  align-items: center
}

.link:hover {
  text-decoration: underline;
  text-underline-offset: 4px
}

/* hero */
.hero {
  position: relative;
  min-height: 920px;
  background: var(--forest);
  display: flex;
  align-items: center;
  overflow: hidden
}

.hero .ph {
  position: absolute;
  inset: 0
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to right, rgba(8, 32, 19, .85), rgba(8, 32, 19, .5), rgba(8, 32, 19, 0)), linear-gradient(to top, rgba(8, 32, 19, .75), rgba(8, 32, 19, 0) 50%, rgba(8, 32, 19, .3))
}

.hero .wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 48px;
  padding-bottom: 48px
}

.hero-copy {
  max-width: 672px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start
}

.hero .eyebrow {
  color: var(--gold);
  font-size: 11px
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -1.28px;
  color: #fff
}

.hero h1 em {
  color: var(--gold)
}

.hero p {
  max-width: 576px;
  font-size: 18px;
  line-height: 29.25px;
  color: rgba(253, 249, 242, .9)
}

.hero .btn {
  margin-top: 8px
}

/* approach */
.approach {
  background: var(--sand);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 49px 0
}

.approach .eyebrow {
  margin-bottom: 28px
}

.approach .grid {
  align-items: start
}

.approach .l {
  grid-column: 1/span 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 245px
}

.approach .l h2 {
  font-size: 50px;
  line-height: 58px;
  letter-spacing: -1.25px
}

.approach .l h2 em {
  color: var(--brown)
}

.leaves {
  display: flex;
  gap: 19px;
  color: var(--moss)
}

.leaves img {
  width: 24px;
  height: 24px
}

.approach .r {
  grid-column: 8/span 5;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.approach .r>p {
  font-size: 18px;
  line-height: 29.25px
}

.note {
  background: var(--moss);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 17px;
  color: var(--sand)
}

.note div {
  display: flex;
  gap: 8px
}

.note svg {
  width: 17px;
  height: 12px;
  flex: none;
  margin-top: 6px;
  color: var(--gold)
}

.note q {
  font-style: italic;
  font-size: 15px;
  line-height: 24px;
  quotes: none;
  padding-right: 11px
}

.note cite {
  display: block;
  margin-top: 12px;
  text-align: right;
  font-style: normal;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold)
}

/* pillars */
.pillars {
  padding: 48px 0
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: start
}

.pillar {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 29px;
  min-height: 276px
}

.pillar.on {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--cream);
  box-shadow: 0 7px 5.5px rgba(0, 0, 0, .35)
}

.pillar .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 42px;
  color: var(--brown)
}

.pillar.on .top {
  color: var(--cream)
}

.pillar .top img {
  width: auto;
  height: 20px;
  align-self: center
}

.pillar h3 {
  font-size: 22px;
  line-height: 30px;
  padding-top: 12px;
  margin-bottom: 4px
}

.pillar.on h3 {
  color: var(--cream)
}

.pillar p {
  font-size: 15px
}

/* escapes collage */
.escapes {
  background: var(--sand);
  padding: 48px 0
}

.collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px
}

.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  display: flex;
  flex-direction: column
}

.card .media {
  position: relative
}

.card .media .ph {
  position: absolute;
  inset: 0
}

.tag {
  position: absolute;
  z-index: 3;
  left: 16px;
  top: 16px;
  background: rgba(253, 249, 242, .9);
  backdrop-filter: blur(6px);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: .55px;
  text-transform: uppercase;
  color: var(--brown)
}

.days {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  background: var(--forest);
  color: #fff;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 16px;
  padding: 2px 8px;
  border-radius: 2px
}

.card .body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 8px
}

.kicker {
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brown)
}

.card h3 {
  font-size: 22px;
  line-height: 30px
}

.card .body p {
  font-size: 13px;
  line-height: 20px;
  padding-top: 2px
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 5px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 20px
}

.foot i {
  color: var(--ink)
}

.foot span,
.foot a:not(.link) {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--forest)
}

.c-big {
  grid-column: 1/span 7;
  grid-row: 1
}

.c-big .media {
  height: 380px
}

.c-big .body {
  padding: 28px
}

.c-big h3 {
  font-size: 28px;
  line-height: 36px
}

.c-big .body p {
  font-size: 15px;
  line-height: 24px
}

.c-big .days {
  right: 16px;
  bottom: 16px;
  font-size: 14px;
  line-height: 18px;
  padding: 4px 12px;
  letter-spacing: 1.12px
}

.c-big .kicker {
  font-size: 11px;
  letter-spacing: 1.1px;
  line-height: 16px
}

.c-big .foot {
  padding-top: 9px
}

.stack {
  grid-column: 8/span 5;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 32px
}

.stack .card {
  flex: 1
}

.stack .media {
  height: 200px
}

.c-wide {
  grid-column: 1/span 8;
  display: grid;
  grid-template-columns: 5fr 7fr
}

.c-wide .media {
  min-height: 293px
}

.c-wide .body {
  padding: 28px
}

.c-wide h3 {
  font-size: 28px;
  line-height: 36px
}

.c-wide .body p {
  font-size: 15px;
  line-height: 24px
}

.c-wide .kicker {
  font-size: 11px;
  letter-spacing: 1.1px;
  line-height: 16px
}

.c-wide .foot span,
.c-wide .foot a {
  letter-spacing: 1.1px
}

.c-wide .foot i {
  font-family: var(--serif);
  color: var(--brown);
  font-size: 14px
}

.c-wide .foot {
  padding-top: 9px
}

.c-dark {
  grid-column: 9/span 4;
  background: var(--moss);
  border-radius: 8px;
  padding: 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden
}

.c-dark::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px
}

.c-dark .kicker {
  color: var(--mint)
}

.c-dark h3 {
  color: #fff;
  font-size: 28px;
  line-height: 36px;
  padding-top: 4px
}

.c-dark p {
  color: var(--sage);
  margin-top: 4px
}

.c-dark .btn {
  width: 100%;
  margin-top: 28px;
  position: relative;
  z-index: 1
}

/* panoramas */
.pano-sec {
  background: var(--cream);
  padding: 48px 64px
}

.pano {
  position: relative;
  max-width: 1152px;
  margin: 0 auto;
  min-height: 640px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  display: flex;
  align-items: flex-end;
  background: var(--forest)
}

.pano .ph {
  position: absolute;
  inset: 0
}

.pano::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(8, 32, 19, .9), rgba(8, 32, 19, .4) 50%, rgba(8, 32, 19, 0)), linear-gradient(to right, rgba(8, 32, 19, .6), rgba(8, 32, 19, 0) 50%)
}

.pano-in {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 48px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: end
}

.pano-copy {
  grid-column: 1/span 8;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start
}

.pano-copy h2 {
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -1.4px;
  color: #fff
}

.pano-copy h2 em {
  color: var(--gold)
}

.pano-copy p {
  max-width: 576px;
  font-size: 18px;
  line-height: 30px;
  color: rgba(236, 232, 225, .9)
}

.pano-cta {
  grid-column: 9/span 4;
  display: flex;
  justify-content: flex-end
}

/* destinations */
.dest {
  background: var(--sand);
  border-top: 1px solid var(--line);
  padding: 49px 0 48px
}

.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px
}

.dest .card .media {
  height: 288px
}

.dest .tag {
  border-radius: 2px;
  backdrop-filter: blur(2px);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none
}

.dest .body {
  padding: 28px 28px 0;
  justify-content: flex-start;
  gap: 4px
}

.dest h3 {
  font-size: 28px;
  line-height: 36px;
  padding-top: 4px
}

.dest .body p {
  font-size: 15px;
  line-height: 24px
}

.dest .foot {
  margin: 0 28px 28px;
  padding-top: 17px;
  margin-top: auto
}

.dest .foot i {
  color: var(--brown)
}

.dest .card {
  justify-content: space-between
}

/* process */
.process {
  background: var(--cream);
  padding: 48px 0
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 0;
  position: relative
}

.step {
  position: relative
}

.dot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .7px;
  color: var(--brown);
  position: relative;
  z-index: 1;
  width: fit-content;
  background: var(--cream);
  padding-right: 14px
}

.dot b {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--moss);
  display: grid;
  place-items: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
}

.dot b::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--moss)
}

.dot.fin b {
  background: var(--moss);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1)
}

.dot.fin b::after {
  display: none
}

.dot.fin svg {
  width: 9px;
  height: 9px;
  color: var(--cream)
}

.step .caps {
  color: var(--forest);
  margin-bottom: 6px
}

.step h3 {
  font-weight: 400;
  font-size: 20px;
  line-height: 27.5px
}

.step p {
  font-size: 13px;
  line-height: 21px;
  padding-top: 2px
}

/* founder */
.founder {
  background: var(--forest);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 49px 0
}

.founder .chip {
  margin-bottom: 28px
}

.f-grid {
  align-items: center
}

.portrait {
  grid-column: 1/span 5;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1)
}

.portrait .ph {
  aspect-ratio: 459/616;
  border-radius: 15px
}

.f-copy {
  grid-column: 6/span 7;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--cream)
}

.f-copy .role {
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase
}

.f-copy h2 {
  font-size: 48px;
  line-height: 72px;
  letter-spacing: -1.2px;
  color: var(--gold)
}

.f-copy .quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 30px
}

.f-copy p {
  line-height: 24.38px
}

.f-copy .paras {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.attrs {
  display: flex;
  gap: 16px;
  padding-top: 8px
}

.attrs div {
  flex: 1;
  border-left: 2px solid var(--brown);
  padding: 0 0 3px 14px
}

.attrs b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 1.12px;
  margin-bottom: 5px
}

.attrs span {
  font-size: 12px;
  line-height: 16px
}

.ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  flex-wrap: wrap
}

.ctas .btn {
  border-radius: 12px;
  padding: 14px 28px
}

.ctas a.t {
  color: var(--cream)
}

/* stories */
.stories {
  background: var(--cream);
  padding: 48px 0
}

.story {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 29px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px
}

.stars {
  display: flex;
  gap: 4px;
  color: var(--brown);
  margin-bottom: 15px
}

.stars svg {
  width: 15px;
  height: 14px
}

.story q {
  display: block;
  quotes: none;
  font-style: italic;
  font-size: 18px;
  line-height: 29.25px;
  color: #1c1c18
}

.who {
  border-top: 1px solid rgba(230, 226, 220, .6);
  padding-top: 16px
}

.who h4 {
  font-size: 17px;
  line-height: 25.5px;
  color: var(--forest);
  margin-bottom: 4.5px
}

.who span {
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--brown)
}

/* journal */
.journal {
  background: var(--forest);
  border-top: 1px solid var(--line);
  padding: 49px 0 48px
}

.journal h2,
.journal .sec-head .link {
  color: var(--cream)
}

.journal .article {
  align-self: start
}

.article .media {
  height: 240px
}

.article .tag {
  border-radius: 2px;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: .5px
}

.article .body {
  padding: 28px 28px 0;
  justify-content: flex-start;
  gap: 4px
}

.article .meta {
  font-family: var(--serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--brown)
}

.article h3 {
  font-size: 22px;
  line-height: 30px
}

.article .body p {
  padding-top: 4px;
  font-size: 13px;
  line-height: 21.13px
}

.article .more {
  padding: 16px 28px 28px;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--forest)
}

.three {
  align-items: start
}

/* diary */
.diary {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 49px 0 48px
}

.diary .sec-head {
  margin-bottom: 28px
}

.diary .sec-head p {
  max-width: none;
  margin-top: 0
}

.diary .sec-head .link svg {
  width: 12px;
  height: 12px
}

.diary .eyebrow {
  letter-spacing: 2.2px
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.tiles .ph {
  height: 276px;
  border-radius: 4px
}

/* cta */
.cta {
  background: var(--forest);
  padding: 80px 0
}

.cta .grid {
  gap: 48px;
  align-items: center
}

.cta .l {
  grid-column: 1/span 7
}

.cta .eyebrow {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 2.4px
}

.cta .eyebrow::before {
  width: 6px;
  height: 6px
}

.cta h2 {
  color: var(--cream);
  padding-top: 12px
}

.cta p {
  max-width: 576px;
  margin-top: 12px;
  font-size: 16px;
  line-height: 26px;
  color: rgba(236, 232, 225, .8)
}

.cta .r {
  grid-column: 8/span 5
}

.cta .btns {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap
}

.cta .btn {
  font-size: 12px;
  letter-spacing: 1.2px;
  padding: 14px 28px;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1)
}

.cta .ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 15px 29px;
  box-shadow: none
}

.cta .trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 19px;
  margin-top: 20px;
  font-size: 12px;
  line-height: 16px;
  color: var(--sage)
}

.cta .trust span {
  display: inline-flex;
  gap: 6px;
  align-items: center
}

.cta .trust svg {
  width: 12.5px;
  height: 12.5px;
  color: var(--gold)
}

/* footer */
footer {
  background: var(--sand);
  border-top: 1px solid var(--line);
  padding: 49px 0 28px
}

.f-top {
  min-height: 170px
}

.f-brand {
  grid-column: 1/span 5;
  padding-right: 32px
}

.logo {
  width: 150px;
  height: 98px;
  margin-bottom: 8px;
  background: transparent
}

.logo.ph {
  background: linear-gradient(135deg, #e6e2dc, #d6cfc4)
}

.logo.ph::after {
  font-size: 9px;
  color: var(--brown)
}

.f-col {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.f-col h5 {
  font: 400 11px/16px var(--sans);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--brown)
}

.f-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 20px
}

.f-col li a:hover {
  color: var(--forest);
  text-decoration: underline
}

.f-col li small {
  font: 12px var(--serif);
  color: var(--brown);
  margin-right: 4px
}

.f-bot {
  border-top: 1px solid var(--line);
  margin-top: 0;
  padding-top: 29px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 20px
}

.f-bot nav {
  display: flex;
  gap: 16px;
  align-items: center
}

.f-bot nav i {
  font-style: normal;
  color: #c2c8c1
}

/* responsive */
@media(max-width:1000px) {
  .wrap {
    padding: 0 32px
  }

  .pano-sec {
    padding: 48px 32px
  }

  .hero h1 {
    font-size: 52px;
    line-height: 60px
  }

  .pillar-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .approach .l,
  .approach .r,
  .c-big,
  .stack,
  .c-wide,
  .c-dark,
  .pano-copy,
  .pano-cta,
  .portrait,
  .f-copy,
  .cta .l,
  .cta .r,
  .f-brand {
    grid-column: 1/-1
  }

  .approach .l {
    min-height: 0;
    gap: 24px
  }

  .collage {
    grid-template-columns: 1fr
  }

  .c-big,
  .stack,
  .c-wide,
  .c-dark {
    grid-row: auto
  }

  .three {
    grid-template-columns: 1fr
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px
  }

  .steps-line {
    display: none
  }

  .tiles {
    grid-template-columns: repeat(2, 1fr)
  }

  .f-copy {
    padding-left: 0
  }

  .pano-cta {
    justify-content: flex-start
  }

  .pano-copy h2 {
    font-size: 44px;
    line-height: 52px
  }

  .sec-head {
    flex-direction: column;
    align-items: flex-start
  }

  .grid {
    gap: 24px
  }

  .f-top .f-col {
    grid-column: span 4
  }
}

@media(max-width:600px) {
  .wrap {
    padding: 0 20px
  }

  .pano-sec {
    padding: 32px 20px
  }

  h2 {
    font-size: 34px;
    line-height: 42px
  }

  .hero h1 {
    font-size: 42px;
    line-height: 50px
  }

  .approach .l h2 {
    font-size: 36px;
    line-height: 44px
  }

  .pillar-grid,
  .steps,
  .tiles {
    grid-template-columns: 1fr
  }

  .c-wide {
    grid-template-columns: 1fr
  }

  .pano-in {
    padding: 28px 20px
  }

  .pano-copy h2 {
    font-size: 34px;
    line-height: 42px
  }

  .attrs {
    flex-direction: column
  }

  .f-top .f-col {
    grid-column: 1/-1
  }
}

/* motion */
html.lenis,
html.lenis body {
  height: auto
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important
}

.progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 90;
  pointer-events: none
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--forest);
  display: none;
  place-items: center;
  color: var(--gold);
  text-align: center;
  padding: 0 24px
}

.js .loader {
  display: grid
}

.loader .l1 {
  font: italic 400 clamp(30px, 6vw, 64px)/1.15 var(--serif);
  overflow: hidden;
  padding-bottom: .12em
}

.loader small {
  display: block;
  margin-top: 14px;
  font: 11px/16px var(--sans);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--sage);
  overflow: hidden
}

.loader span {
  display: inline-block
}

.js .loader span {
  opacity: 0
}

@keyframes loaderFail {
  to {
    visibility: hidden;
    pointer-events: none
  }
}

.js .loader {
  animation: loaderFail 0s 10s forwards
}

.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 .08em .14em 0;
  margin: 0 -.08em -.14em 0
}

.wi {
  display: inline-block;
  will-change: transform
}

.marquee {
  background: var(--forest);
  overflow: hidden;
  padding: 20px 0 24px
}

.m-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  white-space: nowrap;
  font: italic 400 clamp(26px, 3.4vw, 46px)/1.2 var(--serif);
  color: transparent;
  -webkit-text-stroke: 1px rgba(253, 221, 185, .5);
  animation: mqslide 36s linear infinite;
  will-change: transform
}

.marquee:hover .m-track {
  animation-play-state: paused
}

@keyframes mqslide {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-33.3333%)
  }
}

@media(prefers-reduced-motion:reduce) {
  .m-track {
    animation: none
  }
}

.m-track span.fill {
  color: var(--gold);
  -webkit-text-stroke: 0
}

.m-track i {
  width: 9px;
  height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none
}

.steps-line {
  position: absolute;
  left: 14px;
  right: calc((100% - 96px)/5 - 14px);
  top: 14px;
  z-index: 0;
  height: 1px;
  background: var(--line)
}

.steps-line b {
  display: block;
  height: 100%;
  background: var(--moss);
  transform-origin: left
}

.rev {
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .7s
}

.card.rev:hover,
.story.rev:hover,
.pillar.rev:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 40px -18px rgba(8, 32, 19, .35)
}

.tiles {
  padding-block: 12px 80px
}

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid #fff;
  border-radius: 50%;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 95;
  opacity: 0
}

@media(hover:none), (pointer:coarse) {
  .cursor {
    display: none
  }
}

/* header */
html {
  scroll-padding-top: 90px
}

.hd {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 82;
  background: rgba(247, 243, 237, .9);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(230, 226, 220, .9);
  transition: transform .7s cubic-bezier(.7, 0, .2, 1), box-shadow .5s, background .4s
}

.hd.is-stuck {
  box-shadow: 0 10px 30px -18px rgba(8, 32, 19, .35);
  background: rgba(247, 243, 237, .95)
}

.hd.is-hidden {
  transform: translateY(-102%)
}

.hd.open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none
}

.hd-in {
  height: 110px;
  transition: height .6s cubic-bezier(.7, 0, .2, 1);
  padding: 0 clamp(20px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px
}

.brand {
  display: flex;
  align-items: center;
  width: max-content;
  height: 92px;
  transition: height .6s cubic-bezier(.7, 0, .2, 1), opacity .4s
}

.hd.open .brand {
  opacity: 0
}

.brand img {
  height: 100%;
  width: auto;
  display: block
}

.hd.is-stuck .hd-in {
  height: 80px
}

.hd.is-stuck .brand {
  height: 64px
}

.brand-fb {
  display: none;
  font: 400 22px/1 var(--serif);
  color: var(--forest);
  letter-spacing: -.4px
}

.brand-fb b {
  font-style: italic;
  font-weight: 400;
  color: var(--brown);
  padding: 0 2px
}

.brand.noimg img {
  display: none
}

.brand.noimg .brand-fb {
  display: block
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 44px;
  justify-self: center
}

.nav-link {
  display: block;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  transform-origin: 50% 60%;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), color .4s;
  white-space: nowrap
}

.nav-link.is-active {
  transform: scale(1.22);
  color: var(--forest)
}

.nav-link:hover {
  color: var(--forest)
}

.roll {
  display: block;
  height: 16px;
  overflow: hidden
}

.roll>span {
  display: block;
  transition: transform .6s cubic-bezier(.7, 0, .2, 1)
}

.nav-link:hover .roll>span,
.nav-link:focus-visible .roll>span,
.hd-cta:hover .roll>span,
.hd-cta:focus-visible .roll>span {
  transform: translateY(-100%)
}

.nav-ind {
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 0;
  background: var(--forest);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), width .7s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none
}

.hd-r {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end
}

.hd-cta {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 10px 20px;
  border-radius: 4px;
  background: var(--moss);
  color: var(--cream);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  isolation: isolate;
  white-space: nowrap
}

.hd-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brown);
  transform: translateY(101%);
  transition: transform .6s cubic-bezier(.7, 0, .2, 1);
  z-index: -1
}

.hd-cta:hover::before {
  transform: translateY(0)
}

.hd-user {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--moss);
  color: var(--cream);
  display: grid;
  place-items: center;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), background .4s
}

.hd-user svg {
  width: 15px;
  height: 15px
}

.hd-user:hover {
  transform: scale(1.12);
  background: var(--forest)
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer
}

.burger i {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  background: var(--forest);
  transition: transform .6s cubic-bezier(.7, 0, .2, 1), background .4s
}

.burger i:first-child {
  top: 18px
}

.burger i:last-child {
  top: 25px
}

.hd.open .burger i {
  background: var(--cream)
}

.hd.open .burger i:first-child {
  transform: translateY(3.5px) rotate(45deg)
}

.hd.open .burger i:last-child {
  transform: translateY(-3.5px) rotate(-45deg)
}

.hd a:focus-visible,
.burger:focus-visible,
.menu a:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 4px
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 81;
  background: var(--forest);
  color: var(--cream);
  padding: 112px clamp(20px, 6vw, 64px) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: circle(0 at calc(100% - 44px) 40px);
  visibility: hidden;
  transition: clip-path .9s cubic-bezier(.7, 0, .2, 1), visibility 0s .9s
}

.menu.open {
  clip-path: circle(150% at calc(100% - 44px) 40px);
  visibility: visible;
  transition: clip-path 1s cubic-bezier(.7, 0, .2, 1), visibility 0s
}

.menu nav {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.menu nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font: 400 clamp(34px, 9vw, 56px)/1.2 var(--serif);
  overflow: hidden;
  color: var(--cream);
  padding-bottom: .06em
}

.menu nav a small {
  font: 12px var(--serif);
  color: var(--gold);
  letter-spacing: .7px
}

.menu nav a span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1)
}

.menu.open nav a span {
  transform: none;
  transition-delay: calc(.35s + var(--i)*.07s)
}

.m-foot {
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s .7s, transform .8s .7s
}

.menu.open .m-foot {
  opacity: 1;
  transform: none
}

.m-cta {
  align-self: flex-start;
  padding: 14px 28px;
  border-radius: 4px;
  background: var(--cream);
  color: var(--forest);
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase
}

.m-meta {
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sage)
}

@media(max-width:900px) {
  .hd-in {
    display: flex;
    justify-content: space-between;
    height: 68px
  }

  .nav,
  .hd-cta,
  .hd-user {
    display: none
  }

  .burger {
    display: block
  }

  .brand,
  .brand img {
    height: 50px
  }

  .hd.is-stuck .hd-in {
    height: 68px
  }

  .hd.is-stuck .brand {
    height: 50px
  }

  html {
    scroll-padding-top: 68px
  }
}

@media(min-width:901px) {
  .menu {
    display: none
  }
}

/* pillars: all rest light, hover turns the card dark */
.pillar,
.pillar.rev {
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .7s, background-color .55s, border-color .55s, color .55s
}

.pillar .top,
.pillar h3,
.pillar p {
  transition: color .55s
}

.pillar .top img {
  filter: brightness(0) opacity(.55);
  transition: filter .55s
}

.pillar:hover,
.pillar:focus-within {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--cream);
  box-shadow: 0 7px 5.5px rgba(0, 0, 0, .35)
}

.pillar:hover .top,
.pillar:focus-within .top,
.pillar:hover h3,
.pillar:focus-within h3 {
  color: var(--cream)
}

.pillar:hover p {
  color: rgba(253, 249, 242, .85)
}

.pillar:hover .top img,
.pillar:focus-within .top img {
  filter: brightness(0) invert(1)
}

.logo.ph img {
  background: var(--sand)
}
/* the loader wordmark matches the inner-page curtain exactly */
.loader .l1 {
  font: italic 400 clamp(30px, 5vw, 56px)/1.15 var(--serif);
  letter-spacing: -.5px
}

.loader .l1 b {
  font-weight: 400;
  color: var(--sage);
  padding: 0 3px
}

/* responsive: the 12-column grid's gaps must not widen a single-column layout */
@media(max-width:1000px) {
  .cta .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px
  }
}