/* CAMPO: the land itself. Wide landscapes moving slowly, a quiet serif, olive and bone, a botanical line that draws as you scroll. */
:root {
  --bg: #f1ece0; --bg-2: #e6dfcd; --fg: #23261a; --muted: #636651;
  --olive: #2f3821; --olive-2: #3f4a2b; --sage: #a9ae8b; --earth: #9a5b2e; --bone: #f1ece0;
  --accent: #9a5b2e; --accent-ink: #f8f3e8; --focus: #9a5b2e;
  --font-display: "Instrument Serif", Georgia, serif; --font-body: "Hanken Grotesk", ui-sans-serif, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --grain: 0.08; --wa-bg: var(--olive); --wa-fg: var(--bone);
}
body { font-weight: 400; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; }

/* nav */
.nav { position: fixed; z-index: 70; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: max(14px, env(safe-area-inset-top)) clamp(16px, 4vw, 48px) 14px; color: var(--bone); transition: background-color 0.6s var(--ease); }
.nav.is-solid { background: color-mix(in oklab, var(--olive) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav__mark { font: 400 1.6rem/1 var(--font-display); text-decoration: none; letter-spacing: 0.005em; }
.nav__cta { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--bone) 55%, transparent); font-size: 0.9375rem; text-decoration: none; transition: background-color 0.5s var(--ease), color 0.5s var(--ease); }
.nav__cta:hover { background: var(--bone); color: var(--olive); }

/* pills */
.pill { display: inline-flex; align-items: center; gap: 16px; min-height: 64px; padding: 7px 7px 7px 28px; border-radius: 999px; background: var(--bone); color: var(--olive); font: 500 1.0625rem/1 var(--font-body); text-decoration: none; white-space: nowrap; transition: transform 0.6s var(--ease), background-color 0.5s var(--ease); }
.pill__dot { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--earth); color: var(--accent-ink); transition: transform 0.6s var(--ease); }
.pill:hover .pill__dot { transform: translateX(3px) rotate(-10deg); }
.pill:active { transform: scale(0.97); }
.pill--bone { background: var(--bone); }
.ghost { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--bone) 45%, transparent); text-underline-offset: 0.35em; }

/* hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--bone); overflow: clip; background: var(--olive); }
.hero__media { position: absolute; inset: 0; background: var(--olive); }
.hero__media img { height: 118%; top: -9%; filter: saturate(0.92) contrast(1.04); }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--olive) 92%, transparent) 0%, color-mix(in oklab, var(--olive) 35%, transparent) 50%, color-mix(in oklab, var(--olive) 20%, transparent) 100%); }
.hero__in { position: relative; z-index: 1; padding-bottom: 13vh; }
.hero__kind { font-size: 0.9375rem; margin-bottom: 16px; color: color-mix(in oklab, var(--bone) 85%, transparent); }
.hero__title { font-size: clamp(3.2rem, 11vw + 0.4rem, 9.5rem); line-height: 0.92; letter-spacing: -0.02em; max-width: 12ch; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.branch { position: absolute; z-index: 1; width: min(78vw, 620px); height: auto; right: -12vw; top: 14vh; color: color-mix(in oklab, var(--bone) 70%, transparent); pointer-events: none; transform: rotate(-8deg); }

/* product */
.product { padding: 18vh 0; }
.product__grid { display: grid; gap: 40px; }
.arch { aspect-ratio: 3 / 4; border-radius: 999px 999px 18px 18px; }
.arch--soft { border-radius: 48px; aspect-ratio: 1; }
.media img[data-parallax] { height: 118%; top: -9%; }
.product__img img, .step img, .visit__img img { filter: saturate(0.94) contrast(1.04) sepia(0.06); }
.product__text h2, .path__aside h2, .visit__text h2 { font-size: clamp(2.8rem, 7vw + 0.5rem, 6.5rem); line-height: 0.95; letter-spacing: -0.015em; }
.lead { margin-top: 20px; font-size: clamp(1.2rem, 0.8vw + 1rem, 1.5rem); line-height: 1.4; color: var(--muted); max-width: 34ch; }
.prices, .hours { margin: 32px 0 0; padding: 0; border-top: 1px solid var(--fg); }
.prices li, .hours li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid color-mix(in oklab, var(--fg) 25%, transparent); }
.prices li span:last-child, .hours li span:last-child { font: 400 1.75rem/1 var(--font-display); white-space: nowrap; }
.hours li span:last-child { font-size: 1.4rem; }
.hours .is-hot { color: var(--earth); }

/* path: sticky title, steps scroll past */
.path { background: var(--bg-2); padding: 16vh 0; }
.path__grid { display: grid; gap: 40px; }
.path__aside { align-self: start; }
.path__note { margin-top: 14px; font: italic 400 1.5rem/1.2 var(--font-display); color: var(--earth); }
.steps { margin: 0; padding: 0; display: grid; gap: 56px; }
.step .media { aspect-ratio: 4 / 3; border-radius: 22px; }
.step h3 { margin-top: 18px; font-size: clamp(2rem, 2.5vw + 1rem, 3rem); line-height: 1; }
.step p { margin-top: 6px; color: var(--muted); max-width: 32ch; }

/* landscape band */
.band { position: relative; min-height: 88svh; display: grid; align-items: center; color: var(--bone); overflow: clip; }
.band__media { position: absolute; inset: 0; background: var(--olive); }
.band__media img { filter: brightness(0.62) saturate(0.9); }
.band__in { position: relative; }
.band__text { font: italic 400 clamp(2.6rem, 7vw + 0.5rem, 7rem)/1 var(--font-display); letter-spacing: -0.015em; max-width: 15ch; }

/* visit */
.visit { padding: 18vh 0; }
.visit__grid { display: grid; gap: 40px; }
.links { display: grid; margin-top: 28px; border-top: 1px solid var(--fg); }
.lk { display: flex; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid color-mix(in oklab, var(--fg) 25%, transparent); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; transition: color 0.4s var(--ease); }
.lk__arr { margin-left: auto; transition: transform 0.6s var(--ease); }
.lk:hover { color: var(--earth); }
.lk:hover .lk__arr { transform: translate(4px, -3px); }

/* final */
.final { position: relative; background: var(--olive); color: var(--bone); padding: 20vh 0; overflow: clip; }
.final__in { position: relative; z-index: 1; display: grid; gap: 34px; justify-items: start; }
.final__head { font-size: clamp(3.2rem, 11vw, 9rem); line-height: 0.92; letter-spacing: -0.02em; max-width: 11ch; }
.final .branch { top: auto; bottom: -4vh; right: -14vw; color: color-mix(in oklab, var(--sage) 70%, transparent); transform: rotate(-14deg) scaleX(-1); }

/* footer */
.foot { background: var(--olive); color: color-mix(in oklab, var(--bone) 70%, transparent); padding: 0 0 calc(100px + env(safe-area-inset-bottom)); font-size: 0.875rem; }
.foot__in { display: grid; gap: 8px; padding-top: 36px; border-top: 1px solid color-mix(in oklab, var(--bone) 18%, transparent); }
.foot__mark { font: 400 2.4rem/1 var(--font-display); color: var(--bone); }
.foot a { color: var(--bone); }

@media (min-width: 900px) {
  .branch { right: 2vw; top: 16vh; width: 560px; }
  .product__grid { grid-template-columns: 5fr 6fr; column-gap: 8vw; align-items: center; }
  .path__grid { grid-template-columns: 5fr 7fr; column-gap: 6vw; }
  .path__aside { position: sticky; top: 18vh; }
  .steps { gap: 18vh; padding-top: 4vh; }
  .step:nth-child(2) { margin-left: 18%; }
  .visit__grid { grid-template-columns: 1fr 1fr; column-gap: 8vw; align-items: center; }
  .final__in { grid-template-columns: 1fr auto; align-items: end; }
  .foot__in { grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 32px; }
}
/* ambient: the landscape breathes */
.drift { animation: drift 24s cubic-bezier(0.33, 0, 0.2, 1) both; transform-origin: 55% 45%; }
@keyframes drift { from { transform: scale(1.14); } to { transform: scale(1); } }