@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/jost-latin-variable.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --paper: #fbf7f8;
  --ink: #423642;
  --ink-soft: #5b505d;
  --line: rgba(102, 82, 99, .29);
  --side: clamp(1.5rem, 6.2vw, 7rem);
  font-family: "Jost", "Avenir Next", "Helvetica Neue", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
}

h1, h2, h3, p { margin: 0; }

h1, h2, h3 { font-weight: 300; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.hero,
.intro,
.closing { position: relative; isolation: isolate; overflow: hidden; }

.hero { min-height: 40rem; min-height: max(40rem, 100svh); color: #201923; background: #65576c; }

.hero__image,
.closing__image { position: absolute; inset: 0; z-index: -1; background-repeat: no-repeat; background-size: cover; }

.hero__image { background-image: url("/assets/hero-dusk-upscaled-4320.jpg"); background-position: center 54%; }

/* PNG layers share the original photograph's cover geometry, not the viewport's. */
.hero__ocean { position: absolute; inset: 0; overflow: hidden; pointer-events: none; visibility: hidden; }
.hero[data-ocean="ready"] .hero__ocean { visibility: visible; }
.ocean-scene { position: absolute; width: var(--ocean-width); height: var(--ocean-height); left: var(--ocean-left); top: var(--ocean-top); mask-image: linear-gradient(to bottom, transparent 58%, #000 66%, #000 98%, transparent 100%); }
.ocean-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; animation-play-state: paused !important; }
.ocean-layer { transform-origin: center 78%; opacity: var(--alpha-low, .15); animation: ocean-drift var(--duration, 27s) ease-in-out var(--phase, -8s) infinite; }
.ocean-layer--wave { mask-image: linear-gradient(to bottom, transparent var(--band-start), #000 var(--band-center), transparent var(--band-end)); }
.hero[data-motion="running"] .ocean-layer { animation-play-state: running !important; }
.hero__inner { position: relative; z-index: 1; }
@keyframes ocean-drift {
  0%, 100% { transform: var(--pose-0); opacity: var(--alpha-low); }
  20% { transform: var(--pose-1); opacity: var(--alpha-high); }
  40% { transform: var(--pose-2); opacity: var(--alpha-mid); }
  60% { transform: var(--pose-3); opacity: var(--alpha-high); }
  80% { transform: var(--pose-4); opacity: var(--alpha-mid); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero__ocean { display: none; }
  .hero .ocean-layer { animation: none; }
}

.closing__inner { min-height: inherit; display: grid; grid-template-rows: auto 1fr; }

.hero__inner {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 5rem;
  padding: clamp(10rem, 30svh, 25rem) var(--side) clamp(3rem, 10svh, 7rem);
  text-align: center;
}

.wordmark {
  display: block;
  height: auto;
  max-width: 100%;
  margin-inline: auto;
}

.wordmark--hero { width: min(44vw, 36rem); }

.hero__identity { width: 100%; }
.hero__eyebrow { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); font-size: clamp(1.15rem, 1.65vw, 1.55rem); font-weight: 400; letter-spacing: .015em; line-height: 1.4; }
.hero__descriptor { margin-top: clamp(1.75rem, 3.2vw, 2.6rem); font-size: clamp(.88rem, 1.05vw, .98rem); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; line-height: 1.8; color: #fffaf6; }

.hero h1 {
  font-size: clamp(1.7rem, 2.35vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.3;
  color: #fffaf6;
  text-shadow: 0 1px 12px rgba(31, 25, 37, .28);
}

.vertical-rule { display: block; width: 1px; height: 39px; margin: clamp(1.8rem, 4vh, 3rem) auto 1.65rem; background: rgba(255,255,255,.78); }

.intro { min-height: 680px; display: flex; align-items: center; background: #f8f1f4; }

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

.intro__inner { width: min(100%, 1600px); margin-inline: auto; padding: 8rem var(--side); }

.intro__copy { max-width: 38rem; }

.intro h2 {
  font-size: clamp(3rem, 4.9vw, 4.8rem);
  letter-spacing: -.035em;
  line-height: 1.08;
  color: #574357;
}

.horizontal-rule { display: block; width: 56px; height: 1px; margin: 2.9rem 0 2rem; background: #8e7789; }

.intro p { max-width: 27rem; font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.65; color: #544450; }

.approach {
  --approach-ink: #472b40;
  --approach-brass: #99865f;
  background: #e5dfd6;
  color: var(--approach-ink);
  padding-top: clamp(4.5rem, 6vw, 6rem);
}

.section-shell { width: min(100%, 1320px); margin-inline: auto; }

.approach > .section-shell { width: min(calc(100% - 2 * var(--side)), 1260px); }

.approach__lead { text-align: center; margin-bottom: clamp(3rem, 4vw, 4rem); }

.approach__lead h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 300; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.approach__lead h2 span { display: block; }
.approach__rule { display: block; width: 5.5rem; height: 1px; margin: 1.75rem auto; background: var(--approach-brass); }
.approach__lead p { max-width: 42rem; margin-inline: auto; font-size: 1.15rem; line-height: 1.7; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin: 0; padding: 2.5rem 0 4.5rem; list-style: none; border-top: 1px solid var(--approach-brass); }

.steps li { text-align: center; }

.steps__number { display: block; margin-bottom: .85rem; font-size: .95rem; letter-spacing: .2em; color: #806e4e; }

.steps h3 { margin-bottom: 1.1rem; font-size: 1.45rem; font-weight: 400; line-height: 1.3; letter-spacing: .17em; text-transform: uppercase; }

.steps p { max-width: 17rem; margin-inline: auto; font-size: 1.1rem; line-height: 1.6; }

.outcomes-band { padding: 3.5rem var(--side); background-color: #82616d; background-image: linear-gradient(rgba(130,97,109,.9), rgba(130,97,109,.82)), url('/assets/closing-sea-upscaled-4320.jpg'); background-size: cover; background-position: center bottom; color: #fffaf6; }

.outcomes { display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
.outcomes > div { padding: .5rem 2.5rem; }
.outcomes > div + div { border-left: 1px solid rgba(255,250,246,.42); }

.outcomes h3 { margin-bottom: 1rem; font-size: .8rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; }

.outcomes p { max-width: 25rem; margin-inline: auto; font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 300; line-height: 1.5; }

.closing { min-height: 82vh; min-height: 82svh; background: #ad91a0; }

.closing__image { background-image: url("/assets/closing-sea-upscaled-4320.jpg"); background-position: center top; }

.closing__inner { position: relative; min-height: inherit; grid-template-rows: 1fr auto; align-items: center; padding: 6rem var(--side) 3rem; }

.closing__copy { text-align: center; }

.closing h2 { font-size: clamp(3rem, 5vw, 5rem); letter-spacing: -.035em; line-height: 1.1; color: #302735; }

.vertical-rule--dark { height: 28px; margin-top: 1.6rem; margin-bottom: 1.25rem; background: rgba(58, 45, 60, .75); }

.closing__copy p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 400; letter-spacing: .015em; line-height: 1.6; color: #302735; }

.wordmark--closing { width: clamp(11rem, 20vw, 17rem); filter: brightness(0) invert(1); }

@media (max-width: 640px) {
  :root { --side: 1.5rem; }
  .hero { min-height: 38rem; min-height: max(38rem, 100svh); }
  .hero__image { background-position: 59% center; }
  .hero__inner { padding-block: clamp(6.75rem, 18svh, 12rem) clamp(4rem, 18svh, 10rem); }
  .wordmark--hero { width: 80vw; max-width: 25rem; }
  .hero__eyebrow { font-size: 1.08rem; margin-bottom: 1.9rem; }
  .hero__descriptor { font-size: .84rem; letter-spacing: .12em; margin-top: 1.8rem; line-height: 1.85; color: #201923; }
  .hero h1 { font-size: clamp(1.3rem, 5.6vw, 1.65rem); letter-spacing: -.025em; }
  .intro { min-height: 36rem; min-height: clamp(36rem, 85svh, 46rem); }
  .intro__image { object-position: 52% center; }
  .intro__inner { padding-block: 6rem 4rem; }
  .intro h2 { font-size: clamp(1.875rem, 9vw, 2.5rem); line-height: 1.12; }
  .intro .horizontal-rule { margin-block: 2.5rem 1.75rem; }
  .intro p { font-size: 1.08rem; }
  .approach { padding-top: 3.25rem; }
  .approach__lead { margin-bottom: 2.25rem; }
  .approach__lead h2 { font-size: clamp(1.2rem, 6vw, 1.8rem); letter-spacing: .1em; line-height: 1.55; }
  .approach__rule { width: 4rem; margin-block: 1.5rem; }
  .approach__lead p { max-width: 25rem; font-size: 1rem; line-height: 1.65; }
  .steps { grid-template-columns: 1fr; gap: 0; padding-block: .4rem 2rem; }
  .steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .85rem; text-align: left; padding-block: 1.4rem; }
  .steps li + li { border-top: 1px solid rgba(153,134,95,.3); }
  .steps__number { grid-row: 1 / 3; margin: .15rem 0 0; font-size: .8rem; }
  .steps h3 { font-size: 1.1rem; margin-bottom: .55rem; letter-spacing: .14em; }
  .steps p { max-width: none; margin: 0; font-size: 1rem; }
  .outcomes-band { padding-block: 2.25rem; background-size: auto 260%; }
  .outcomes { grid-template-columns: 1fr; gap: 1.5rem; }
  .outcomes > div { padding: 0; }
  .outcomes > div + div { border-left: 0; border-top: 1px solid rgba(255,250,246,.36); padding-top: 1.5rem; }
  .outcomes h3 { font-size: .72rem; margin-bottom: .7rem; }
  .outcomes p { max-width: 18rem; font-size: 1.2rem; }
  .closing { min-height: 36rem; min-height: max(36rem, 84svh); }
  .closing__image { background-position: 51% center; }
  .closing__inner { padding-block: 3rem 2.5rem; }
  .closing__copy { align-self: start; padding-top: 3rem; }
  .closing h2 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .closing__copy p { max-width: 17rem; margin-inline: auto; font-size: 1.03rem; }
}

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