/* Find Your Retreat — three sequential rooms with ambient transitions */

.finder {
  position: relative;
  /* Height is content-driven — the padding on .finder__container gives
     breathing room on short steps (duration, reveal) without forcing a
     full-viewport void on tall screens. */
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
}

/* Ambient background layer — cross-fades as selections change */
.finder__ambient {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.finder__ambient .layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.finder__ambient .layer.is-active { opacity: 1; }
.finder__ambient .layer .img {
  position: absolute; inset: -4%;
  width: 108%; height: 108%;
  transform: scale(1.08);
  transition: transform 6000ms var(--ease-out);
}
.finder__ambient .layer .img::before { display: none; }
.finder__ambient .layer.is-active .img { transform: scale(1); }
.finder__ambient .shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(246,243,236,0.78) 0%, rgba(246,243,236,0.62) 40%, rgba(246,243,236,0.88) 100%);
  transition: background 1200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.finder.step-0 .finder__ambient .shade { background: linear-gradient(180deg, rgba(246,243,236,0.72) 0%, rgba(246,243,236,0.6) 40%, rgba(246,243,236,0.82) 100%); }
.finder.step-1 .finder__ambient .shade { background: linear-gradient(180deg, rgba(237,241,236,0.7) 0%, rgba(237,241,236,0.5) 40%, rgba(237,241,236,0.82) 100%); }
.finder.step-2 .finder__ambient .shade { background: linear-gradient(180deg, rgba(246,243,236,0.65) 0%, rgba(246,243,236,0.45) 40%, rgba(246,243,236,0.78) 100%); }
.finder.step-3 .finder__ambient .shade { background: linear-gradient(180deg, rgba(31,42,34,0.78) 0%, rgba(31,42,34,0.62) 40%, rgba(31,42,34,0.88) 100%); }

.finder__container {
  position: relative; z-index: 2;
  padding: clamp(90px, 13vh, 160px) var(--gutter) clamp(70px, 10vh, 120px);
  max-width: var(--col-wide);
  margin: 0 auto;
  display: flex; flex-direction: column;
}

/* Header — progress indicator */
.finder__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(40px, 6vh, 70px);
  gap: 30px;
}
@media (max-width: 720px) {
  .finder__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: clamp(28px, 4vh, 40px);
  }
  .finder__steps {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px 18px;
    row-gap: 10px;
  }
  .finder__steps .step { flex: 0 0 calc(50% - 9px); }
}
.finder__head .title {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: var(--ink-quiet);
  display: flex; align-items: center; gap: 12px;
}
.finder__head .title .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jungle); }
.finder.step-3 .finder__head .title { color: rgba(246,243,236,0.6); }

.finder__steps {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
}
.finder__steps .step {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-whisper);
  transition: color 400ms var(--ease-out);
  cursor: pointer;
}
.finder__steps .step .n {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(31,42,34,0.18);
  font-size: 10px;
  transition: all 400ms var(--ease-out);
}
.finder__steps .step.is-done { color: var(--ink-soft); }
.finder__steps .step.is-done .n { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.finder__steps .step.is-active { color: var(--jungle-deep); }
.finder__steps .step.is-active .n { border-color: var(--jungle-deep); color: var(--jungle-deep); }
.finder.step-3 .finder__steps .step { color: rgba(246,243,236,0.4); }
.finder.step-3 .finder__steps .step.is-done .n { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.finder.step-3 .finder__steps .step.is-done { color: var(--cream); }

/* Rooms — only the active room contributes to layout height. Inactive
   rooms are absolutely positioned, so the container sizes naturally
   to whatever step the user is on (no void below short rooms like
   duration or reveal). Trade-off: the finder height changes when
   switching steps, but we prefer a small jump over a big void. */
.finder__rooms {
  position: relative;
}
.room {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.room.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.room__intro {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(36px, 5vh, 60px);
}
.room__eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.finder.step-3 .room__eyebrow { color: rgba(246,243,236,0.6); }
.room__eyebrow .sep { width: 28px; height: 1px; background: currentColor; opacity: 0.4; }
.room h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 400;
  max-width: 16ch;
}
.room h2 em { font-style: italic; color: var(--jungle-deep); }
.finder.step-3 .room h2 { color: var(--cream); }
.finder.step-3 .room h2 em { color: var(--tan-soft); }

.room__desc {
  font-size: clamp(15.5px, 1.1vw, 18px);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 44ch;
}
.finder.step-3 .room__desc { color: rgba(246,243,236,0.75); }

@media (max-width: 900px) {
  .room__intro { grid-template-columns: 1fr; gap: 20px; }
}

/* Option cards - shared */
.options {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
}
.opt {
  position: relative;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid rgba(31,42,34,0.14);
  border-radius: 4px;
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  cursor: pointer;
  text-align: left;
  display: block;
  width: 100%;
  transition:
    border-color 400ms var(--ease-out),
    background 400ms var(--ease-out),
    transform 600ms var(--ease-out),
    box-shadow 600ms var(--ease-out);
  overflow: hidden;
}
.opt:hover {
  border-color: rgba(31,42,34,0.3);
  background: rgba(255,255,255,0.75);
  transform: translateY(-2px);
}
.opt.is-selected {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 24px 60px -24px rgba(31,42,34,0.5);
}

/* DURATION ROOM */
.durations { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .durations { grid-template-columns: repeat(2, 1fr); } }
.opt--duration { min-height: 320px; display: flex; flex-direction: column; gap: 18px; }
.opt--duration .days {
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 108px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-weight: 400;
}
.opt--duration .days em { font-style: italic; color: var(--jungle-deep); }
.opt--duration.is-selected .days em { color: var(--tan-soft); }
.opt--duration .days .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--trk-caption);
  text-transform: uppercase;
  display: block;
  margin-top: 10px;
  color: var(--ink-quiet);
}
.opt--duration.is-selected .days .unit { color: rgba(246,243,236,0.6); }
.opt--duration .char {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 26px);
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-top: auto;
  max-width: 16ch;
}
.opt--duration.is-selected .char { color: var(--cream); }
.opt--duration .sub {
  font-size: 14px;
  color: var(--ink-quiet);
  line-height: 1.55;
  max-width: 30ch;
}
.opt--duration.is-selected .sub { color: rgba(246,243,236,0.65); }

@media (max-width: 900px) {
  .durations { grid-template-columns: 1fr; gap: 14px; }
  .opt--duration {
    min-height: auto;
    padding: 22px 22px 24px;
    gap: 10px;
  }
  .opt--duration .days { font-size: 56px; line-height: 0.95; }
  .opt--duration .days .unit { margin-top: 6px; font-size: 10px; }
  .opt--duration .char { font-size: 19px; margin-top: 6px; }
  .opt--duration .sub { font-size: 13.5px; }
}

/* TIER ROOM */
.tiers { grid-template-columns: repeat(3, 1fr); }
.opt--tier {
  min-height: 480px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--cream);
  /* Deep jungle card — opaque enough to read, atmospheric enough to feel held */
  background: linear-gradient(168deg, rgba(47, 74, 58, 0.96) 0%, rgba(31, 52, 40, 0.96) 100%);
  border: 1px solid rgba(237, 241, 236, 0.14);
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.opt--tier:hover {
  background: linear-gradient(168deg, rgba(53, 84, 66, 0.97) 0%, rgba(35, 58, 45, 0.97) 100%);
  border-color: rgba(237, 241, 236, 0.26);
}
.opt--tier.is-selected {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
}
.opt--tier .tag {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: var(--tan-soft);
}
.opt--tier.is-selected .tag { color: var(--tan-soft); }
.opt--tier .name {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.18;
  padding-bottom: 0.08em;
  color: var(--ink);
}
.opt--tier .name em { font-style: italic; color: var(--tan-soft); }
.opt--tier.is-selected .name { color: var(--cream); }
.opt--tier.is-selected .name em { color: var(--tan-soft); }
.opt--tier .price {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.8vw, 28px);
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 8px;
  color: var(--cream);
}
.opt--tier .price .n { color: inherit; }
.opt--tier .price .d {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: rgba(246, 243, 236, 0.6);
}
.opt--tier.is-selected .price { color: var(--cream); }
.opt--tier.is-selected .price .d { color: rgba(246, 243, 236, 0.6); }
.opt--tier .inclusions {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; color: rgba(246, 243, 236, 0.82);
  line-height: 1.55;
  padding-top: 18px;
  border-top: 1px solid rgba(246, 243, 236, 0.18);
  margin-top: auto;
}
.opt--tier.is-selected .inclusions {
  color: rgba(246, 243, 236, 0.82);
  border-color: rgba(246, 243, 236, 0.18);
}
.opt--tier .inclusions li { display: flex; gap: 10px; align-items: flex-start; }
.opt--tier .inclusions li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--tan-soft); flex-shrink: 0; margin-top: 8px;
}
.opt--tier.is-selected .inclusions li::before { background: var(--tan-soft); }
.opt--tier .popular {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: var(--tan);
  display: flex; align-items: center; gap: 6px;
}
.opt--tier .popular::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tan); }

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; gap: 14px; }
  .opt--tier {
    min-height: auto;
    padding: 22px 22px 24px;
    gap: 12px;
  }
  .opt--tier .name { font-size: 22px; line-height: 1.15; }
  .opt--tier .price { font-size: 19px; }
  .opt--tier .inclusions {
    font-size: 13.5px;
    padding-top: 14px;
    gap: 8px;
    line-height: 1.5;
  }
  .opt--tier .popular { top: 14px; right: 14px; font-size: 9.5px; }
}

/* DATES ROOM */
.dates { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.opt--date {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 26px;
  min-height: 96px;
}
.opt--date .month {
  font-family: var(--font-display);
  font-size: clamp(38px, 3.6vw, 54px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-style: italic;
  color: var(--jungle-deep);
}
.opt--date.is-selected .month { color: var(--tan-soft); }
.opt--date .month .day {
  font-style: normal;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.3vw, 22px);
  display: block; color: var(--ink);
  margin-top: 4px;
  letter-spacing: -0.005em;
}
.opt--date.is-selected .month .day { color: var(--cream); }
.opt--date .meta { display: flex; flex-direction: column; gap: 6px; }
.opt--date .line-1 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.opt--date.is-selected .line-1 { color: var(--cream); }
.opt--date .line-2 {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: var(--trk-caption);
  text-transform: uppercase; color: var(--ink-quiet);
}
.opt--date.is-selected .line-2 { color: rgba(246,243,236,0.6); }
.opt--date .spots {
  text-align: right;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: var(--clay);
  line-height: 1.45;
}
.opt--date.is-selected .spots { color: var(--tan-soft); }
.opt--date .spots strong { font-family: var(--font-display); font-size: 22px; font-weight: 400; display: block; }
.opt--date.unavailable { opacity: 0.4; pointer-events: none; }

@media (max-width: 780px) { .dates { grid-template-columns: 1fr; } .opt--date { gap: 16px; padding: 18px 20px; } }

/* Room footer — stable 3-col grid so back button never shifts horizontally,
   and nav slot reserves space so it never jumps in/out of existence */
.room__foot {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  margin-top: clamp(40px, 6vh, 60px);
  gap: 20px;
}
.room__nav {
  grid-column: 1;
  display: flex; gap: 12px;
  justify-self: start;
  min-height: 46px; /* reserve height */
}
.room__summary {
  grid-column: 2;
  text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: var(--ink-quiet); line-height: 1.6;
}
.room__summary strong { color: var(--ink); font-weight: 400; font-family: var(--font-display); font-size: 15px; letter-spacing: -0.005em; text-transform: none; }
.finder.step-3 .room__summary { color: rgba(246,243,236,0.6); }
.finder.step-3 .room__summary strong { color: var(--cream); }

/* Back button — always occupies its slot, fades in smoothly */
#finder-back {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.finder:not(.step-0) #finder-back {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 720px) {
  .room__foot {
    grid-template-columns: auto 1fr;
    margin-top: clamp(20px, 3vh, 28px);
    gap: 14px;
    align-items: center;
  }
  .room__nav {
    grid-column: 1;
    min-height: 0;
    align-self: center;
  }
  .room__summary {
    grid-column: 2;
    text-align: right;
    align-self: center;
    font-size: 10.5px;
  }
  .room__summary strong { font-size: 14px; }
  .nav-btn { padding: 11px 18px; font-size: 12.5px; }
}
.nav-btn {
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 13.5px;
  border: 1px solid rgba(31,42,34,0.18);
  display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--dur-quick);
  cursor: pointer;
  color: var(--ink);
}
.nav-btn:hover:not(:disabled) { border-color: var(--ink); }
.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.nav-btn.primary {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.nav-btn.primary:hover:not(:disabled) { background: var(--jungle-deep); border-color: var(--jungle-deep); }
.finder.step-3 .nav-btn { color: var(--cream); border-color: rgba(246,243,236,0.3); }
.finder.step-3 .nav-btn:hover:not(:disabled) { border-color: var(--cream); }
.finder.step-3 .nav-btn.primary { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* Empty state when no retreats match the selected duration */
.room__empty-state {
  grid-column: 1 / -1;
  padding: clamp(36px, 5vh, 56px) clamp(24px, 4vw, 48px);
  text-align: center;
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--ink-soft);
  line-height: 1.65;
  border: 1px dashed rgba(31, 42, 34, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.4);
}
.room__empty-state em { font-style: italic; color: var(--jungle-deep); }

/* ROOM 4 — The Reveal */
.reveal {
  color: var(--cream);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
}
.reveal__stage { display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.reveal__eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: rgba(246,243,236,0.55);
  display: flex; align-items: center; gap: 12px;
}
.reveal__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--tan); }
.reveal h2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--cream);
}
.reveal h2 em { font-style: italic; color: var(--tan-soft); }
.reveal__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(246,243,236,0.1);
  border: 1px solid rgba(246,243,236,0.1);
}
.reveal__meta .cell {
  padding: 22px 20px;
  background: var(--ink);
  display: flex; flex-direction: column; gap: 6px;
}
.reveal__meta .lbl {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: rgba(246,243,236,0.45);
}
.reveal__meta .val {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 26px);
  letter-spacing: -0.01em;
  color: var(--cream);
  line-height: 1.15;
}
.reveal__meta .val em { font-style: italic; color: var(--tan-soft); }
.reveal__side {
  background: rgba(246,243,236,0.04);
  border: 1px solid rgba(246,243,236,0.12);
  padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 24px;
  position: relative;
}
.reveal__side h4 {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: rgba(246,243,236,0.6);
  margin: 0;
  font-weight: 400;
}
.reveal__includes {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 14.5px; line-height: 1.5;
  color: rgba(246,243,236,0.85);
}
.reveal__includes li { display: flex; gap: 12px; align-items: flex-start; }
.reveal__includes li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--tan); flex-shrink: 0; margin-top: 9px;
}
.reveal__total {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(246,243,236,0.18);
}
.reveal__total .lbl {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: rgba(246,243,236,0.5);
}
.reveal__total .n {
  font-family: var(--font-display);
  font-size: clamp(44px, 4.8vw, 68px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 10px;
  font-weight: 400;
  display: flex; align-items: baseline; gap: 10px;
}
.reveal__total .n em { font-style: italic; color: var(--tan-soft); }
.reveal__total .note {
  font-size: 13px; color: rgba(246,243,236,0.55);
  margin-top: 12px; line-height: 1.55;
  max-width: 38ch;
}

.reveal__cta {
  display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap;
}
.reveal__cta .btn--primary { background: var(--cream); color: var(--ink); padding: 18px 32px; font-size: 14px; }
.reveal__cta .btn--primary:hover { background: #fff; }
.reveal__cta .btn--outline { color: var(--cream); border-color: rgba(246,243,236,0.3); padding: 18px 28px; }
.reveal__cta .btn--outline:hover { border-color: var(--cream); background: rgba(246,243,236,0.06); }

@media (max-width: 900px) { .reveal { grid-template-columns: 1fr; } .reveal__meta { grid-template-columns: 1fr; } }

/* Discovery call form */
.discovery {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  padding: clamp(60px, 9vh, 110px) 0;
  color: var(--ink);
  border-top: 1px solid rgba(31,42,34,0.08);
}

/* Atmospheric glows behind the glass — soft, offscreen-blurred blobs
   that give the backdrop-filter something to refract. */
.discovery__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.discovery__glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.55;
  will-change: transform;
}
.discovery__glow--a {
  width: 640px; height: 640px;
  top: -180px; left: -160px;
  background: radial-gradient(circle, var(--jungle-quiet) 0%, rgba(138, 168, 138, 0) 70%);
}
.discovery__glow--b {
  width: 720px; height: 720px;
  bottom: -240px; right: -200px;
  background: radial-gradient(circle, var(--tan-soft) 0%, rgba(200, 169, 131, 0) 70%);
  opacity: 0.45;
}

/* The glass card that holds the whole conversation */
.discovery__glass {
  position: relative;
  z-index: 1;
  padding: clamp(36px, 4.2vw, 72px) clamp(28px, 4vw, 64px);
  border-radius: 28px;
  background: rgba(253, 251, 244, 0.52);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
          backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 44px 90px -32px rgba(31, 42, 34, 0.14),
    0 8px 28px -10px rgba(31, 42, 34, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(31, 42, 34, 0.04);
}

.discovery__grid {
  display: grid;
  grid-template-columns: minmax(400px, 1fr) 780px;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.discovery__lead h3 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 400;
  margin-top: 20px;
  max-width: 16ch;
}
.discovery__lead h3 em { font-style: italic; color: var(--jungle-deep); }
.discovery__lead p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 22px;
  max-width: 46ch;
}

.discovery__founders {
  margin: 40px 0 0;
  padding-top: 32px;
  border-top: 1px solid rgba(31,42,34,0.1);
  max-width: 200px;
}
.discovery__founders .img { border-radius: var(--r-md); overflow: hidden; }
.discovery__founders figcaption {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 14px;
}
.discovery__founders .names {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.discovery__founders .role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--trk-caption);
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.discovery__booking { min-width: 0; }

.discovery__tz {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--trk-caption);
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-align: center;
}
.discovery__tz em { font-style: normal; color: var(--ink-soft); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.field label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: var(--trk-caption); text-transform: uppercase;
  color: var(--ink-quiet);
}
.field label .opt { color: var(--ink-whisper); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  font: inherit;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.005em;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(31,42,34,0.18);
  color: var(--ink);
  transition: border-color var(--dur-quick);
  resize: none;
}
.field textarea { font-family: var(--font-body); font-size: 15.5px; letter-spacing: 0; line-height: 1.55; min-height: 64px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--jungle-deep); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-whisper); font-style: italic; }

.calendar {
  margin-top: 10px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid rgba(31,42,34,0.08);
}
.calendar__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.calendar__month {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.005em;
}
.calendar__nav { display: flex; gap: 6px; }
.calendar__nav button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(31,42,34,0.14); display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur-quick); }
.calendar__nav button:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.calendar__nav svg { width: 12px; height: 12px; }
.calendar__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar__day-label, .calendar__day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
  border-radius: 2px;
}
.calendar__day-label { color: var(--ink-whisper); font-size: 9px; letter-spacing: var(--trk-caption); text-transform: uppercase; aspect-ratio: auto; height: 22px; }
.calendar__day { cursor: pointer; color: var(--ink-soft); transition: all var(--dur-quick); position: relative; }
.calendar__day:hover { background: rgba(31,42,34,0.06); }
.calendar__day.has { color: var(--jungle-deep); font-weight: 500; }
.calendar__day.has::after { content: ""; position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 50%; background: var(--jungle); }
.calendar__day.selected { background: var(--ink); color: var(--cream); }
.calendar__day.selected::after { background: var(--tan-soft); }
.calendar__day.disabled { color: var(--ink-whisper); opacity: 0.3; cursor: default; }
.calendar__day.disabled:hover { background: transparent; }

.times {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-top: 14px;
}
.times button {
  padding: 10px 8px;
  border: 1px solid rgba(31,42,34,0.14);
  border-radius: 2px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink);
  transition: all var(--dur-quick);
  cursor: pointer;
}
.times button:hover { border-color: var(--ink); }
.times button.selected { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.submit-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(31,42,34,0.08);
  gap: 16px; flex-wrap: wrap;
}
.submit-row .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--ink-quiet); }

/* Cal.com inline embed — card-style wrapper matching the site's editorial
   aesthetic: white surface (matches Cal.com's interior → no "green border"),
   subtle jungle-tinted border + soft shadow for depth. Cal.com picks its
   side-by-side internal layout when iframe landscape aspect >= ~1.2. */
/* NO forced height. NO background. Let Cal.com's postMessage autoresize
   match iframe to its actual content. Anything else creates a "white
   border" of wasted space. */
.calcom-embed {
  width: 100%;
  background: transparent;
  border: 0;
  position: relative;
  min-height: 420px; /* skeleton only — Cal.com sets real height via postMessage */
}
.calcom-embed iframe {
  border: 0;
  width: 100% !important;
  display: block;
}

/* Confirmation card — sits inside the glass so it stays quiet. */
#discovery-confirm {
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* === Responsive breakpoints ===========================================
   2-col split requires room for: left_min(340) + gap + right_min(820).
   Below ~1360px viewport, that math doesn't fit → collapse to stacked
   and center EVERYTHING uniformly (copy, founders photo, calendar). */
@media (max-width: 1359px) {
  .discovery__grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 64px);
  }
  .discovery__lead {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }
  .discovery__lead .eyebrow-row { justify-content: center; }
  .discovery__lead h3 {
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
  }
  .discovery__lead p {
    margin-left: auto;
    margin-right: auto;
  }
  .discovery__founders {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
  .discovery__founders figcaption { justify-content: center; }
  .discovery__booking {
    max-width: 780px;
    margin: 0 auto;
  }
  .discovery__tz { text-align: center; margin-top: 18px; }
}

/* Mobile fine-tuning */
@media (max-width: 720px) {
  .discovery__lead h3 { font-size: clamp(28px, 7vw, 40px); }
  .discovery__founders { max-width: 100%; margin-top: 32px; padding-top: 24px; }
  .discovery__tz { text-align: center; }
  .discovery__glass {
    padding: 32px 22px;
    border-radius: 22px;
  }
  .discovery__glow--a { width: 420px; height: 420px; top: -140px; left: -120px; filter: blur(80px); }
  .discovery__glow--b { width: 480px; height: 480px; bottom: -160px; right: -140px; filter: blur(80px); }
}

/* Confirmation state */
.confirm {
  text-align: center;
  padding: clamp(40px, 6vh, 60px) clamp(20px, 3vw, 40px);
}
.confirm__mark {
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid var(--jungle);
  margin: 0 auto 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--jungle-deep);
}
.confirm h4 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 400; letter-spacing: -0.015em;
  max-width: 18ch; margin: 0 auto;
}
.confirm h4 em { font-style: italic; color: var(--jungle-deep); }
.confirm p {
  margin: 20px auto 0; max-width: 44ch;
  font-size: 15.5px; color: var(--ink-soft); line-height: 1.6;
}
.confirm .sig {
  display: inline-block; margin-top: 26px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-size: 28px; color: var(--jungle-deep);
  transform: rotate(-4deg);
}